ui-styling

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

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

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

スクリプトのパス

このスキルおよびその references/ 内のスクリプトパスは、プロジェクトではなく、この SKILL.md を含むディレクトリを基準とします。scripts/<file> はこのスキル独自の scripts/ フォルダーを指し、../<skill>/scripts/<file> は一緒にインストールされた兄弟サブスキルのフォルダーを指します。そのディレクトリを基準にフルパスを作成してください（Claude Code はスキルの読み込み時に、そのパスをスキルのベースディレクトリとして表示します）。また、作業ディレクトリはプロジェクトのルートにしてください。スクリプトは docs/brand-guidelines.md、assets/design-tokens.json、src/ などのプロジェクトファイルを、プロジェクトルートからの相対パスで読み書きします。

クイックスタート

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

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、配置）
• スペーシングシステム（パディング、マージン、間隔）
• タイポグラフィ（フォントサイズ、太さ、配置、行の高さ）
• 色と背景
• ボーダーとシャドウ
• カスタムスタイル用の任意の値

レスポンシブデザイン

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

参照先：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

同じディレクトリ内にtailwind.config.js、.cjs、.mjs、.tsのいずれかのファイルがすでに存在する場合、ジェネレーターは設定ファイルの作成や置き換えを行いません。まず報告された設定を確認し、競合する出力が意図したものである場合にのみ--forceを渡してください：

python scripts/tailwind_config_gen.py --colors brand:blue --force

ベストプラクティス

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