/elite-react

Skill 01

React component patterns. Accessibility-first markup. Responsive layouts that don't break.

What It Covers

Compound component patterns with slot-based APIs
Accessibility-first markup and ARIA patterns
Responsive layouts with mobile-first breakpoints
State management with hooks and context
Performance-optimized rendering strategies

Install This Skill

npx skills add jackmcpickle/eliteskills --skill elite-react

Or install all skills: npx skills add jackmcpickle/eliteskills

Install

Terminal

$ npx skills add jackmcpickle/eliteskills --skill react

Skill Structure

tree

.claude/skills/react/
├── SKILL.md
├── templates/
├── component.tsx.md
├── hook.ts.md
└── form.tsx.md
├── examples/
├── data-table.md
└── auth-flow.md

Example Prompts

Build a data table

> /elite-react Create a sortable, filterable data table with pagination using TanStack Table

Auth flow

> /elite-react Build a login/signup flow with form validation, error states, and redirect

Dashboard layout

> /elite-react Create a responsive dashboard with sidebar navigation and nested routes

Best Practices

Start with a clear component hierarchy before generating code
Provide your existing design tokens or Tailwind config so output matches your project
Use small, focused tasks rather than entire page builds
Review generated code for project-specific conventions

Compatible Tools