Agent skill
ui
UIコンポーネントとフィードバックフォームを生成。Use when user mentions components, UI, hero sections, forms, feedback, or contact requests. Do NOT load for: authentication features, backend implementation, database operations, or business logic.
Install this agent skill to your Project
npx add-skill https://github.com/Chachamaru127/claude-code-harness/tree/main/skills/ui
SKILL.md
UI Skills
UIコンポーネントとフォームの生成を担当するスキル群です。
制約の優先順位と適用条件
- 基本は
${CLAUDE_SKILL_DIR}/references/ui-skills.mdの制約を最優先で適用する。 ${CLAUDE_SKILL_DIR}/references/frontend-design.mdは「尖った/独自/表現強め/ブランド強化」などが明示された場合のみ適用する。- UI Skills の MUST/NEVER は原則維持。ただしユーザーが明示的に要求した場合のみ以下の例外を許可する:
- グラデーション、発光、強い装飾
- アニメーション（追加・拡張）
- カスタム easing
機能詳細
| 機能 | 詳細 |
|---|---|
| 制約セット | See references/ui-skills.md / references/frontend-design.md |
| コンポーネント生成 | See references/component-generation.md |
| フィードバックフォーム | See references/feedback-forms.md |
実行手順
- 制約セットを適用（優先順位に従う）
- 品質判定ゲート（Step 0）
- ユーザーのリクエストを分類
- 上記の「機能詳細」から適切な参照ファイルを読む
- その内容に従って生成
Step 0: 品質判定ゲート（a11y チェックリスト）
UI コンポーネント生成時は、アクセシビリティを確保:
♿ アクセシビリティチェックリスト
生成する UI は以下を満たすことを推奨：
### 必須項目
- [ ] 画像に alt 属性を設定
- [ ] フォーム要素に label を関連付け
- [ ] キーボード操作可能（Tab でフォーカス移動）
- [ ] フォーカス状態が視覚的に分かる
### 推奨項目
- [ ] 色だけに依存しない情報伝達
- [ ] コントラスト比 4.5:1 以上（テキスト）
- [ ] aria-label / aria-describedby の適切な使用
- [ ] 見出し構造（h1 → h2 → h3）が論理的
### インタラクティブ要素
- [ ] ボタンに適切なラベル（「詳細」ではなく「製品詳細を見る」）
- [ ] モーダル/ダイアログのフォーカストラップ
- [ ] エラーメッセージがスクリーンリーダーで読まれる
VibeCoder 向け
♿ 誰でも使えるデザインにするために
1. **画像には説明をつける**
- 「商品画像」ではなく「赤いスニーカー、正面から」
2. **クリックできる場所はキーボードでも操作可能に**
- Tab キーで移動、Enter で決定
3. **色だけで判断させない**
- 赤=エラー だけでなく、アイコン+テキストも
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
Chachamaru127/claude-code-harness
breezing
チーム実行モード（Codex ネイティブ版）— harness-work のチーム協調エイリアス。breezing, チーム実行, 全部やって でトリガー。
Chachamaru127/claude-code-harness
harness-work
Harness v3 統合実行スキル（Codex ネイティブ版）。Plans.md タスクを1件から全並列チーム実行まで担当。以下で起動: 実装して、実行して、harness-work、全部やって、breezing、チーム実行、parallel。プランニング・レビュー・リリース・セットアップには使わない。
Chachamaru127/claude-code-harness
harness-plan
Harness v3 統合プランニングスキル。タスク計画・Plans.md管理・進捗同期を担当。以下のフレーズで起動: 計画を作る、タスクを追加、Plans.md更新、完了マーク、進捗確認、harness-plan、harness-sync。実装・レビュー・リリースには使わない。
Chachamaru127/claude-code-harness
breezing
チーム実行モード — harness-work のチーム協調エイリアス。breezing, チーム実行, 全部やって でトリガー。
Chachamaru127/claude-code-harness
harness-setup
Harness v3 統合セットアップスキル。プロジェクト初期化・ツール設定・2エージェント構成・メモリ設定・公開 skill mirror 同期を担当。以下で起動: セットアップ、初期化、新規プロジェクト、CIセットアップ、codex CLIセットアップ、harness-mem、エージェント設定、symlink、mirror、harness-setup。実装・レビュー・リリース・プランニングには使わない。
Chachamaru127/claude-code-harness
harness-sync
Plans.md と実装の進捗同期。差分検出・マーカー更新・レトロスペクティブを実行。以下で起動: harness-sync、sync-status、進捗確認、今どこ、どこまで終わった。--snapshot で進捗スナップショット保存にも対応。プランニング・実装・レビュー・リリースには使わない。
Didn't find tool you were looking for?