ui-styling

UI スタイリングスキル

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

リファレンス

• 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 フレームワーク
• 実行時のオーバーヘッドがゼロのビルド時処理
• モバイルファーストのレスポンシブデザイン
• 一貫性のあるデザイントークン（色、間隔、タイポグラフィ）
• 未使用コードの自動削除

ビジュアルデザインレイヤー：Canvas

• 美術館品質のビジュアル構成
• 哲学に基づいたデザインアプローチ
• 洗練されたビジュアルコミュニケーション
• テキストは最小限に、視覚的なインパクトは最大限に
• 体系的なパターンと洗練された美しさ

クイックスタート

コンポーネントとスタイリングのセットアップ

Tailwind とともに shadcn/ui をインストールする：

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 p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      <Card className="hover:shadow-lg transition-shadow">
        <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、位置指定）
• 間隔システム（padding、margin、gap）
• タイポグラフィ（フォントサイズ、太さ、配置、行の高さ）
• 色と背景
• 境界線とシャドウ
• カスタムスタイリング用の任意の値

レスポンシブデザイン

モバイルファーストのブレークポイント、レスポンシブユーティリティ、適応型レイアウトについて説明します。

参照：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 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
        <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