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フレームワーク
ランタイムオーバーヘッドゼロのビルド時処理
モバイルファーストのレスポンシブデザイン
一貫したデザイントークン（色、スペーシング、タイポグラフィ）
自動デッドコード除去

ビジュアルデザイン層: キャンバス

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

スクリプトパス

このスキルとその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">アナリティクス</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-muted-foreground">メトリクスを表示</p>
          <Button variant="default" className="w-full">
            詳細を見る
          </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, Form検証)
レイアウトとナビゲーション (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

ベストプラクティス

コンポーネント構成: シンプルでコンポーザブルなプリミティブから複雑なUIを構築する
ユーティリティファーストスタイリング: Tailwindクラスを直接使用し、本当に繰り返しがある場合のみコンポーネントを抽出する
モバイルファーストレスポンシブ: モバイルスタイルから始め、レスポンシブバリアントをレイヤリングする
アクセシビリティファースト: Radix UIプリミティブを活用し、フォーカス状態を追加し、セマンティックHTMLを使用する
デザイントークン: 一貫したスペーシングスケール、カラーパレット、タイポグラフィシステムを使用する
ダークモードの一貫性: すべてのテーマ要素にダークバリアントを適用する
パフォーマンス: 自動CSSパージを活用し、動的なクラス名を避ける
TypeScript: 優れたDXのために完全な型安全性を使用する
視覚的階層: 構成が注意を誘導するようにし、スペーシングと色を意図的に使用する
専門的な職人技: すべての細部が重要 - 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>メールアドレス</FormLabel>
            <FormControl>
              <Input type="email" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )} />
        <Button type="submit" className="w-full">サインイン</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">
            コンテンツ
          </h3>
        </CardContent>
      </Card>
    </div>
  </div>
</div>

リソース

shadcn/ui Docs: https://ui.shadcn.com
Tailwind CSS Docs: https://tailwindcss.com
Radix UI: https://radix-ui.com
Tailwind UI: https://tailwindui.com
Headless UI: https://headlessui.com
v0 (AI UI Generator): https://v0.dev

お気に入りのAIに質問する

ドキュメント

UIスタイリングスキル は何をしますか？

参考

このスキルを使用するタイミング

コアスタック

コンポーネント層: shadcn/ui

スタイリング層: Tailwind CSS

ビジュアルデザイン層: キャンバス

スクリプトパス

クイックスタート

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

代替: Tailwindのみのセットアップ

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

テーマとカスタマイズ

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

Tailwindユーティリティ

レスポンシブデザイン

Tailwindカスタマイズ

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

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

shadcn_add.py

tailwind_config_gen.py

ベストプラクティス

参照ナビゲーション

共通パターン

リソース

Individual skills in this repo

banner-design

brand

design

design-system

nextlevelbuilder/ui-ux-pro-max

slides

ui-ux-pro-max

関連スキル

steipete/bluebubbles

steipete/eightctl

steipete/blucli

steipete/bear-notes

steipete/camsnap

steipete/gifgrep

UIスタイリングスキルは何をしますか？