# React Frontend

> Provides best practices for building React applications with TypeScript and Tailwind CSS, covering component design, state management, data fetching, forms, performance, and accessibility. Use when building or modifying React frontend components, hooks, or pages.

- Skill: `tomevault-io/react-frontend-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/react-frontend-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/react-frontend-2/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/react-frontend-2

---


# React Frontend Best Practices

## Quick Start

### Component Design

- Use functional components with TypeScript interfaces for props
- Keep components small and focused (single responsibility)
- Use compound components for complex UI patterns

```tsx
interface CardProps {
  title: string
  value: number
  onSelect?: () => void
}

function Card({ title, value, onSelect }: CardProps) {
  return (
    <div className="rounded border p-4" onClick={onSelect}>
      <h3>{title}</h3>
      <span>{value}</span>
    </div>
  )
}
```

### State Management

| State Type        | Solution                    |
| ----------------- | --------------------------- |
| Server/async data | TanStack Query              |
| Form state        | react-hook-form or useState |
| Local UI state    | useState                    |
| Shared UI state   | Context or Zustand          |
| URL state         | React Router                |

### Data Fetching (TanStack Query)

```tsx
function useData() {
  return useQuery({ queryKey: ["data"], queryFn: fetchData })
}
```

### Styling with Tailwind

- Use `cn()` utility for conditional classes
- Define variant objects for component variants
- Never use inline styles when Tailwind classes exist

### File Naming

| Type       | Convention              | Example               |
| ---------- | ----------------------- | --------------------- |
| Components | PascalCase              | `DashboardCard.tsx`   |
| Hooks      | camelCase, `use` prefix | `useDashboardData.ts` |
| Utilities  | camelCase               | `formatDate.ts`       |
| Constants  | SCREAMING_SNAKE_CASE    | `API_BASE_URL`        |

### Performance

- Memoize expensive computations with `useMemo`
- Memoize callbacks passed to children with `useCallback`
- Don't memoize prematurely — measure first

## Additional Resources

- For complete patterns including forms, routing, error handling, testing, and accessibility, see [reference.md](reference.md)

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/n43-studio) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-15 -->