UI スタイリング スキル

shadcn/ui コンポーネント、Tailwind CSS ユーティリティスタイリング、キャンバスベースのビジュアルデザインシステムを組み合わせた、美しくアクセシブルなユーザーインターフェースを作成するための包括的なスキルです。

リファレンス

• shadcn/ui: https://ui.shadcn.com/llms.txt
• Tailwind CSS: https://tailwindcss.com/docs

このスキルを使用する場面

以下の場合に使用します:

• React ベースのフレームワーク (Next.js、Vite、Remix、Astro) で UI を構築する
• アクセシブルなコンポーネント (ダイアログ、フォーム、テーブル、ナビゲーション) を実装する
• ユーティリティファースト CSS アプローチでスタイリングする
• レスポンシブでモバイルファーストなレイアウトを作成する
• ダークモードとテーマカスタマイズを実装する
• 一貫したトークンを備えたデザインシステムを構築する
• ビジュアルデザイン、ポスター、ブランド資料を生成する
• 即座のビジュアルフィードバックで迅速にプロトタイプを作成する
• 複雑な UI パターン (データテーブル、チャート、コマンドパレット) を追加する

コアスタック

コンポーネントレイヤー: shadcn/ui

• Radix UI プリミティブ経由の事前構築されたアクセシブルコンポーネント
• コピー&ペースト配布モデル (コンポーネントはコードベースに存在)
• TypeScript ファースト完全な型安全性
• 複雑な UI のための合成可能なプリミティブ
• CLI ベースのインストールと管理

スタイリングレイヤー: Tailwind CSS

• ユーティリティファースト CSS フレームワーク
• ビルド時処理でゼロ実行時オーバーヘッド
• モバイルファースト レスポンシブデザイン
• 一貫したデザイントークン (色、スペーシング、タイポグラフィ)
• 自動的なデッドコード排除

ビジュアルデザインレイヤー: キャンバス

• 美術館品質のビジュアルコンポジション
• 哲学駆動のデザインアプローチ
• 高度なビジュアルコミュニケーション
• 最小限のテキスト、最大のビジュアルインパクト
• システマティックなパターンと洗練された美学

クイックスタート

コンポーネント + スタイリング設定

shadcn/ui を Tailwind でインストール:

npx shadcn@latest init

CLI がフレームワーク、TypeScript、パス、テーマの設定をプロンプトします。これにより shadcn/ui と Tailwind CSS の両方が設定されます。

コンポーネントを追加:

npx shadcn@latest add button card dialog form

ユーティリティスタイリングでコンポーネントを使用:

import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';

