Menu
Use when structuring React components — composition over configuration, state ownership and colocation, hook design, render/effect boundaries, and prop API design.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Use when handed a set/batch of iterations, plans, or work slices to carry out end to end in one run — multiple iteration/story IDs to execute, ordered by blocking edges, each with review, commit, and doc-status transitions, until the whole set is done. lazyspec or any DAG-backed backlog.
Interview the user relentlessly about a plan or design. Use when the user wants to plan/design a system, break down a problem, or asks an open question.
You MUST use this skill when authoring an iteration, work slice, or "iteration document" that hands a bounded unit of work to a coding agent — drawn from a story, card, spec, or backlog. Symptoms include an iteration that bundles several acceptance criteria, restates a spec it links to, or won't finish in one agent session.
You MUST use when writing a story/user story; when decomposing a system, feature, epic, requirement, or spec into a backlog of user stories, or whenever about to write user stories or acceptance criteria during planning. Symptoms include "break this into stories", "write the backlog", "split this epic", stories that feel too big to estimate, or technical tasks masquerading as stories.
You MUST use this skill any time you are investigating a bug/unintended behaviour, before proposing fixes
Use when comparing a running web UI against its intended design (Figma mockups or reference screenshots), reviewing visual/layout/spacing/typography fidelity of a page, component, or interaction, or when a design-vs-build diff is needed before shipping or to feed a fix loop.
| name | react-patterns |
| description | Use when structuring React components — composition over configuration, state ownership and colocation, hook design, render/effect boundaries, and prop API design. |
