Communitygithub.com

UI スタイリング

shadcn/ui コンポーネント（Radix UI + Tailwind ベース）、Tailwind CSS のユーティリティファーストスタイリング、キャンバスベースのビジュアルデザインを用いて、美しくアクセシブルなユーザーインターフェースを作成します。UI 構築、デザインシステムの実装、レスポンシブレイアウトの作成、アクセシブルコンポーネント（ダイアログ、ドロップダウン、フォーム、テーブル）の追加、テーマと色のカスタマイズ、ダークモードの実装、ビジュアルデザインやポスターの生成、アプリケーション全体での一貫したスタイリングパターンの確立に使用します。

UI スタイリング とは？

このスキルは、shadcn/ui、Tailwind CSS、キャンバスベースのビジュアルデザインシステムを統合した、美しくアクセシブルなユーザーインターフェース（UI）作成のための総合的なスキルです。Reactベースのフレームワーク（Next.js、Vite、Remix、Astroなど）を標準サポートし、UIコンポーネントの構築、デザインシステムの実装、レスポンシブレイアウト、アクセシビリティ、テーマカスタマイズ（ダークモード含む）、ビジュアルデザイン制作などをカバーします。コンポーネントレイヤー（shadcn/ui / Radix UI）、スタイリングレイヤー（Tailwind CSS）、ビジュアルデザインレイヤー（キャンバス）の3層構造で、型安全なTypeScriptファーストの開発体験を提供します。フォーム、ダイアログ、ナビゲーション、データテーブル、チャート、コマンドパレットなどの複雑なUIパターンを迅速に実装でき、デザインシステムに基づいた一貫性のある美しいUIの開発を効率化します。

対応✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/alhurwitz/alberts-agentic-arsenal/tree/HEAD/skills/ui-styling
オリジナルを見る→すべてのスキルを見る

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

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

UI スタイリングスキル

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

リファレンス

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

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

  • 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、位置指定）
  • スペーシングシステム（パディング、マージン、ギャップ）
  • タイポグラフィ（フォントサイズ、ウェイト、配置、行間）
  • 色と背景
  • ボーダーとシャドウ
  • カスタムスタイリングのための任意の値

レスポンシブデザイン

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

参照: 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: より良い開発体験のために完全な型安全性を活用する
  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>

リソース

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

ui-demo

Record polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM videos with visible cursor, natural pacing, and professional feel.

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community