ui
Generates UI components and feedback forms. Use when user mentions コンポーネント, component, UI, ヒーロー, hero, フォーム, form, フィードバック, feedback, 問い合わせ. Do NOT load for: 認証機能, バックエンド実装, データベース操作, ビジネスロジック.
Installation
Details
Usage
After installing, this skill will be available to your AI coding assistant.
Verify installation:
skills listSkill Instructions
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コンポーネントとフォームの生成を担当するスキル群です。
制約の優先順位と適用条件
- 基本は
references/ui-skills.mdの制約を最優先で適用する。 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. **色だけで判断させない**
- 赤=エラー だけでなく、アイコン+テキストも
More by Chachamaru127
View allSets up deployment, analytics, and health monitoring for projects. Use when user mentions デプロイ, deploy, Vercel, Netlify, 公開, アナリティクス, analytics, GA, Google Analytics, 環境診断, health check. Do NOT load for: 実装作業, ローカル開発, レビュー, セットアップ.
Implements features and writes code based on Plans.md tasks. Use when user mentions 実装, implement, 機能追加, コードを書いて, 機能を作って, feature, coding, 新機能, implementing functions, classes, or features, 新しい関数. Do not use for review or build verification.
Initializes session with environment check and task status overview. Use when user mentions セッション開始, 作業開始, 状況確認, what should I work on, start session. Do NOT load for: 実装作業, レビュー, セッション途中の作業.
Configures 2-Agent workflow between PM and implementation roles. Use when user mentions 2-Agent, 2エージェント, PM連携設定, Cursor設定, Cursor連携, 2-agent運用. Do NOT load for: 単独運用, ワークフロー実行, ハンドオフ処理.