ui-components

Name: ui-components
Author: yonatangross

github.com/yonatangrossデザイン・UI2991.5k 回インストール今日更新

ui-components について

shadcn/ui と Radix を使って UI コンポーネントライブラリを構築する開発者向けのスキルです。デザインシステム、アクセシビリティ、フォーム、CSS、UX のルールを必要に応じて参照でき、独自の規約と上流ドキュメントを分けています。

主な機能

01shadcn/ui v4 のスタイル指針
02デザイントークンとタイポグラフィ規則
03コンポーネント設計とアクセシビリティ
04React Hook Form と Zod のパターン
05Tailwind v4 と Storybook の指針
06UX の階層と空状態の原則

活用シーン

01デザイントークンと間隔の規約策定
02アクセシブルなコンポーネントと状態の設計
03Zod 検証付き React フォームの構築
04階層、タイポグラフィ、空状態の確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/yonatangross/orchestkit --skill ui-components

インストール後、Claude Code で/ui-componentsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

metadata.json

test-cases.json

references/

ork-delta.md

rules/

_sections.md

design-system-components.md

color-system.md

css-cascade-layers.md

design-system-spacing.md

_template.md

design-system-states.md

typography-thresholds.md

empty-states.md

design-system-typography.md

forms-validation-zod.md

forms-react-hook-form.md

tailwind-v4-patterns.md

design-system-tokens.md

storybook-component-docs.md

visual-hierarchy.md

shadcn-v4-styles.md

scripts/

composed-trigger.tsx

custom-dialog.tsx

custom-dropdown.tsx

cva-component.tsx

extended-button.tsx

custom-theme.css

詳細

UI コンポーネント

shadcn/ui と Radix Primitives を使用してアクセシブルな UI コンポーネントライブラリを構築するためのパターンです。ファーストパーティのドキュメントを薄く補完するもので、クイックスタートのレシピ、重要な判断、アンチパターン、独自の差分を扱います。ベンダー固有の仕組み（CVA バリアント、cn() ユーティリティ、コンポーネントの拡張、asChild による合成、ダイアログ／メニューのパターン、データ属性によるスタイリング）は上流ドキュメントの範囲です。上流のカバレッジ（再記載しない）を参照してください。残りの各カテゴリには個別のルールファイルがあり、rules/ から必要に応じて読み込まれます。

クイックリファレンス

カテゴリ	ルール	影響度	使用する場面
shadcn/ui	1	HIGH	v4 のスタイル、プリセットコード、スタイル検出
デザインシステム	4	HIGH	W3C トークン、OKLCH テーマ設定、スペーシングスケール、タイポグラフィ、コンポーネントの状態、アニメーション
デザインシステムコンポーネント	1	HIGH	アトミックデザイン、CVA バリアント、アクセシビリティ、Storybook
フォーム	2	HIGH	React Hook Form v7、Zod バリデーション、Server Actions
モダン CSS とツール	3	HIGH	CSS カスケードレイヤー、Tailwind v4、Storybook CSF3
UX の基礎	4	HIGH	視覚的階層、タイポグラフィのしきい値、カラーシステム、空の状態

6 カテゴリにわたる合計 15 個のルールです。 Radix プリミティブの仕組みと shadcn のカスタマイズチュートリアルは、ファーストパーティのドキュメントで扱われています。上流のカバレッジ（再記載しない）と、独自に扱う範囲についてはreferences/ork-delta.mdを参照してください。

クイックスタート

// CVA variant system with cn() utility
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md font-medium transition-colors',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive: 'bg-destructive text-destructive-foreground',
        outline: 'border border-input bg-background hover:bg-accent',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
      },
      size: {
        default: 'h-10 px-4 py-2',
        sm: 'h-9 px-3',
        lg: 'h-11 px-8',
      },
    },
    defaultVariants: { variant: 'default', size: 'default' },
  }
)

// Radix Dialog with asChild composition
import { Dialog } from 'radix-ui'

<Dialog.Root>
  <Dialog.Trigger asChild>
    <Button>Open</Button>
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay className="fixed inset-0 bg-black/50" />
    <Dialog.Content className="data-[state=open]:animate-in">
      <Dialog.Title>Title</Dialog.Title>
      <Dialog.Description>Description</Dialog.Description>
      <Dialog.Close>Close</Dialog.Close>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

shadcn/ui

CVA バリアント、cn() ユーティリティ、OKLCH テーマ設定を基盤とした、美しくデザインされたアクセシブルなコンポーネントです。

ルール	ファイル	主なパターン
v4 スタイル	`rules/shadcn-v4-styles.md`	6 種類のスタイル（Vega→Luma）、プリセットコード、スタイル検出、クラスのマッピング

