ui

UI Skills

This is a group of skills responsible for generating UI components and forms.

Constraint Priority and Application Conditions

1. Basically, apply the ${CLAUDE_SKILL_DIR}/references/ui-skills.md constraints with the highest priority.
2. ${CLAUDE_SKILL_DIR}/references/frontend-design.md applies only when "edgy/unique/expressive/strong branding" etc. isexplicitlyspecified.
3. In principle, maintain the MUST/NEVER of UI Skills. However,only when the user explicitly requests it, allow the following exceptions:
   • Gradients, glows, strong decoration
   • Animation (addition/extension)
   • Custom easing

Feature Details

Feature	Details
Constraint Set	See references/ui-skills.md / references/frontend-design.md
Component Generation	See references/component-generation.md
Feedback form	See references/feedback-forms.md

Execution Steps

1. Apply the constraint set(follow the priority order)
2. Quality Assessment Gate（Step 0）
3. Classify the user's request
4. Read the appropriate reference file from the "Feature Details" above
5. Generate according to its contents

Step 0: Quality Assessment Gate (a11y checklist)

When generating UI components, ensure accessibility:

♿ アクセシビリティチェックリスト

生成する UI は以下を満たすことを推奨：

### 必須項目
- [ ] 画像に alt 属性を設定
- [ ] フォーム要素に label を関連付け
- [ ] キーボード操作可能（Tab でフォーカス移動）
- [ ] フォーカス状態が視覚的に分かる

### 推奨項目
- [ ] 色だけに依存しない情報伝達
- [ ] コントラスト比 4.5:1 以上（テキスト）
- [ ] aria-label / aria-describedby の適切な使用
- [ ] 見出し構造（h1 → h2 → h3）が論理的

### インタラクティブ要素
- [ ] ボタンに適切なラベル（「詳細」ではなく「製品詳細を見る」）
- [ ] モーダル/ダイアログのフォーカストラップ
- [ ] エラーメッセージがスクリーンリーダーで読まれる

For VibeCoder

♿ 誰でも使えるデザインにするために

1. **画像には説明をつける**
   - 「商品画像」ではなく「赤いスニーカー、正面から」

2. **クリックできる場所はキーボードでも操作可能に**
   - Tab キーで移動、Enter で決定

3. **色だけで判断させない**
   - 赤=エラー だけでなく、アイコン+テキストも