# React Component Design

> React Component Design

- Skill: `onfire7777/react-component-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add onfire7777/react-component-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/onfire7777/react-component-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: onfire7777 (https://skillmd.com/u/onfire7777)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/onfire7777/react-component-design

---


# React Component Design

Purpose: Build compact, accessible React UI aligned with the contract.

1. Keep state local unless shared behavior needs lifting.
2. Use semantic controls and labels.
3. Avoid placeholder/sample data in production UI.
4. Verify desktop and mobile behavior.

Checklist:

- Components fit existing app conventions.
- Loading, empty, error, and offline states are real.
- Controls update state or call APIs.
- No horizontal scroll at 360px.

Positive example: selector-driven insights panel using live API data.
Negative example: decorative cards with inert buttons.

Failure modes: sample data leakage, inaccessible controls, layout overflow.