# Build React Components

> Build maintainable React components with TypeScript using clear props, composition, and explicit UI states. Use when this capability is needed.

- Skill: `tomevault-io/build-react-components` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/build-react-components`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/build-react-components/raw
- Safety review: pending
- 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/build-react-components

---


# Build React Components

## Purpose
Provide patterns for building reusable, testable React components with clear responsibilities and predictable behavior.

## When to use
Use this skill when you are:
- Creating new components (pages, feature components, shared UI)
- Refactoring large components into smaller units
- Implementing modals/dialogs and forms
- Building lists with filtering, pagination, and empty states

## Inputs
- Component responsibilities and expected interactions
- Data dependencies (what inputs come via props vs fetched)
- Styling approach (UI kit, CSS modules, styled components, etc.)

## Outputs
- Typed component props and public API
- Component structure (container vs presentational as needed)
- Explicit handling for loading/empty/error states
- Example usage and acceptance criteria

## Rules
- Components MUST have typed props (no implicit `any`).
- Components SHOULD be small and composable.
- Components MUST render explicit loading/empty/error states when dependent on async data.
- Components SHOULD avoid hidden side effects; prefer hooks.

## Steps
1. Define the component contract (props, callbacks, UI states).
2. Decide whether it is:
   - presentational (props in, UI out)
   - container (fetching/orchestration + composition)
3. Implement rendering logic:
   - default state
   - loading/empty/error
4. Implement interactions:
   - event handlers
   - accessibility considerations
5. Add a minimal verification:
   - renders
   - primary interaction works
   - error state renders

## Verification

- [ ] Component renders with valid props
- [ ] Component handles loading state (when applicable)
- [ ] Component handles empty state (when applicable)
- [ ] Component handles error state (when applicable)
- [ ] Primary interaction triggers expected callback
- [ ] Component is accessible (keyboard navigation, focus visible)

## Boundaries

- MUST NOT use implicit `any` for props
- MUST NOT hide side effects in render (use hooks)
- MUST NOT skip loading/empty/error states for async-dependent components
- SHOULD NOT create large components (decompose into smaller units)
- SHOULD NOT mix container and presentational concerns without clear boundaries
- SHOULD NOT ignore accessibility (aria labels, focus management)

## Included assets
- Templates: `./templates/` includes component scaffolds (presentational, container, list, modal).
- Examples: `./examples/` includes a complete "profile-style" component example.

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