Frontend Skill
Use when the task asks for a visually strong landing page, website, app, prototype, demo, or game UI. This skill enforces restrained composition, image-led hierarchy, cohesive content structure, and tasteful motion while avoiding generic cards, weak branding, and UI clutter.
概要
The Frontend Skill, hosted in the mxyhi/ok-skills repository, provides a specialized framework for AI agents to generate high-quality visual interfaces. Compatible with agents like Codex, Claude, and Cursor, this skill prioritizes aesthetic restraint and image-centric layouts over cluttered, generic designs. It is designed for tasks requiring landing pages, prototypes, or interactive demos where branding and content structure are critical. By enforcing specific design principles such as cohesive hierarchy and subtle motion, the skill helps agents avoid common UI pitfalls like weak branding or excessive card-based layouts. The repository, which has garnered 423 stars, serves as a resource for developers looking to refine the frontend output of their AI-driven development workflows.
ユースケース
導入方法
# Review source first
open https://github.com/mxyhi/ok-skills/blob/main/frontend-skill/SKILL.mdCopy or clone the skill folder into your agent skills directory after reviewing its instructions and scripts.
セキュリティ
As a design-focused skill within the mxyhi/ok-skills repository, users should review the source markdown file for any specific execution requirements. Standard precautions for integrating third-party AI skills apply, ensuring that the generated frontend code is audited for vulnerabilities before deployment in production environments.
関連Skills
Constant Time Testing
trailofbits/skills
暗号実装を実行してタイミングサイドチャネルを測定し、統計解析には dudect を、動的トレースには Valgrind 上の Timecop を使用します。形式的、シンボリック、動的、統計的ツールの各カテゴリと結果の確認方法を網羅しています。実行中の実装が constant-time であるかのテスト、コンパイル済みバイナリのタイミングのばらつき測定、または疑わしいタイミング攻撃の調査を行う際に使用します。コンパイラ出力を静的に検査するためのものではありません — constant-time-analysis plug
GSAP Core
mxyhi/ok-skills
コアな API のための公式 GSAP スキル — gsap.to()、from()、fromTo()、easing、duration、stagger、defaults、gsap.matchMedia()(レスポンシブ、prefers-reduced-motion)。ユーザーが JavaScript アニメーションライブラリ、React/Vue/vanilla でのアニメーション、GSAP のトゥイーン、イージング、基本的なアニメーション、レスポンシブまたは reduced-motion を求めた際に使用します。
花叔Design · Huashu-Design
mxyhi/ok-skills
花叔Design——HTMLを使用して、高精度プロトタイプ、インタラクティブデモ、スライド、アニメーション、デザインバリエーションの探索、デザインの方向性に関するアドバイス、専門家によるレビューを提供します。タスクに応じて適切な専門家(UX、アニメーター、スライドデザイナー、プロトタイパー)になりきり、ウェブデザインのありきたりな表現を避けます。トリガーワード:プロトタイプ作成、インタラクティブプロトタイプ、HTMLデモ、アニメーションデモ、デザインバリエーション、hi-fiデザイン、UI mockup、prototype、HTMLページを作成、可視化を作成、アプリプロトタイプ、iOSプロトタイプ、MP4/GIFを書き出し、60fps動画、デザインスタイル、デザインの方向性、カラーパレット、おすすめのスタイル、スタイルを選択、きれいなものを作る、レビュー、見栄えの確認、review this design、解説付きアニメーション、解説動画、長尺の解説動画、voiceover、narration、5分でわかるXの解説
Design Build
tinh2/skills-hub-registry
独自性のある本番仕様のインターフェースを迅速に構築します。モダンなCSS、流動的なタイポグラフィ、意図を持ったモーションを取り入れ、ありきたりなAI感を排した実動コード(Webまたはモバイル)を出力します。使用場面: 'build UI'、'design this'、'create interface'、'make it look good'、'build screen'、'implement design'、'frontend build'、'design build'。
Design Audit
tinh2/skills-hub-registry
アクセシビリティ(WCAG 2.2)、パフォーマンス、テーマ設定、レスポンシブ/アダプティブデザイン、アンチパターン検出を網羅した包括的かつ自律的なデザイン品質監査。トリガー: 'audit design'、'check accessibility'、'a11y audit'、'design review'、'UI quality check'。
Design Claude
tinh2/skills-hub-registry
HTML優先の高精度デザインスキル:インタラクティブプロトタイプ、スライド資料、アニメーションデモ、デザインバリエーションの検討、ビジュアルディレクションの助言、専門的なレビューに対応。トリガー:make a prototype、design demo、interactive prototype、HTML presentation、animation demo。