react-skills

Provide standardized React 18 patterns for LlamaFarm Designer apps in TypeScript.

835|58|Updated Jul 9, 2025

Search Tags:#typescript #testing #react #patterns #tanstack-query #designer

Ready to run

npx skills add https://github.com/llama-farm/llamafarm --skill react-skills

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-skills
Source: https://github.com/llama-farm/llamafarm/tree/main/.claude/skills/react-skills
Command: npx skills add https://github.com/llama-farm/llamafarm --skill react-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React pattern guidance tailored for LlamaFarm Designer, establishing consistent, maintainable frontend practices to accelerate development and reduce technique drift.

Core Features & Use Cases

Patterns for components, hooks, state management, and data fetching in React 18 within Designer.
Guidance on testing setup with Vitest and React Testing Library for reliable UI components.
Real-world scenario: a design system module with multiple components, hooks, and routes that must stay consistent across teams.

Quick Start

Use the react-skills resource to align your React 18 patterns with Designer.

Frequently Asked Questions about react-skills

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What are the standard React 18 patterns for TypeScript apps?▼

Standard React 18 patterns for TypeScript apps cover components, hooks, state management, routing, and data fetching to establish consistent, maintainable frontend practices and reduce technique drift.

How do I set up Vitest and React Testing Library for UI components?▼

Set up Vitest and React Testing Library by applying standardized testing patterns to validate your React 18 components, ensuring reliable UI behavior and consistent test coverage across your application.

Can I use TanStack Query and Radix UI together in React 18?▼

Yes, TanStack Query and Radix UI are supported together within standardized React 18 patterns, enabling consistent data fetching and accessible primitive components in TypeScript frontend applications.

What is the best way to structure a React 18 design system module?▼

The best way to structure a React 18 design system module is to align components, hooks, and routes with standardized patterns, ensuring consistency and maintainability across multiple teams.

Does this React 18 pattern guidance work with Vite and TailwindCSS?▼

Yes, the React 18 pattern guidance satisfies standard tooling requirements that fully support Vite and TailwindCSS, alongside React Router and Radix UI, for TypeScript application development.