Skills DirectoryGitHub から厳選したオープンソースの Skills
日本語

frontend-design-directioncommit 1c05119SKILL.md · UI・インタラクション

フロントエンド設計方針

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

任意の UIZZE 参照検索はアカウントが必要な外部サービスで、同意時のみ使い、スクリーンショット、コード、ユーザーデータは送りません。

npx skills add affaan-m/ECC --skill frontend-design-direction
権限
  • read-repo
  • write-files
  • shell
  • network
対応ツール
Claude Code, Codex, Cursor, Copilot, OpenCode
GitHub
294.3k
提供元
コミュニティ · Affaan Mustafa
状態
スキャン済み
ライセンス
MIT
カテゴリ
UI・インタラクション
リポジトリ
github.com/affaan-m/ECC/skills/frontend-design-direction

基本ルール

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

実行フェーズ

  1. フェーズ 01方針を決める

    コーディング前に、目的、利用者、トーン、印象に残る一点、フレームワークやアクセシビリティ、既存デザインシステムなどの制約を決めます。

  2. フェーズ 02根拠を記録

    主要操作、階層、対象ビューポートと各判断の根拠を記録し、読み込み・空・エラー・部分・成功・権限の各状態の契機と表示を定めます。

  3. フェーズ 03契約に沿って実装

    既存のコンポーネント、トークン、アイコンを優先し、CSS 変数で一貫性を保ち、紫のグラデーションやカードの入れ子といった定番パターンを避けます。

  4. フェーズ 04描画を確認

    対象ビューポートでキーボード操作、フォーカス表示、ラベル、コントラスト、動きの軽減、タップ領域を確認し、各状態を試して問題を直します。

  5. フェーズ 05証拠チェッカー実行

    スクリーンショットと所見をローカルの JSON 記録にまとめ、同梱の node scripts/check-evidence.js で不備がないか検査します。

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

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

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

SKILL.md のフロントマター（YAML）commit 1c05119
---
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
---

関連スキル

ルールスキャンですべてのリスクを検出できるわけではありません。インストール前にこのスキルの SKILL.md を読み、権限を確認してください。
Markdown 版 GitHub