tomevault-io React Component Design
Overview
Use this skill to build React components that are composable, testable, and stable under evolving UI requirements.
Scope Boundaries
- Use this skill when the task matches the trigger condition described in
description. - Do not use this skill when the primary task falls outside this skill's domain.
Shared References
- Rendering and hooks rules:
references/rendering-and-hooks-rules.md
Templates And Assets
- Component boundary template:
assets/react-component-boundary-template.md
- State flow checklist:
assets/react-state-flow-checklist.md
Inputs To Gather
- UI and interaction requirements.
- Reuse boundaries and design-system constraints.
- State ownership and data-flow expectations.
- Performance and accessibility requirements.
- Prop and state shape contracts (explicit type/interface/schema expectations).
Deliverables
- Component boundary and prop/state contract.
- Effect and async-behavior policy.
- Rendering-risk and accessibility checks.
Workflow
- Define component boundaries with
assets/react-component-boundary-template.md. - Apply state/effect rules from
references/rendering-and-hooks-rules.md. - Define explicit prop/state contracts; avoid
any/opaque object bags for component boundaries. - Validate state ownership and transitions.
- Review loading/empty/error/accessibility behavior.
- Finalize with
assets/react-state-flow-checklist.md.
Quality Standard
- Component responsibilities are single-purpose and explicit.
- State ownership is minimal and predictable.
- Effects are scoped and cleanup-safe.
- Performance choices are evidence-driven.
- Data shape mismatches are handled at boundary adapters, not via repeated casts in render/effect logic.
Failure Conditions
- Stop when component boundaries are ambiguous or cyclic.
- Stop when effect logic substitutes for missing state design.
- Escalate when state ownership cannot be resolved cleanly.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.