designer-skills

LlamaFarm の Designer スキル

Designer サブシステム（React 18 + TanStack Query + TailwindCSS + Radix UI）向けのフレームワーク固有のパターンとチェックリストです。

概要

Designer は、AI アプリケーションを構築するためのブラウザベースのプロジェクトワークベンチです。設定編集、チャットテスト、データセット管理、RAG 設定、モデル選択を提供します。

技術スタック

技術	バージョン	用途
React	18.2	StrictMode を備えた UI フレームワーク
TypeScript	5.2+	型安全性
TanStack Query	v5	サーバー状態管理
TailwindCSS	3.3	ユーティリティファースト CSS
Radix UI	1.x	アクセシブルなコンポーネントプリミティブ
Vite	6.x	ビルドツールと開発サーバー
React Router	v7	クライアントサイドルーティング
Vitest	1.x	テストフレームワーク
axios	1.x	HTTP クライアント
framer-motion	12.x	アニメーション

ディレクトリ構成

designer/src/
  api/          # API service modules (axios-based)
  assets/       # Static assets and icons
  components/   # Feature-organized React components
    ui/         # Radix-based primitive components
  contexts/     # React Context providers
  hooks/        # Custom hooks (TanStack Query wrappers)
  lib/          # Utilities (cn, etc.)
  types/        # TypeScript type definitions
  utils/        # Helper functions
  test/         # Test utilities, factories, mocks

前提条件：共有スキル

Designer 固有のパターンを適用する前に、以下に準拠していることを確認してください。

• TypeScript スキル - 厳格な型付け、パターン、セキュリティ
• React スキル - コンポーネントのパターン、フック、状態管理

フレームワーク固有のガイド

ガイド	説明
tanstack-query.md	クエリ／ミューテーションのパターン、キャッシュ、無効化
tailwind.md	TailwindCSS のパターン、テーマ設定、レスポンシブデザイン
radix.md	Radix UI コンポーネントのパターン、アクセシビリティ
performance.md	フロントエンドの最適化、バンドルサイズ、遅延読み込み

主なパターン

API クライアントの設定

// Centralized client with interceptors
export const apiClient = axios.create({
  baseURL: API_BASE_URL,
  headers: { 'Content-Type': 'application/json' },
  timeout: 60000,
})

// Error handling interceptor
apiClient.interceptors.response.use(
  response => response,
  (error: AxiosError) => {
    if (error.response?.status === 422) {
      throw new ValidationError('Validation error', error.response.data)
    }
    throw new NetworkError('Request failed', error)
  }
)

クエリクライアントの設定

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60_000,
      gcTime: 5 * 60_000,
      retry: 2,
      retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30_000),
      refetchOnWindowFocus: false,
    },
    mutations: { retry: 1 },
  },
})

クラス結合ユーティリティ

// lib/utils.ts - Always use cn() for Tailwind classes
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

テーマプロバイダーのパターン

const ThemeContext = createContext<ThemeContextType | undefined>(undefined)

export function useTheme() {
  const context = useContext(ThemeContext)
  if (!context) throw new Error('useTheme must be used within ThemeProvider')
  return context
}

// Apply via Tailwind dark mode class strategy
useEffect(() => {
  document.documentElement.classList.toggle('dark', theme === 'dark')
}, [theme])

コンポーネント規約

機能コンポーネント

• components/{Feature}/ ディレクトリに配置します
• 1 ファイルにつき 1 コンポーネントとし、コンポーネント名を付けます
• 機能固有の型やユーティリティと同じ場所に配置します

UI プリミティブ

• components/ui/ に配置します
• Radix UI プリミティブを Tailwind スタイルでラップします
• ref の転送には forwardRef を使用します
• DevTools 向けに displayName を設定します

アイコン

• assets/icons/ に配置します
• SVG props を受け取る関数コンポーネントです
• 標準アイコンには lucide-react を使用します

テスト

// Use MSW for API mocking
import { server } from '@/test/mocks/server'
import { renderWithProviders } from '@/test/utils'

beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

test('renders with query data', async () => {
  renderWithProviders(<MyComponent />)
  await screen.findByText('Expected text')
})

チェックリストの概要

カテゴリー	重大	高	中	低
TanStack Query	3	4	3	2
TailwindCSS	2	3	4	2
Radix UI	3	3	2	1
パフォーマンス	2	4	3	2