OpenAIデザイン・クリエイティブ⭐ リポ 1品質スコア 73/100

ui-styling

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

description の原文を見る

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

SKILL.md 本文

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 grid gap-6 p-6 md:grid-cols-2 lg:grid-cols-3">
      <Card className="transition-shadow hover:shadow-lg">
        <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

ベストプラクティス

コンポーネント合成: シンプルで合成可能なプリミティブから複雑な 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 gap-6 md:grid-cols-2 lg:grid-cols-3">
      <Card className="border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
        <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

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者: chef0111
リポジトリ: chef0111/physthink
ライセンス: MIT
最終更新: 2026/4/24

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/chef0111/physthink / ライセンス: MIT

SKILL.md 本文

UI スタイリング スキル

リファレンス

このスキルを使用する場面

コアスタック

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

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

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

クイックスタート

コンポーネント + スタイリング設定

代替: Tailwind のみの設定

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

テーマ & カスタマイズ

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

Tailwind ユーティリティ

レスポンシブデザイン

Tailwind カスタマイズ

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

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

shadcn_add.py

tailwind_config_gen.py

ベストプラクティス

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

一般的なパターン

リソース

詳細情報

UI スタイリングスキル