ui
Generates UI components and feedback forms. Use when user mentions コンポーネント, component, UI, ヒーロー, hero, フォーム, form, フィードバック, feedback, 問い合わせ. Do NOT load for: 認証機能, バックエンド実装, データベース操作, ビジネスロジック.
Best use case
ui is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Generates UI components and feedback forms. Use when user mentions コンポーネント, component, UI, ヒーロー, hero, フォーム, form, フィードバック, feedback, 問い合わせ. Do NOT load for: 認証機能, バックエンド実装, データベース操作, ビジネスロジック.
Teams using ui should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/ui/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How ui Compares
| Feature / Agent | ui | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Generates UI components and feedback forms. Use when user mentions コンポーネント, component, UI, ヒーロー, hero, フォーム, form, フィードバック, feedback, 問い合わせ. Do NOT load for: 認証機能, バックエンド実装, データベース操作, ビジネスロジック.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# UI Skills UIコンポーネントとフォームの生成を担当するスキル群です。 ## 含まれる小スキル | スキル | 用途 | |--------|------| | component | UIコンポーネント生成 | | feedback | フィードバックフォーム生成 | ## ルーティング - コンポーネント生成: component/doc.md - フィードバックフォーム: feedback/doc.md ## 実行手順 1. **品質判定ゲート**（Step 0） 2. ユーザーのリクエストを分類 3. 適切な小スキルの doc.md を読む 4. その内容に従って生成 ### 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. **色だけで判断させない** - 赤=エラー だけでなく、アイコン+テキストも ```
Related Skills
keyboard-navigation-tester
Keyboard Navigation Tester - Auto-activating skill for Frontend Development. Triggers on: keyboard navigation tester, keyboard navigation tester Part of the Frontend Development skill category.
key-rotation-manager
Key Rotation Manager - Auto-activating skill for Security Advanced. Triggers on: key rotation manager, key rotation manager Part of the Security Advanced skill category.
kafka-stream-processor
Kafka Stream Processor - Auto-activating skill for Data Pipelines. Triggers on: kafka stream processor, kafka stream processor Part of the Data Pipelines skill category.
kafka-producer-consumer
Kafka Producer Consumer - Auto-activating skill for Backend Development. Triggers on: kafka producer consumer, kafka producer consumer Part of the Backend Development skill category.
k6-script-generator
K6 Script Generator - Auto-activating skill for Performance Testing. Triggers on: k6 script generator, k6 script generator Part of the Performance Testing skill category.
jwt-token-validator
Jwt Token Validator - Auto-activating skill for Security Fundamentals. Triggers on: jwt token validator, jwt token validator Part of the Security Fundamentals skill category.
json-config-manager
Json Config Manager - Auto-activating skill for DevOps Basics. Triggers on: json config manager, json config manager Part of the DevOps Basics skill category.
jsdoc-comment-generator
Jsdoc Comment Generator - Auto-activating skill for Technical Documentation. Triggers on: jsdoc comment generator, jsdoc comment generator Part of the Technical Documentation skill category.
jobs-to-be-done
Analyze what customers truly need by discovering the "job" they hire your product to do. Use when the user mentions "customer discovery", "why customers churn", "what job does this solve", "competing against luck", or "product-market fit". Covers JTBD interviews, competition analysis, and jobs-oriented roadmaps. For product positioning, see obviously-awesome. For rapid validation, see design-sprint. Trigger with 'jobs', 'to', 'be'.
jmeter-test-plan-creator
Jmeter Test Plan Creator - Auto-activating skill for Performance Testing. Triggers on: jmeter test plan creator, jmeter test plan creator Part of the Performance Testing skill category.
jira-workflow-creator
Jira Workflow Creator - Auto-activating skill for Enterprise Workflows. Triggers on: jira workflow creator, jira workflow creator Part of the Enterprise Workflows skill category.
jira-ticket-generator
Jira Ticket Generator - Auto-activating skill for Enterprise Workflows. Triggers on: jira ticket generator, jira ticket generator Part of the Enterprise Workflows skill category.