radix-ui-design-system

Radix UI デザインシステム

Radix UI プリミティブを使用して、完全なカスタマイズ制御とゼロスタイルオピニオンを備えた、本番環境対応のアクセシブルなデザインシステムを構築します。

詳細ガイド

このスキルを実行する前に、詳細ガイドをお読みください。完全な手順と参照資料が保持されています。その安全性、前提条件、検証要件を必須のものとして扱ってください。集中的な作業では関連するセクションを読み込み、エンドツーエンドの作業ではガイド全体をお読みください。

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

• ゼロからカスタムデザインシステムを作成する場合
• アクセシブルな UI コンポーネントライブラリを構築する場合
• 複雑なインタラクティブコンポーネント（Dialog、Dropdown、Tabs など）を実装する場合
• スタイル付きコンポーネントライブラリからスタイルなしプリミティブへ移行する場合
• CSS 変数または Tailwind でテーマシステムをセットアップする場合
• コンポーネントの動作とスタイリングを完全に制御する必要がある場合
• WCAG 2.1 AA/AAA 準拠が求められるアプリケーションを構築する場合

このスキルを使用しない場合

• すぐに使えるスタイル付きコンポーネントが必要な場合（shadcn/ui、Mantine などを使用してください）
• インタラクティブ性のないシンプルな静的ページを構築する場合
• プロジェクトが React 16.8+ を使用していない場合（Radix にはフックが必要です）
• React 以外のフレームワーク向けのコンポーネントが必要な場合

---

実世界の例

例 1: コマンドパレット（コンボダイアログ）

import { useState, useEffect } from 'react';
import * as Dialog from '@radix-ui/react-dialog';
import { Command } from 'cmdk';

export function CommandPalette() {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setOpen((open) => !open);
      }
    };
    document.addEventListener('keydown', down);
    return () => document.removeEventListener('keydown', down);
  }, []);

  return (
    <Dialog.Root open={open} onOpenChange={setOpen}>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/50" />
        <Dialog.Content className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
          <Dialog.Title>Commands</Dialog.Title>
          <Dialog.Description>Search available actions.</Dialog.Description>
          <Command>
            <Command.Input placeholder="Type a command..." />
            <Command.List>
              <Command.Empty>No results found.</Command.Empty>
              <Command.Group heading="Suggestions">
                <Command.Item>Calendar</Command.Item>
                <Command.Item>Search Emoji</Command.Item>
              </Command.Group>
            </Command.List>
          </Command>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

例 2: アイコン付きドロップダウンメニュー

import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { DotsHorizontalIcon } from '@radix-ui/react-icons';

export function ActionsMenu() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger asChild>
        <button className="icon-button" aria-label="Actions">
          <DotsHorizontalIcon />
        </button>
      </DropdownMenu.Trigger>

      <DropdownMenu.Portal>
        <DropdownMenu.Content className="dropdown-content" align="end">
          <DropdownMenu.Item className="dropdown-item">
            Edit
          </DropdownMenu.Item>
          <DropdownMenu.Item className="dropdown-item">
            Duplicate
          </DropdownMenu.Item>
          <DropdownMenu.Separator className="dropdown-separator" />
          <DropdownMenu.Item className="dropdown-item text-red-500">
            Delete
          </DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
}

例 3: Radix Select + React Hook Form を使用したフォーム

import * as Select from '@radix-ui/react-select';
import { useForm, Controller } from 'react-hook-form';

interface FormData {
  country: string;
}

export function CountryForm() {
  const { control, handleSubmit } = useForm<FormData>();

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <Controller
        name="country"
        control={control}
        render={({ field }) => (
          <Select.Root onValueChange={field.onChange} value={field.value}>
            <Select.Trigger ref={field.ref} onBlur={field.onBlur} aria-label="Country" className="select-trigger">
              <Select.Value placeholder="Select a country" />
              <Select.Icon />
            </Select.Trigger>
            
            <Select.Portal>
              <Select.Content className="select-content">
                <Select.Viewport>
                  <Select.Item value="us"><Select.ItemText>United States</Select.ItemText></Select.Item>
                  <Select.Item value="ca"><Select.ItemText>Canada</Select.ItemText></Select.Item>
                  <Select.Item value="uk"><Select.ItemText>United Kingdom</Select.ItemText></Select.Item>
                </Select.Viewport>
              </Select.Content>
            </Select.Portal>
          </Select.Root>
        )}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

---

制限事項

• このスキルは、タスクが上記の範囲に明確に一致する場合にのみ使用してください。
• 出力を、環境固有の検証、テスト、または専門家によるレビューの代替として扱わないでください。
• 必要な入力、権限、安全境界、または成功基準が欠けている場合は、停止して確認を求めてください。