react-skills

React Skills for LlamaFarm Designer

Designer サブシステムで React 18 を開発するためのベストプラクティスとパターンです。

Tech Stack

• StrictMode を使用した React 18.2
• 型安全性を確保する TypeScript 5.2+
• サーバー状態管理のための TanStack Query v5
• クライアントサイドルーティングのための React Router v7
• スタイリングのための TailwindCSS、tailwind-merge、clsx
• アクセシブルなコンポーネントのための Radix UI プリミティブ
• ビルドツールのための Vite
• テストのための Vitest + React Testing Library

Directory Structure

designer/src/
  api/          # API service functions
  components/   # React components (feature-organized)
  contexts/     # React context providers
  hooks/        # Custom hooks
  lib/          # Utility functions (cn, etc.)
  types/        # TypeScript type definitions
  utils/        # Helper functions
  test/         # Test utilities and mocks

Core Patterns

Component Composition

• 継承よりもコンポジションを使用します
• 小さく、役割を絞ったコンポーネントを優先します
• DOM 要素をラップするコンポーネントには forwardRef を使用します
• DevTools で確認できるよう、forwardRef コンポーネントに displayName を設定します

State Management

• ローカル UI 状態：useState、useReducer
• サーバー状態：TanStack Query（useQuery、useMutation）
• 共有 UI 状態：カスタムフックと React Context
• フォーム状態：バリデーションを備えた制御コンポーネント

Hooks

• Hooks のルールに従います（最上位で呼び出し、順序を一貫させます）
• 再利用可能なロジックにはカスタムフックを作成します
• TanStack Query にはクエリキーのファクトリーを使用します
• コストの高い計算は useMemo でメモ化します
• useCallback でコールバックを安定させます

Styling

• Tailwind クラスの結合には lib/utils の cn() を使用します
• コンポーネントのバリアントには cva（class-variance-authority）を使用します
• dark: プレフィックスを使用したダークモードの規約に従います

Related Guides

• components.md - コンポーネントのパターン
• hooks.md - フックのパターンとルール
• state.md - 状態管理のパターン
• performance.md - パフォーマンスの最適化
• security.md - セキュリティのベストプラクティス

Quick Reference

// Utility for merging Tailwind classes
import { cn } from '@/lib/utils'
cn('base-class', condition && 'conditional-class', className)

// Query key factory pattern
export const projectKeys = {
  all: ['projects'] as const,
  lists: () => [...projectKeys.all, 'list'] as const,
  list: (ns: string) => [...projectKeys.lists(), ns] as const,
}

// Context with validation hook
const MyContext = createContext<MyContextType | undefined>(undefined)
export function useMyContext() {
  const ctx = useContext(MyContext)
  if (!ctx) throw new Error('useMyContext must be within MyProvider')
  return ctx
}

Testing

import { renderWithProviders } from '@/test/utils'
import { screen } from '@testing-library/react'

test('renders component', () => {
  renderWithProviders(<MyComponent />)
  expect(screen.getByText('Hello')).toBeInTheDocument()
})