Skill / React code quality
One responsibility per file
Split domain components and hooks before fetching, filtering, selection, and form state become entangled.
Goal
Keep each domain component or hook responsible for one behavior so review, testing, and reuse stay local.
Review rules for component structure, state ownership, data fetching, and render behavior.
Checks
1Extract a hook when data fetching and filtering can be named independently.
2Extract child components for list rendering, detail panels, and edit forms.
3Let the page/container compose hooks and children; composition is a valid single responsibility.
Avoid
1Files where comment headers divide unrelated responsibilities inside one component.
2Components with unrelated useState or useQuery clusters that always re-render together.
Source
Imported as local Refined UI skill guidance, with this repo owning the final wording.
Mastra react-best-practices
../mastra/.claude/skills/react-best-practices