← ClaudeAtlas

ui-spec-planninglisted

Generate a UI feature plan (plan.md) and eval_criteria.yaml from NFRs, acceptance scenarios, and architecture preflight. Use when the user asks to plan a UI feature or invokes /ui-spec-planning.
Accelerated-Innovation/governed-ai-delivery · ★ 18 · AI & Automation · score 71
Install: claude install-skill Accelerated-Innovation/governed-ai-delivery
# Spec Planning — UI You are performing Spec Planning for a UI feature. Determine the feature name from the user's request; if it is not provided, ask before proceeding. Read the following before proceeding: - `features/<feature_name>/acceptance.feature` - `features/<feature_name>/nfrs.md` - `features/<feature_name>/architecture_preflight.md` - `docs/ui/architecture/MVVM_CONTRACT.md` - `docs/ui/evaluation/eval_criteria.md` - `governance/ui/templates/plan.md` - `governance/ui/schemas/eval_criteria.schema.json` --- Produce or update `features/<feature_name>/plan.md` and `features/<feature_name>/eval_criteria.yaml`. ## plan.md must include: ### 1. Feature Summary One paragraph describing the feature from the user's perspective. ### 2. MVVM Breakdown For each layer: - Components to create (with props interface summary) - Hooks / query inject functions to create (query keys, data shape, transform) - Client state additions (Zustand store / Signal store) - API functions to create (endpoint, method, request/response types) ### 3. Increment Breakdown Ordered list of implementation increments. Each increment must be independently testable and deployable. ### 4. Backend Contract Dependencies List any backend endpoints this feature depends on. Flag any that are not yet available. ### 5. Accessibility Plan For each Gherkin scenario tagged `@accessibility`: describe the WCAG criteria and test approach. ### 6. Evaluation Compliance Summary ```yaml evaluation_prediction: first