Awesome-omni-skill 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.

install

source · Clone the upstream repo

git clone https://github.com/diegosouzapw/awesome-omni-skill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/development/react-frontend-n43-studio" ~/.claude/skills/diegosouzapw-awesome-omni-skill-react-frontend && rm -rf "$T"

manifest: skills/development/react-frontend-n43-studio/SKILL.md

source content

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

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)

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