# フロントエンド設計方針 (frontend-design-direction)

> 本番 UI を作る前に製品領域に合ったデザイン方針を決め、描画結果でアクセシビリティ、レスポンシブ、各状態を確認します。

- カテゴリ: [UI・インタラクション](https://www.myskills.tools/ja/categories/ui-interaction/)
- 提供元: コミュニティ · Affaan Mustafa
- リポジトリ: https://github.com/affaan-m/ECC/tree/main/skills/frontend-design-direction (commit 1c05119)
- SKILL.md: https://github.com/affaan-m/ECC/blob/main/skills/frontend-design-direction/SKILL.md
- インストールコマンド: `npx skills add affaan-m/ECC --skill frontend-design-direction`
- ライセンス: MIT
- 対応ツール: Claude Code, Codex, Cursor, Copilot, OpenCode
- 権限: read-repo ✓, write-files ✓, shell ✓, network ✓
- 状態: スキャン済み
- ルールスキャンですべてのリスクを検出できるわけではありません。インストール前にこのスキルの SKILL.md を読み、権限を確認してください。
- ⚠ 任意の UIZZE 参照検索はアカウントが必要な外部サービスで、同意時のみ使い、スクリーンショット、コード、ユーザーデータは送りません。

## 基本ルール

ソースを見るだけでは最終の描画ゲートを通過できず、未テストの部分は正直に報告し、証拠を捏造しません。

## 実行フェーズ

1. **方針を決める** — コーディング前に、目的、利用者、トーン、印象に残る一点、フレームワークやアクセシビリティ、既存デザインシステムなどの制約を決めます。
2. **根拠を記録** — 主要操作、階層、対象ビューポートと各判断の根拠を記録し、読み込み・空・エラー・部分・成功・権限の各状態の契機と表示を定めます。
3. **契約に沿って実装** — 既存のコンポーネント、トークン、アイコンを優先し、CSS 変数で一貫性を保ち、紫のグラデーションやカードの入れ子といった定番パターンを避けます。
4. **描画を確認** — 対象ビューポートでキーボード操作、フォーカス表示、ラベル、コントラスト、動きの軽減、タップ領域を確認し、各状態を試して問題を直します。
5. **証拠チェッカー実行** — スクリーンショットと所見をローカルの JSON 記録にまとめ、同梱の node scripts/check-evidence.js で不備がないか検査します。

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

| 機能 | 必要か | 説明 |
|---|---|---|
| ファイル書き込み | 必要 | UI コードを書き、スクリーンショットとローカルの JSON 証拠記録をワークスペースに保存します。 |
| コマンド実行 | 一部で必要 | 同梱の check-evidence.js と描画確認を実行します。許可なくパッケージはインストールしません。 |
| 外部通信 | 一部で必要 | ユーザーが同意した場合のみ任意の UIZZE MCP を使い、匿名化した大まかなデザイン要件だけを送ります。 |

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

```yaml
---
name: frontend-design-direction
description: Set an ECC-specific frontend design direction for production UI work. Use when building or improving websites, dashboards, applications, components, landing pages, visual tools, or any web UI that needs stronger product-specific design judgment.
metadata:
  origin: community
---
```

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