ui

Original source / Raw SKILL.md

---
name: ui
description: "Generates UI components and feedback forms. Use when user mentions コンポーネント, component, UI, ヒーロー, hero, フォーム, form, フィードバック, feedback, 問い合わせ. Do NOT load for: 認証機能, バックエンド実装, データベース操作, ビジネスロジック."
allowed-tools: ["Read", "Write", "Edit", "Bash"]
---

# UI Skills

UIコンポーネントとフォームの生成を担当するスキル群です。

## 制約の優先順位と適用条件

1. 基本は `references/ui-skills.md` の制約を最優先で適用する。
2. `references/frontend-design.md` は「尖った/独自/表現強め/ブランド強化」などが**明示**された場合のみ適用する。
3. UI Skills の MUST/NEVER は原則維持。ただし**ユーザーが明示的に要求した場合のみ**以下の例外を許可する:
   - グラデーション、発光、強い装飾
   - アニメーション（追加・拡張）
   - カスタム easing

## 機能詳細

| 機能 | 詳細 |
|------|------|
| **制約セット** | See [references/ui-skills.md](references/ui-skills.md) / [references/frontend-design.md](references/frontend-design.md) |
| **コンポーネント生成** | See [references/component-generation.md](references/component-generation.md) |
| **フィードバックフォーム** | See [references/feedback-forms.md](references/feedback-forms.md) |

## 実行手順

1. **制約セットを適用**（優先順位に従う）
2. **品質判定ゲート**（Step 0）
3. ユーザーのリクエストを分類
4. 上記の「機能詳細」から適切な参照ファイルを読む
5. その内容に従って生成

### Step 0: 品質判定ゲート（a11y チェックリスト）

UI コンポーネント生成時は、アクセシビリティを確保:

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

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

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

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

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

### VibeCoder 向け

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

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

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

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


---

## Referenced Files

> The following files are referenced in this skill and included for context.

### references/ui-skills.md

```markdown
---
name: ui-skills-summary
description: "UI Skills の制約セット要約（実装品質優先）"
---

# UI Skills Summary

UI 実装で破綻しやすいポイントを防ぐための制約セット。

## Stack
- MUST: Tailwind CSS はデフォルト値を使う（既存カスタムか明示要求がある場合のみ例外）
- MUST: JavaScript のアニメーションが必要なら `motion/react` を使う
- SHOULD: Tailwind の入場/軽微アニメに `tw-animate-css`
- MUST: class 制御は `cn`（`clsx` + `tailwind-merge`）

## Components
- MUST: キーボード/フォーカス挙動はアクセシブルなプリミティブを使う
- MUST: 既存のプリミティブを優先
- NEVER: 同一の操作面でプリミティブを混在させない
- SHOULD: 互換があるなら Base UI を優先
- MUST: アイコンのみボタンには `aria-label`
- NEVER: キーボード/フォーカス挙動を手実装しない（明示要求がない限り）

## Interaction
- MUST: 破壊的操作は AlertDialog
- SHOULD: ローディングは構造的スケルトン
- NEVER: `h-screen` は使わず `h-dvh`
- MUST: fixed 要素は `safe-area-inset` を考慮
- MUST: エラーは操作箇所の近くに出す
- NEVER: input/textarea の貼り付けをブロックしない

## Animation
- NEVER: 明示要求がない限りアニメーション追加しない
- MUST: `transform` / `opacity` のみをアニメーション
- NEVER: `width/height/top/left/margin/padding` をアニメーション
- SHOULD: `background/color` のアニメは小さな局所 UI のみ
- SHOULD: 入口は `ease-out`
- NEVER: フィードバックは 200ms 超えない
- MUST: ループはオフスクリーンで停止
- SHOULD: `prefers-reduced-motion` を尊重
- NEVER: カスタム easing は明示要求がない限り禁止
- SHOULD: 大きな画像/全面面はアニメを避ける

## Typography
- MUST: 見出しは `text-balance`
- MUST: 本文は `text-pretty`
- MUST: 数値は `tabular-nums`
- SHOULD: 密な UI は `truncate` or `line-clamp`
- NEVER: `tracking-*` を勝手に変えない

## Layout
- MUST: 固定の `z-index` スケールを使う（任意の `z-*` は避ける）
- SHOULD: 正方形は `size-*`

## Performance
- NEVER: 大きな `blur()` / `backdrop-filter` をアニメしない
- NEVER: `will-change` を常時付与しない
- NEVER: `useEffect` で書かなくても良い処理は render で書く

## Design
- NEVER: 明示要求がない限りグラデーション禁止
- NEVER: 紫/多色グラデーション禁止
- NEVER: 主要な手掛かりに glow を使わない
- SHOULD: 影は Tailwind のデフォルトスケール
- MUST: 空状態には「次の一手」を 1 つ提示
- SHOULD: アクセント色は 1 つに絞る
- SHOULD: 新色より既存テーマ/トークンを優先

## Sources
- https://www.ui-skills.com/
- https://agent-skills.xyz/skills/baptistearno-typebot-io-ui-skills

```

