frontend-ui-engineeringcommit f97d842SKILL.md · UI・インタラクション
フロントエンドUI実装
アクセシブルでレスポンシブな、プロジェクトのデザインシステムに沿った本番品質の UI を作り、AI っぽい見た目を避けます。
npx skills add addyosmani/agent-skills --skill frontend-ui-engineeringコマンドを選択しました。手動でコピーしてください。
- 権限
- read-repo
- write-files
- shell
- network
- 対応ツール
- Claude Code, Codex, Cursor, Copilot, Gemini CLI
- GitHub
- 112.3k
- 提供元
- コミュニティ · Addy Osmani
- 状態
- スキャン済み
- ライセンス
- MIT
- カテゴリ
- UI・インタラクション
基本ルール
すべてのコンポーネントは WCAG 2.1 AA を満たし、キーボード操作、ラベル、十分なコントラストを備えます。
実行フェーズ
フェーズ 01コンポーネント構成
関連ファイルを同じ場所に置き、設定より合成を優先し、データ取得と表示を分けます。
フェーズ 02状態管理を選ぶ
ローカル状態からグローバルストアまで、足りる中で最も単純な方法を選び、props のバケツリレーは3階層までにします。
フェーズ 03デザインシステム準拠
意味のある色トークン、一貫した余白スケール、見出し階層を使い、参考事例は根拠として扱い、他社のブランドやレイアウトは写しません。
フェーズ 04アクセシブル対応
キーボード操作、ARIA ラベル、フォーカス管理を実装し、モバイルファーストで組み、スケルトン、空、エラーの各状態を用意します。
フェーズ 05検証
コンソールエラーがなく、Tab で操作でき、スクリーンリーダーで伝わり、320/768/1024/1440px で崩れず、axe-core の警告がないことを確認します。
権限の説明（SKILL.md より）
| 機能 | 必要か | 説明 |
|---|---|---|
| ファイル書き込み | 必要 | コンポーネント、スタイル、フック、テストファイルを作成・変更します。 |
| コマンド実行 | 不要 | 特定のコマンド実行は求めておらず、検証はブラウザの開発者ツールと axe-core で行います。 |
| 外部通信 | 不要 | ネットワークは不要で、チームが用意した参考資料を使えます。 |
SKILL.md のフロントマター（YAML）
---
name: frontend-ui-engineering
description: Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
---関連スキル
ルールスキャンですべてのリスクを検出できるわけではありません。インストール前にこのスキルの SKILL.md を読み、権限を確認してください。