quantumquirkxyz Contract
- Input: problem or task defined by the skill body.
- Output: Markdown artifact or structured result with completion criteria met.
- Side effects: none (design/review/documentation only unless explicitly stated).
- Dependencies: none (self-contained unless linked to other skills).
- Stop condition: all process steps completed; artifact saved; criteria checked.
- Risk: low.
- Boundary: produces reasoning or documentation artifacts; does not modify external systems unless explicitly instructed.
React
Use this skill when React components or state need to be shaped deliberately. Keep the component graph shallow where possible, and make the state seam explicit so the UI remains testable and refactor-friendly.
Contract
- Input: React brief, component tree, and state shape.
- Output: a React seam proposal, component guidance, and state boundary guidance.
- Scope: design component and state shape, not the full implementation.
- Rule: keep state as local as possible while still serving the interaction flow.
- Rule: prefer reusable components only when the interface stays honest.
- Rule: avoid component forests that hide the real user path.
Steps
- Identify the primary interaction path.
- Decide which state is local and which state must be lifted.
- Shape the component graph around the seam.
- Describe the boundaries that make the UI easy to test.
Completion criteria
- the component seam is named
- the state boundary is named
- the interaction path is explicit