カスタマイズ、フォーム、データテーブルの解説は現在、上流ドキュメントの範囲です。上流のカバレッジ（再記載しない）を参照してください。これらに加える独自の規約は、references/ork-delta.mdに記載されています。

v4 スタイルシステム

shadcn CLI v4 には、6 種類のビジュアルスタイルが用意されています。それぞれコンポーネントのクラス名を書き換えます。CSS 変数だけを変更するわけではありません。

スタイル	特徴	最適な用途
Vega	バランスの取れた角丸、すっきりした線	汎用（New York の後継）
Nova	コンパクトなパディング、抑えたマージン	情報量の多いダッシュボード、管理パネル
Maia	柔らかく丸みがあり、ゆとりのあるスペーシング	コンシューマー向け、親しみやすいアプリ
Lyra	シャープで角丸なし、等幅フォントの組み合わせ	エディトリアル、開発者向けツール
Mira	超コンパクトで、装飾を最小限に抑えたデザイン	スプレッドシート、データ量の多いインターフェース
Luma	極端な角丸（`rounded-4xl`）、柔らかな浮き上がり（`shadow-md` + ring）、ゆとりのあるレイアウト	洗練されたネイティブアプリの使用感、macOS Tahoe に着想を得たデザイン

ui.shadcn.com/createで見た目を設定し、スタイル、テーマ、フォント、アイコンを選んで、生成されたコマンドをコピーしてください。ドキュメントにプリセットコードをハードコードしないでください。これらのコードは特定のスタイルのスナップショットに紐づいており、内容が変わる可能性があります。

shadcn CLI v4（2026 年 4 月）— 新しいコマンド

コマンド	目的
`npx shadcn@latest apply <style>`	公開済みのスタイル（例：`luma`、`nova`、`lyra`）を現在のプロジェクトに適用します。コンポーネントを追加し直さずに、既存コンポーネントの外観を変更できます
`npx shadcn@latest info`	解決済みの設定（レジストリ、スタイル、トークン、存在するコンポーネント、Tailwind のバージョン）を表示します
`npx shadcn@latest skills`	`shadcn/skills` レジストリを一覧表示します。Claude Code と Cursor に対応したスキルパックには、CLI コマンドとエージェント向けガイダンスが含まれています
`npx shadcn@latest build`	カスタムレジストリをビルドします（既にドキュメント化済み）。`apply` と組み合わせて、プライベートなスタイルを提供できます

検出方法： components.json の "style" フィールドを読み取ります（例："radix-luma"、"base-nova"）。古い "new-york" と "default" のスタイルは Vega に置き換えられています。

重要な決定事項

決定事項	推奨事項
色形式	知覚的に均一なテーマ設定には OKLCH を使用します
クラスのマージ	Tailwind の競合には常に cn() を使用します
コンポーネントの拡張	ソースファイルを変更せず、ラップします
バリアント	型安全な多軸バリアントには CVA を使用します
スタイリング方法	データ属性と Tailwind の任意バリアントを使用します
コンポジション	ラッパーの div を避けるには `asChild` を使用します
アニメーション	data-state セレクターを使用した CSS のみの方法を採用します
フォームコンポーネント	react-hook-form と組み合わせます
破壊的操作の確認	AlertDialog を使用し、通常の Dialog は使用しません（references/ork-delta.md を参照）

アンチパターン（禁止）

shadcn ソースの変更：生成されたファイルを編集するのではなく、ラップして拡張します
cn() の省略：文字列を直接連結すると Tailwind のクラスが競合します
CVA よりインラインスタイルを優先：型安全で再利用可能なバリアントには CVA を使用します
ラッパーの div：余分な DOM 要素を避けるには asChild を使用します
Dialog.Title の欠落：すべてのダイアログにアクセシブルなタイトルが必要です
正の tabindex：tabindex > 0 を使用すると、自然なタブ順序が乱れます
色だけで状態を表現：データ属性と複数のインジケーターを使用します
フォーカスの手動管理：Radix 組み込みのフォーカストラップを使用します

上流ドキュメントのカバー範囲（再記載しないでください）

以下のトピックは、一次情報のソースが管理するため、2026-07-31 にこのスキルから削除されました。セッションでは該当ソースを参照し、ここには最低基準、失敗から得た教訓、プロジェクト固有の決定事項のみを残してください（これらは references/ork-delta.md に記載されています）。

