🎯

react-skills

🎯Skill

from llama-farm/llamafarm

VibeIndex|
What it does

react-skills skill from llama-farm/llamafarm

πŸ“¦

Part of

llama-farm/llamafarm(18 items)

react-skills

Installation

Install ScriptRun install script
curl -fsSL https://raw.githubusercontent.com/llama-farm/llamafarm/main/install.sh | bash
git cloneClone repository
git clone https://github.com/llama-farm/llamafarm.git
npm installInstall npm package
npm install -g nx
πŸ“– Extracted from docs: llama-farm/llamafarm
14Installs
830
-
Last UpdatedJan 26, 2026

Skill Details

SKILL.md

React 18 patterns for LlamaFarm Designer. Covers components, hooks, TanStack Query, and testing.

Overview

# React Skills for LlamaFarm Designer

Best practices and patterns for React 18 development in the Designer subsystem.

Tech Stack

  • React 18.2 with StrictMode
  • TypeScript 5.2+ for type safety
  • TanStack Query v5 for server state management
  • React Router v7 for client-side routing
  • TailwindCSS with tailwind-merge and clsx for styling
  • Radix UI primitives for accessible components
  • Vite for build tooling
  • Vitest + React Testing Library for testing

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

  • Use composition over inheritance
  • Prefer small, focused components
  • Use forwardRef for components that wrap DOM elements
  • Apply displayName to forwardRef components for DevTools

State Management

  • Local UI state: useState, useReducer
  • Server state: TanStack Query (useQuery, useMutation)
  • Shared UI state: React Context with custom hooks
  • Form state: Controlled components with validation

Hooks

  • Follow Rules of Hooks (top-level, consistent order)
  • Create custom hooks for reusable logic
  • Use query key factories for TanStack Query
  • Memoize expensive computations with useMemo
  • Stabilize callbacks with useCallback

Styling

  • Use cn() from lib/utils to merge Tailwind classes
  • Use cva (class-variance-authority) for component variants
  • Follow dark mode conventions with dark: prefix

Related Guides

  • [components.md](./components.md) - Component patterns
  • [hooks.md](./hooks.md) - Hook patterns and rules
  • [state.md](./state.md) - State management patterns
  • [performance.md](./performance.md) - Performance optimization
  • [security.md](./security.md) - Security best practices

Quick Reference

```typescript

// 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(undefined)

export function useMyContext() {

const ctx = useContext(MyContext)

if (!ctx) throw new Error('useMyContext must be within MyProvider')

return ctx

}

```

Testing

```typescript

import { renderWithProviders } from '@/test/utils'

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

test('renders component', () => {

renderWithProviders()

expect(screen.getByText('Hello')).toBeInTheDocument()

})

```