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 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, 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, positioning)
スペーシングシステム (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

ベストプラクティス

コンポーネント構成: シンプルで構成可能なプリミティブから複雑な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>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

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

ドキュメント

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

リファレンス

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

コアスタック

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

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

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

クイックスタート

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

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

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

テーマとカスタマイズ

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

Tailwind ユーティリティ

レスポンシブデザイン

Tailwind カスタマイズ

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

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

shadcn_add.py

tailwind_config_gen.py

ベストプラクティス

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

共通パターン

リソース

Individual skills in this repo

ElKrapulito/calucha-landing

ElKrapulito/calucha-landing

ElKrapulito/calucha-landing

ElKrapulito/calucha-landing

ElKrapulito/calucha-landing

ElKrapulito/calucha-landing

関連スキル

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me

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