Skill / React code quality
Keep input and output APIs narrow
Split oversized prop, argument, and return-value APIs into cohesive responsibilities.
Goal
Keep each component, hook, function, or utility API focused on one cohesive responsibility.
Review rules for component structure, state ownership, data fetching, and render behavior.
Checks
1Treat unrelated clusters of props, arguments, return values, and handlers as evidence that the unit needs to split.
2Compose focused hooks and components at a page or container instead of hiding their composition in a mega-hook.
3Return only values owned by the responsibility; group values only when they form one meaningful concept.
4Judge cohesion from caller usage and reasons to change, not from an arbitrary parameter limit.
5Keep semantic and render inputs explicit: use named props, or narrow the children prop when its content type is the component contract.
Avoid
1APIs that span unrelated concerns such as querying, pagination, selection, permissions, and editing.
2Wrapping the same unrelated values in one options object and calling the API narrow.
3Pass-through mega-hooks that expose one large bag of internal state and handlers.
4Runtime type checks on ReactNode props such as children or label that recover semantic data or silently switch behavior; keep typeof guards at unknown and external boundaries.
Source
Imported as local Control UI skill guidance, with this repo owning the final wording.
Mastra react-best-practices
../mastra/.claude/skills/react-best-practices