React Skills 是 LlamaFarm Designer 子系统的 React 18 开发最佳实践与模式集合，用于指导该子系统内的前端开发。
用途 该技能集面向 LlamaFarm Designer 的 React 18 开发，提供组件、Hooks、TanStack Query 和测试等方面的模式与规范，帮助开发者在该子系统内保持一致的实现方式。
技术栈
- React 18.2，启用 StrictMode
- TypeScript 5.2+，用于类型安全
- TanStack Query v5，用于服务端状态管理
- React Router v7，用于客户端路由
- TailwindCSS，配合 tailwind-merge 和 clsx 进行样式处理
- Radix UI 原语，用于可访问组件
- Vite，用于构建工具
- Vitest + React Testing Library，用于测试
目录结构 designer/src/ 下包含：
- api/：API 服务函数
- components/：React 组件（按功能组织）
- contexts/：React context 提供者
- hooks/：自定义 Hooks
- lib/：工具函数（如 cn 等）
- types/：TypeScript 类型定义
- utils/：辅助函数
- test/：测试工具与 mock
核心模式 组件组合：优先使用组合而非继承；倾向于小而专注的组件；对包裹 DOM 元素的组件使用 forwardRef；为 forwardRef 组件设置 displayName 以便 DevTools 识别。
状态管理：本地 UI 状态使用 useState、useReducer；服务端状态使用 TanStack Query（useQuery、useMutation）；共享 UI 状态使用 React Context 配合自定义 Hooks；表单状态使用受控组件并配合校验。
Hooks：遵循 Hooks 规则（顶层调用、顺序一致）；为可复用逻辑创建自定义 Hooks；为 TanStack Query 使用 query key 工厂；用 useMemo 记忆昂贵计算；用 useCallback 稳定回调。
样式：使用 lib/utils 中的 cn() 合并 Tailwind 类；使用 cva（class-variance-authority）处理组件变体；遵循暗色模式约定，使用 dark: 前缀。
相关指南
- components.md：组件模式
- hooks.md：Hook 模式与规则
- state.md：状态管理模式
- performance.md：性能优化
- security.md：安全最佳实践
快速参考 合并 Tailwind 类的工具： import { cn } from '@/lib/utils' cn('base-class', condition && 'conditional-class', className)
Query key 工厂模式： export const projectKeys = { all: ['projects'] as const, lists: () => [...projectKeys.all, 'list'] as const, list: (ns: string) => [...projectKeys.lists(), ns] as const, }
带校验 Hook 的 Context： 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 }
测试 import { renderWithProviders } from '@/test/utils' import { screen } from '@testing-library/react'
test('renders component', () => { renderWithProviders(<MyComponent />) expect(screen.getByText('Hello')).toBeInTheDocument() })
适用场景 适用于在 LlamaFarm Designer 子系统内进行 React 18 前端开发，包括组件编写、状态管理、样式处理与测试等环节。
限制 该技能集针对 LlamaFarm Designer 子系统，其他项目或环境下的适用性暂未提供。安装方式、收费与价格信息暂未提供。