export function Dashboard() {
  return (
    <div className="container mx-auto grid gap-6 p-6 md:grid-cols-2 lg:grid-cols-3">
      <Card className="transition-shadow hover:shadow-lg">
        <CardHeader>
          <CardTitle className="text-2xl font-bold">Analytics</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-muted-foreground">View your metrics</p>
          <Button variant="default" className="w-full">
            View Details
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}

代替: Tailwind のみの設定

Vite プロジェクト:

npm install -D tailwindcss @tailwindcss/vite

// vite.config.ts
import tailwindcss from '@tailwindcss/vite';
export default { plugins: [tailwindcss()] };

/* src/index.css */
@import 'tailwindcss';

コンポーネントライブラリガイド

使用パターン、インストール、合成例を含む包括的なコンポーネントカタログ。

参照: references/shadcn-components.md

以下をカバーします:

• フォーム & 入力コンポーネント (Button、Input、Select、Checkbox、Date Picker、フォーム検証)
• レイアウト & ナビゲーション (Card、Tabs、Accordion、Navigation Menu)
• オーバーレイ & ダイアログ (Dialog、Drawer、Popover、Toast、Command)
• フィードバック & ステータス (Alert、Progress、Skeleton)
• 表示コンポーネント (Table、Data Table、Avatar、Badge)

テーマ & カスタマイズ

テーマ設定、CSS 変数、ダークモード実装、コンポーネントカスタマイズ。

参照: references/shadcn-theming.md

以下をカバーします:

• next-themes でのダークモード設定
• CSS 変数システム
• 色のカスタマイズとパレット
• コンポーネントバリアントのカスタマイズ
• テーマトグル実装

アクセシビリティパターン

ARIA パターン、キーボードナビゲーション、スクリーンリーダーサポート、アクセシブルなコンポーネント使用。

参照: references/shadcn-accessibility.md

以下をカバーします:

• Radix UI アクセシビリティ機能
• キーボードナビゲーションパターン
• フォーカス管理
• スクリーンリーダーアナウンスメント
• フォーム検証アクセシビリティ

Tailwind ユーティリティ

レイアウト、スペーシング、タイポグラフィ、色、ボーダー、シャドウのコアユーティリティクラス。

参照: references/tailwind-utilities.md

以下をカバーします:

• レイアウトユーティリティ (Flexbox、Grid、ポジショニング)
• スペーシングシステム (パディング、マージン、ギャップ)
• タイポグラフィ (フォントサイズ、ウェイト、アラインメント、行の高さ)
• 色と背景
• ボーダーとシャドウ
• カスタムスタイリングの任意の値

レスポンシブデザイン

モバイルファースト ブレークポイント、レスポンシブユーティリティ、アダプティブレイアウト。

参照: references/tailwind-responsive.md

以下をカバーします:

• モバイルファースト アプローチ
• ブレークポイントシステム (sm、md、lg、xl、2xl)
• レスポンシブユーティリティパターン
• コンテナクエリ
• 最大幅クエリ
• カスタムブレークポイント

Tailwind カスタマイズ

設定ファイル構造、カスタムユーティリティ、プラグイン、テーマ拡張。

参照: references/tailwind-customization.md

以下をカバーします:

• カスタムトークンの @theme ディレクティブ
• カスタム色とフォント
• スペーシングとブレークポイント拡張
• カスタムユーティリティ作成
• カスタムバリアント
• レイヤー組織 (@layer base、components、utilities)
• コンポーネント抽出の apply ディレクティブ

ビジュアルデザインシステム

キャンバスベースのデザイン哲学、ビジュアルコミュニケーション原則、高度なコンポジション。

参照: references/canvas-design-system.md

以下をカバーします:

• デザイン哲学アプローチ
• テキストより視覚的なコミュニケーション
• システマティックなパターンとコンポジション
• 色、形、空間設計
• 最小限のテキスト統合
• 美術館品質の実装
• マルチページデザインシステム

ユーティリティスクリプト

コンポーネントインストールと設定生成の Python オートメーション。

shadcn_add.py

依存関係処理を含む shadcn/ui コンポーネントを追加:

python scripts/shadcn_add.py button card dialog

tailwind_config_gen.py

カスタムテーマで tailwind.config.js を生成:

python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter

ベストプラクティス

1. コンポーネント合成: シンプルで合成可能なプリミティブから複雑な UI を構築する
2. ユーティリティファースト スタイリング: Tailwind クラスを直接使用; 真の繰り返しでのみコンポーネント抽出
3. モバイルファースト レスポンシブ: モバイルスタイルから始め、レスポンシブバリアントを重ねる
4. アクセシビリティファースト: Radix UI プリミティブを活用、フォーカス状態を追加、セマンティック HTML を使用
5. デザイントークン: 一貫したスペーシングスケール、カラーパレット、タイポグラフィシステムを使用
6. ダークモード一貫性: すべてのテーマ要素にダークバリアントを適用
7. パフォーマンス: 自動 CSS パージを活用、動的クラス名を回避
8. TypeScript: より良い DX のための完全な型安全性を使用
9. ビジュアルハイアラルキー: コンポジションで注目を導き、スペーシングと色を意図的に使用
10. エキスパート職人技: 細部まですべてが重要 - UI をクラフトとして扱う

リファレンスナビゲーション

コンポーネントライブラリ

• references/shadcn-components.md - コンポーネント完全カタログ
• references/shadcn-theming.md - テーマとカスタマイズ
• references/shadcn-accessibility.md - アクセシビリティパターン

スタイリングシステム

• references/tailwind-utilities.md - コアユーティリティクラス
• references/tailwind-responsive.md - レスポンシブデザイン
• references/tailwind-customization.md - 設定と拡張

ビジュアルデザイン

• references/canvas-design-system.md - デザイン哲学とキャンバスワークフロー

オートメーション

• scripts/shadcn_add.py - コンポーネントインストール
• scripts/tailwind_config_gen.py - 設定生成

一般的なパターン

検証付きフォーム:

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import {
  Form,
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
});

export function LoginForm() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { email: '', password: '' },
  });

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input type="email" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit" className="w-full">
          Sign In
        </Button>
      </form>
    </Form>
  );
}

ダークモード対応レスポンシブレイアウト:

<div className="min-h-screen bg-white dark:bg-gray-900">
  <div className="container mx-auto px-4 py-8">
    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
      <Card className="border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
        <CardContent className="p-6">
          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
            Content
          </h3>
        </CardContent>
      </Card>
    </div>
  </div>
</div>

リソース

• shadcn/ui ドキュメント: https://ui.shadcn.com
• Tailwind CSS ドキュメント: https://tailwindcss.com
• Radix UI: https://radix-ui.com
• Tailwind UI: https://tailwindui.com
• Headless UI: https://headlessui.com
• v0 (AI UI ジェネレータ): https://v0.dev