Help us improve
Share bugs, ideas, or general feedback.
From devs
Create and review React components following strict TypeScript patterns, container/presenter architecture, and composition-first design. Use when asked to: (1) Create a React component, (2) Review a React component, (3) Build UI features, (4) Implement forms, (5) Add data fetching with TanStack Query. Enforces KISS/YAGNI principles, headless component patterns, Tailwind v4 styling, and Web3 security best practices.
npx claudepluginhub aaronbassett/agent-foundry --plugin devsHow this skill is triggered — by the user, by Claude, or both
Slash command
/devs:react-componentsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
1. **Automated Scaffolding**:
references.zipreferences/accessibility.mdreferences/advanced-storybook.mdreferences/code-review.mdreferences/error-handling.mdreferences/forms-and-testing.mdreferences/headless-components.mdreferences/naming.mdreferences/packages.mdreferences/patterns.mdreferences/principles.mdreferences/project-structure.mdreferences/security.mdreferences/state-and-styling.mdscripts/scaffold-component.mjsGuides writing and modifying React components with modern patterns, TypeScript, hooks for state and effects, component composition, and pitfalls to avoid. Triggers on .jsx/.tsx files or React planning.
Writes modern React components using TypeScript, hooks, Tailwind CSS, and best practices. Generates functional components, custom hooks, and composition patterns for performant UIs.
Enforces scalable React architecture with feature-based structure, type-safe state management (React Query), API layers, performance patterns, and testing when building components/pages/apps.
Share bugs, ideas, or general feedback.
Automated Scaffolding:
Use the scaffold-component.mjs script to quickly generate the boilerplate for a new feature component:
node .claude/skills/react-component/scripts/scaffold-component.mjs <featureName> <ComponentName>
<featureName> (camelCase): e.g., userProfile (creates src/features/userProfile/components/).<ComponentName> (PascalCase): e.g., UserProfileCard (generates UserProfileCardContainer.tsx, UserProfileCardView.tsx, UserProfileCardView.stories.tsx).
Run this command from the root of your React project.Read principles.md for core philosophy
Read patterns.md for container/presenter pattern
Read project-structure.md for file placement
| Type | Purpose | Contains |
|---|---|---|
| Container | Data fetching, state management | Hooks, no complex markup |
| Presenter | Pure UI rendering | Props, no side effects |
| Hook | Reusable logic | No JSX |
# Shared UI primitive
src/components/ui/<ComponentName>.tsx
# Feature-specific
src/features/<feature>/components/<Name>Container.tsx
src/features/<feature>/components/<Name>View.tsx
Container + Presenter pair:
// Container: handles data
export function FeatureContainer() {
const { data, error, isLoading } = useFeatureQuery()
if (isLoading) return <FeatureView state="loading" />
if (error) return <FeatureView state="error" message={error.message} />
if (!data) return <FeatureView state="empty" />
return <FeatureView state="ready" data={data} />
}
// Presenter: handles UI
export function FeatureView({ state, data, message }: FeatureViewProps) {
// Pure rendering based on props
}
Create stories for all four states: loading, error, empty, ready.
// FeatureView.stories.tsx
export const Loading = { args: { state: 'loading' } }
export const Empty = { args: { state: 'empty' } }
export const Error = { args: { state: 'error', message: 'Something went wrong' } }
export const Ready = { args: { state: 'ready', data: mockData } }
For more on creating interactive stories with controls, documenting with MDX, and mocking API requests for container components, see the Advanced Storybook Guide.
<Component>Propstailwind.config.js)cn() utility for conditional classessm, md, lg, xl minimumforms/<schema>.tsforms/use-<form>-form.ts| File | When to Read |
|---|---|
| naming.md | Variable, function, component naming |
| principles.md | Core philosophy (KISS, YAGNI, UX-first) |
| patterns.md | Container/presenter, composition |
| headless-components.md | Headless pattern, Radix-style composition |
| project-structure.md | File organization |
| state-and-styling.md | State management, Tailwind, async UX |
| forms-and-testing.md | RHF + Zod, Vitest + RTL |
| advanced-storybook.md | Interactive stories, MDX, API mocking |
| error-handling.md | Error boundaries, logging, reporting |
| security.md | Web3 safety, logging |
| accessibility.md | a11y best practices, testing |
| packages.md | Approved dependencies |
| code-review.md | Review checklist |