React Skills

What it does

This skill provides best practices and patterns for React 18 development within the LlamaFarm Designer subsystem. It focuses on structuring, managing state, styling, and testing React applications using a specific tech stack including TypeScript, TanStack Query, React Router, TailwindCSS, Radix UI, and Vite. The goal is to streamline frontend development workflows by providing guidance on component composition, state management, hook creation, and styling conventions.

When to use it

• When building new components within the LlamaFarm Designer subsystem using React 18.
• To ensure consistent coding style and adherence to established patterns within a team.
• For developers needing assistance with server state management using TanStack Query.
• When implementing custom hooks for reusable logic in React applications.
• During testing of React components, leveraging the provided renderWithProviders utility.

Key capabilities

• Component Composition: Encourages small, focused components and the use of forwardRef.
• State Management: Provides guidance on local state (useState, useReducer), server state (TanStack Query), and shared UI state (React Context).
• Hook Creation: Outlines rules for custom hooks and best practices for using query key factories with TanStack Query.
• Styling: Utilizes cn() from lib/utils to merge Tailwind classes, and cva for component variants.
• Testing: Includes a utility function renderWithProviders for testing components.

Example prompts

• "Show me an example of using cn() to combine Tailwind CSS classes."
• "How do I create a custom hook in React with this skill?"
• "What is the recommended pattern for managing server state with TanStack Query?"

Tips & gotchas

• This skill specifically applies to development within the LlamaFarm Designer subsystem and uses a defined tech stack.
• Familiarity with React 18, TypeScript, TailwindCSS, and TanStack Query is beneficial for utilizing this skill effectively.
• Refer to the related guides (components.md, hooks.md, etc.) for more detailed information on specific patterns and practices.