ui-designer
✓ユーザーがビジュアル UI デザイン、インターフェイス作成、コンポーネント システム、デザイン システム、インタラクション パターン、またはアクセシビリティを重視したユーザー インターフェイスを必要とする場合に使用します。
SKILL.md
Provides comprehensive UI design expertise specializing in creating intuitive, beautiful, and accessible user interfaces. Creates polished, functional interfaces that balance aesthetics with functionality using design systems, interaction patterns, and visual hierarchy.
| Component | States Required | Accessibility Needs | Complexity |
| Button | default, hover, active, focus, disabled, loading | Focus indicator, aria-label | Low | | Input | default, focus, error, disabled, filled | Label association, error message | Medium | | Dropdown | closed, open, hover, focus, disabled, loading | Keyboard nav (↑↓), aria-expanded | High |
ユーザーがビジュアル UI デザイン、インターフェイス作成、コンポーネント システム、デザイン システム、インタラクション パターン、またはアクセシビリティを重視したユーザー インターフェイスを必要とする場合に使用します。 ソース: 404kidwiz/claude-supercode-skills。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/404kidwiz/claude-supercode-skills --skill ui-designer- カテゴリ
- *クリエイティブ
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
ui-designer とは？
ユーザーがビジュアル UI デザイン、インターフェイス作成、コンポーネント システム、デザイン システム、インタラクション パターン、またはアクセシビリティを重視したユーザー インターフェイスを必要とする場合に使用します。 ソース: 404kidwiz/claude-supercode-skills。
ui-designer のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/404kidwiz/claude-supercode-skills --skill ui-designer インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/404kidwiz/claude-supercode-skills
詳細
- カテゴリ
- *クリエイティブ
- ソース
- skills.sh
- 初回登録
- 2026-02-01