用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/llama-farm/llamafarm --skill react-skills命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
CLI best practices for LlamaFarm. Covers Cobra, Bubbletea, Lipgloss patterns for Go CLI development.
Electron patterns for LlamaFarm Desktop. Covers main/renderer processes, IPC, security, and packaging.
Shared Python best practices for LlamaFarm. Covers patterns, async, typing, testing, error handling, and security.
正在显示 SKILL.md
基于 SOC 职业分类
| name | react-skills |
| description | React 18 patterns for LlamaFarm Designer. Covers components, hooks, TanStack Query, and testing. |
| allowed-tools | Read, Grep, Glob |
| user-invocable | false |
Best practices and patterns for React 18 development in the Designer subsystem.
tailwind-merge and clsx for stylingdesigner/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
forwardRef for components that wrap DOM elementsdisplayName to forwardRef components for DevToolsuseState, useReduceruseQuery, useMutation)useMemouseCallbackcn() from lib/utils to merge Tailwind classescva (class-variance-authority) for component variantsdark: prefix// 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
}
import { renderWithProviders } from '@/test/utils'
import { screen } from '@testing-library/react'
test('renders component', () => {
renderWithProviders(<MyComponent />)
expect(screen.getByText('Hello')).toBeInTheDocument()
})