webapp-ui-skill

Web アプリ UI スキル

ダッシュボード、管理ツール、社内ワークフロー、CRM 画面、設定、データテーブル、状態の多いアプリ画面など、プロダクト UI の設計にはこの専門家を使用してください。

動作モード

• build：アプリ UI を作成またはリファクタリングします。
• audit：既存のアプリ画面をレビューし、修正内容をまとめます。
• state-coverage：読み込み中、空、エラー、無効、フォーカス中、選択中、送信中、成功の各状態を確認します。
• verify：利用可能なローカルの検証を実行し、未確認の項目を報告します。

必須ワークフロー

1. プロダクト UI のレイアウトを決める前に、references/dashboard-patterns.md を読みます。
2. アプリのフローやコンポーネントを変更する前に、references/state-model.md を読みます。
3. 安定した成果物が役立つ場合は、assets/state-matrix.template.md と assets/implementation-report.template.md を使用します。
4. 外部サービスやスクリーンショットを扱う前に、../../shared/privacy-policy.md を確認します。
5. 重要な UI 変更には、../../shared/visual-verification.md を使用します。
6. ソースファイルが利用可能な場合は、scripts/check_state_coverage.ts を実行するか、実行しなかった理由を報告します。
7. URL が利用可能な場合は、scripts/visual_smoke_test.mjs を実行するか、実行しなかった理由を報告します。
8. Ran、Skipped、Planned、Manual を含む簡潔な実装メモを返します。

設計方針

• マーケティング向けの構成よりも、一覧性、比較、繰り返し行う操作を優先します。
• コンパクトな見出し、安定したグリッド、予測しやすいナビゲーション、明示的な状態処理を採用します。
• 繰り返し表示する項目、モーダル、明確に枠で囲む必要のあるツールにはカードを使用します。
• 装飾的なヒーローセクション、入れ子のカード、単調な配色、ビューポートに応じて拡大縮小するタイポグラフィは追加しないでください。
• ボタン、コントロール、テーブルは、寸法を安定させ、ラベルを読みやすくします。

ツールの仕様

• 状態の網羅性：node scripts/check_state_coverage.ts --root "$PROJECT_ROOT" --out reports/state-coverage.json。
• ビジュアルスモークテスト：node scripts/visual_smoke_test.mjs --url "$URL" --out reports/visual-smoke。
• クラウドでの生成は任意であり、デフォルトでは実行しません。明示的な承認とデータ転送に関する注記が必要です。

検証

python3 $CODEX_SKILLS_DIR/.system/skill-creator/scripts/quick_validate.py $CODEX_SKILLS_DIR/webapp-ui-skill
python3 $CODEX_SKILLS_DIR/senior-skill-architect/scripts/lint_production_skill.py $CODEX_SKILLS_DIR/webapp-ui-skill

出力形式

Surface:
Primary workflow:
State coverage:
Ran:
Skipped:
Manual findings:
Files changed or proposed:
Verification required:
Risks: