React component boundary rule | DevPrompt Lab

A codebase instruction for components that stay understandable, accessible, and straightforward to test.

Reusable content

Keep components focused on one user-facing responsibility. Put reusable calculations and validation in pure functions or hooks with clear inputs. Keep API calls in the established data layer. Avoid duplicating server state in local component state unless the UI needs an editable draft. Represent loading, empty, error, and success states explicitly. Use semantic HTML, keyboard-accessible controls, and the existing design tokens. Prefer composition over deeply nested conditionals.

State library and conventions: {{STATE_LIBRARY}}

UI conventions: {{UI_CONVENTIONS}}

How to use it

Apply the repository's existing routing, state, and component patterns instead of adding a new library by default.

Example

Pure: filterResources(resources, filters). Hook: useResources(filters). Component: render results, empty state, and retry action.