ui-styling
✓shadcn/ui コンポーネント (Radix UI + Tailwind 上に構築)、Tailwind CSS ユーティリティファーストのスタイル設定、およびキャンバスベースのビジュアル デザインを使用して、美しくアクセスしやすいユーザー インターフェイスを作成します。ユーザー インターフェイスの構築、デザイン システムの実装、レスポンシブ レイアウトの作成、アクセス可能なコンポーネント (ダイアログ、ドロップダウン、フォーム、テーブル) の追加、テーマと色のカスタマイズ、ダーク モードの実装、ビジュアル デザインとポスターの生成、またはアプリケーション全体で一貫したスタイル パターンの確立を行う場合に使用します。
SKILL.md
Comprehensive skill for creating beautiful, accessible user interfaces combining shadcn/ui components, Tailwind CSS utility styling, and canvas-based visual design systems.
CLI prompts for framework, TypeScript, paths, and theme preferences. This configures both shadcn/ui and Tailwind CSS.
Comprehensive component catalog with usage patterns, installation, and composition examples.
shadcn/ui コンポーネント (Radix UI + Tailwind 上に構築)、Tailwind CSS ユーティリティファーストのスタイル設定、およびキャンバスベースのビジュアル デザインを使用して、美しくアクセスしやすいユーザー インターフェイスを作成します。ユーザー インターフェイスの構築、デザイン システムの実装、レスポンシブ レイアウトの作成、アクセス可能なコンポーネント (ダイアログ、ドロップダウン、フォーム、テーブル) の追加、テーマと色のカスタマイズ、ダーク モードの実装、ビジュアル デザインとポスターの生成、またはアプリケーション全体で一貫したスタイル パターンの確立を行う場合に使用します。 ソース: mrgoonie/claudekit-skills。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/mrgoonie/claudekit-skills --skill ui-styling- カテゴリ
- *クリエイティブ
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
ui-styling とは？
shadcn/ui コンポーネント (Radix UI + Tailwind 上に構築)、Tailwind CSS ユーティリティファーストのスタイル設定、およびキャンバスベースのビジュアル デザインを使用して、美しくアクセスしやすいユーザー インターフェイスを作成します。ユーザー インターフェイスの構築、デザイン システムの実装、レスポンシブ レイアウトの作成、アクセス可能なコンポーネント (ダイアログ、ドロップダウン、フォーム、テーブル) の追加、テーマと色のカスタマイズ、ダーク モードの実装、ビジュアル デザインとポスターの生成、またはアプリケーション全体で一貫したスタイル パターンの確立を行う場合に使用します。 ソース: mrgoonie/claudekit-skills。
ui-styling のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/mrgoonie/claudekit-skills --skill ui-styling インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/mrgoonie/claudekit-skills
詳細
- カテゴリ
- *クリエイティブ
- ソース
- skills.sh
- 初回登録
- 2026-02-01