トピック	一次情報のソース
shadcn のセットアップ、初期化チェックリスト、コンポーネントの追加	vercel:shadcn（マーケットプレイススキル）、https://ui.shadcn.com/docs/installation
shadcn のカスタマイズ、CVA バリアント、cn() ユーティリティ、コンポーネントの拡張	vercel:shadcn（マーケットプレイススキル）、https://ui.shadcn.com/docs および https://cva.style/docs
OKLCH のテーマ変数、ライト／ダーク CSS 変数セット	https://ui.shadcn.com/docs/theming
next-themes によるダークモードの切り替え	https://ui.shadcn.com/docs/dark-mode および https://github.com/pacocoursey/next-themes
TanStack Table を使用したデータテーブル	https://ui.shadcn.com/docs/components/data-table および https://tanstack.com/table
フォームフィールドのラッパーと検証状態	https://ui.shadcn.com/docs/components/form
Radix Dialog と AlertDialog のパターン	https://www.radix-ui.com/primitives/docs/components/dialog および .../components/alert-dialog
Radix asChild / Slot のコンポジション	https://www.radix-ui.com/primitives/docs/guides/composition
Radix のデータ属性によるスタイリングとフォーカス管理	https://www.radix-ui.com/primitives/docs/guides/styling
ドロップダウンメニュー、ポップオーバー、ツールチップ、ホバーカード	https://www.radix-ui.com/primitives/docs/components/dropdown-menu（および同種コンポーネントの各ページ）
Radix のアクセシビリティ監査チェックリスト	https://www.radix-ui.com/primitives/docs/overview/accessibility および `ork:accessibility`

詳細ドキュメント

リソース	説明
scripts/	テンプレート：CVA コンポーネント、拡張ボタン、ダイアログ、ドロップダウン、テーマ CSS
references/ork-delta.md	上流ドキュメントに含まれない Ork の最低基準、失敗から得た教訓、プロジェクト固有の決定事項

デザインシステム

デザイントークンのアーキテクチャ、スペーシング、タイポグラフィ、インタラクティブなコンポーネントの状態。

ルール	ファイル	主要なパターン
トークンアーキテクチャ	`rules/design-system-tokens.md`	W3C トークン、OKLCH カラー、Tailwind @theme
スペーシングスケール	`rules/design-system-spacing.md`	8px グリッド、Tailwind space-1 から space-12
タイポグラフィスケール	`rules/design-system-typography.md`	フォントサイズ、ウェイト、行の高さ
コンポーネントの状態	`rules/design-system-states.md`	ホバー、フォーカス、アクティブ、無効、読み込み中、アニメーションプリセット

デザインシステムのコンポーネント

アトミックデザインとアクセシビリティを用いたコンポーネントアーキテクチャのパターンです。

ルール	ファイル	主なパターン
コンポーネントアーキテクチャ	`rules/design-system-components.md`	アトミックデザイン、CVA のバリアント、WCAG 2.1 AA、Storybook

フォーム

Zod によるバリデーションと React 19 の Server Actions を組み合わせた React Hook Form v7 です。

ルール	ファイル	主なパターン
React Hook Form	`rules/forms-react-hook-form.md`	useForm、フィールド配列、Controller、ウィザード、ファイルアップロード
Zod と Server Actions	`rules/forms-validation-zod.md`	Zod スキーマ、Server Actions、useActionState、非同期バリデーション

モダン CSS とツール

2026 年に向けたモダン CSS のパターン、Tailwind v4、コンポーネントドキュメント作成ツールです。

ルール	ファイル	主なパターン
CSS カスケードレイヤー	`rules/css-cascade-layers.md`	@layer の順序、詳細度に依存しないオーバーライド、サードパーティの分離
Tailwind v4	`rules/tailwind-v4-patterns.md`	CSS ファーストの @theme、ネイティブのコンテナークエリ、@max-* バリアント
Storybook ドキュメント	`rules/storybook-component-docs.md`	CSF3 ストーリー、play() によるインタラクションテスト、Chromatic のビジュアルリグレッション

UX の基礎

認知科学に基づく UI/UX の原則と、本番品質のインターフェースに向けた具体的な数値しきい値です。

ルール	ファイル	主なパターン
視覚的階層	`rules/visual-hierarchy.md`	ボタンの階層、強調の抑制、F/Z 型の視線走査、フォン・レストルフ効果、近接、最大幅
タイポグラフィのしきい値	`rules/typography-thresholds.md`	65ch の行長、1.4–1.6 の行高、rem 単位、モジュラー型スケール
カラーシステム	`rules/color-system.md`	OKLCH の 9 段階スケール、セマンティックなカテゴリ、純粋な黒を避ける、ブランド色を帯びたニュートラルカラー
空の状態	`rules/empty-states.md`	スケルトンを優先、アイコン + 見出し + 説明 + CTA、原因に応じたトーン

基本情報

作者: yonatangross
リポジトリ: yonatangross/orchestkit
カテゴリ: デザイン・UI
インストール数: 1,515
GitHub スター: 299

問題を報告