# フロントエンドUI実装 (frontend-ui-engineering)

> アクセシブルでレスポンシブな、プロジェクトのデザインシステムに沿った本番品質の UI を作り、AI っぽい見た目を避けます。

- カテゴリ: [UI・インタラクション](https://www.myskills.tools/ja/categories/ui-interaction/)
- 提供元: コミュニティ · Addy Osmani
- リポジトリ: https://github.com/addyosmani/agent-skills/tree/main/skills/frontend-ui-engineering (commit f97d842)
- SKILL.md: https://github.com/addyosmani/agent-skills/blob/main/skills/frontend-ui-engineering/SKILL.md
- インストールコマンド: `npx skills add addyosmani/agent-skills --skill frontend-ui-engineering`
- ライセンス: MIT
- 対応ツール: Claude Code, Codex, Cursor, Copilot, Gemini CLI
- 権限: read-repo ✓, write-files ✓, shell ✗, network ✗
- 状態: スキャン済み
- ルールスキャンですべてのリスクを検出できるわけではありません。インストール前にこのスキルの SKILL.md を読み、権限を確認してください。

## 基本ルール

すべてのコンポーネントは WCAG 2.1 AA を満たし、キーボード操作、ラベル、十分なコントラストを備えます。

## 実行フェーズ

1. **コンポーネント構成** — 関連ファイルを同じ場所に置き、設定より合成を優先し、データ取得と表示を分けます。
2. **状態管理を選ぶ** — ローカル状態からグローバルストアまで、足りる中で最も単純な方法を選び、props のバケツリレーは3階層までにします。
3. **デザインシステム準拠** — 意味のある色トークン、一貫した余白スケール、見出し階層を使い、参考事例は根拠として扱い、他社のブランドやレイアウトは写しません。
4. **アクセシブル対応** — キーボード操作、ARIA ラベル、フォーカス管理を実装し、モバイルファーストで組み、スケルトン、空、エラーの各状態を用意します。
5. **検証** — コンソールエラーがなく、Tab で操作でき、スクリーンリーダーで伝わり、320/768/1024/1440px で崩れず、axe-core の警告がないことを確認します。

## 権限の説明（SKILL.md より）

| 機能 | 必要か | 説明 |
|---|---|---|
| ファイル書き込み | 必要 | コンポーネント、スタイル、フック、テストファイルを作成・変更します。 |
| コマンド実行 | 不要 | 特定のコマンド実行は求めておらず、検証はブラウザの開発者ツールと axe-core で行います。 |
| 外部通信 | 不要 | ネットワークは不要で、チームが用意した参考資料を使えます。 |

## SKILL.md のフロントマター（YAML）

```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.
---
```

ホーム: https://www.myskills.tools/ja/ · URL: https://www.myskills.tools/ja/skills/frontend-ui-engineering/