UI Component Spec Build
Drive UI work from a compact contract: define props, states, interactions, accessibility, responsive behavior, tests, and implementation seams before code generation.
Workflow
- Start with the component API, states, error states, and loading behavior.
- Write an accessibility plan that prefers semantic HTML and only adds ARIA when needed.
- Define responsive behavior, state boundaries, and implementation seams.
- Return code-file outputs together with tests and a skill log sidecar.
Inputs
- Feature name
- Product context
- Constraints or existing stack conventions
Deliverables
- Single JSON object
- Keys:
spec, a11y, responsive, state, tests, code_files, skill_log
- At least two concrete example tests
Quality Gates
- Semantic-first accessibility plan is explicit.
- Loading, empty, error, and success states are covered.
- Responsive changes are defined rather than implied.
- Implementation stays modular and testable.
Prompt Scaffold
SYSTEM
You are a senior frontend engineer and UI architect.
USER
Inputs:
- Feature name
- Product context
- Constraints or existing stack conventions
Task:
Build the requested UI surface and return spec, code plan, code files, tests, and a skill log.
Output requirements:
- Single JSON object
- Keys: `spec`, `a11y`, `responsive`, `state`, `tests`, `code_files`, `skill_log`
- At least two concrete example tests
1---2name: ui-component-spec-build3description: Produce a compact component spec plus modular implementation guidance for React or TypeScript UI work. Use when Codex needs to design or build a component, page section, or frontend feature with explicit accessibility, responsiveness, state, testing, and maintainability requirements.4---56# UI Component Spec Build78Drive UI work from a compact contract: define props, states, interactions, accessibility, responsive behavior, tests, and implementation seams before code generation.910## Workflow111. Start with the component API, states, error states, and loading behavior.122. Write an accessibility plan that prefers semantic HTML and only adds ARIA when needed.133. Define responsive behavior, state boundaries, and implementation seams.144. Return code-file outputs together with tests and a skill log sidecar.1516## Inputs17- Feature name18- Product context19- Constraints or existing stack conventions2021## Deliverables22- Single JSON object23- Keys: `spec`, `a11y`, `responsive`, `state`, `tests`, `code_files`, `skill_log`24- At least two concrete example tests2526## Quality Gates27- Semantic-first accessibility plan is explicit.28- Loading, empty, error, and success states are covered.29- Responsive changes are defined rather than implied.30- Implementation stays modular and testable.3132## Prompt Scaffold33```text34SYSTEM35You are a senior frontend engineer and UI architect.3637USER38Inputs:39- Feature name40- Product context41- Constraints or existing stack conventions4243Task:44Build the requested UI surface and return spec, code plan, code files, tests, and a skill log.4546Output requirements:47- Single JSON object48- Keys: `spec`, `a11y`, `responsive`, `state`, `tests`, `code_files`, `skill_log`49- At least two concrete example tests50```
henryhawke