### references/frontend-design.md

```markdown
---
name: frontend-design-summary
description: "frontend-design の設計思考と美的指針の要約"
---

# Frontend Design Summary

UI の独自性と美的完成度を高めるための設計指針。
明示要求がある場合のみ適用する。

## 設計思考（最初に決める）
- Purpose: 誰の何を解決する UI か
- Tone: 大胆な方向性を 1 つ選ぶ（例: minimal / brutalist / editorial / playful）
- Constraints: 技術制約と a11y
- Differentiation: その UI の「記憶に残る 1 点」を決める

## 実装の品質基準
- Production-grade で実際に動く
- 視覚的に印象が強く、一貫した方向性
- 細部の詰め（余白、階層、状態）

## デザイン指針
- Typography: 目を引く display と読みやすい body のペア
- Color: 主役色と鋭いアクセントを明確に
- Motion: 大きな 1 回の演出に集中（分散しすぎない）
- Space: 余白 or 高密度を意図的に選ぶ
- Background: 雰囲気のあるレイヤーや質感（必要なら）

## 注意
- 方向性は「意図の強さ」が重要。派手さの有無ではない。
- 実装の複雑さはデザインの方向性に合わせる。

## Source
- external frontend-design skill (Anthropic)

```

### references/component-generation.md

```markdown
---
name: component
description: "UIコンポーネント生成（shadcn/ui 等）。ヒーローセクションや料金表などのUIを作りたい場合に使用します。"
allowed-tools: ["Read", "Write", "Edit", "Bash"]
---

# Component Skill

shadcn/uiベースのUIコンポーネントを生成するスキル。
最初に `../ui-skills.md` と `../frontend-design.md` の適用条件を確認する。

---

## トリガーフレーズ

- 「ヒーローセクションを作って」
- 「料金表を作って」
- 「フッターを作って」
- 「お問い合わせフォームを作って」
- 「UIコンポーネントを生成して」

---

## 機能

- shadcn/uiコンポーネントの自動インストール
- レスポンシブ対応
- アクセシビリティ対応
- Tailwind CSSカスタマイズ

---

## 対応コンポーネント

- Hero セクション
- Pricing（料金表）
- Features（機能紹介）
- Contact（お問い合わせ）
- Footer
- Header/Navigation

```

### references/feedback-forms.md

```markdown
---
name: feedback
description: "フィードバック収集機能の実装。ユーザーからの声を集めたい場合に使用します。"
allowed-tools: ["Read", "Write", "Edit", "Bash"]
---

# Feedback Skill

アプリ内フィードバックフォームを実装するスキル。
最初に `../ui-skills.md` と `../frontend-design.md` の適用条件を確認する。

---

## トリガーフレーズ

- 「フィードバック機能を追加して」
- 「ユーザーの声を集めたい」
- 「バグ報告フォームを作って」
- 「お問い合わせフォームを追加して」

---

## 機能

- フィードバックフォーム
- バグ報告
- 機能リクエスト
- 満足度調査

---

## 実行フロー

1. 制約セットの適用条件を確認
2. プロジェクト構成を確認
3. フィードバックの種類を選択
4. フォームUIを作成
5. APIエンドポイントを作成
6. データ保存先を設定

```