← ClaudeAtlas

govkit-ui-implementation-planlisted

Generate an ordered UI implementation checklist from a validated plan and preflight. Use when the user asks to draft UI implementation steps or invokes /govkit-ui-implementation-plan.
Accelerated-Innovation/governed-ai-delivery · ★ 20 · AI & Automation · score 62
Install: claude install-skill Accelerated-Innovation/governed-ai-delivery
# Implementation Plan — UI You are producing an Implementation Plan 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>/plan.md` - `features/<feature_name>/architecture_preflight.md` - `features/<feature_name>/design.md` - `docs/ui/architecture/MVVM_CONTRACT.md` - `docs/ui/architecture/nextjs/` for `ui-nextjs` - `docs/ui/architecture/*/STATE_MANAGEMENT.md` --- Produce an ordered implementation checklist. Sequence must follow MVVM layer order: API → ViewModel → View. For `ui-nextjs`, use: contracts/types → backend API adapter → application use case/view model → Server Component composition → minimal Client Components. Never include SQL, database packages, ORM/migration work, connection strings, or business logic in Next.js server code. ## Implementation Order ### 1. Types and Interfaces - [ ] Define request/response types in `src/features/<feature>/types/` - [ ] Define ViewModel types (shaped for component consumption) ### 2. API Layer - [ ] Create API functions in `src/features/<feature>/api/` - [ ] Wire to shared base client / ApiService - [ ] Write unit tests for API functions (mock HTTP at boundary) ### 3. ViewModel — Query Hooks / Inject Functions - [ ] Define query keys in `queryKeys.ts` / `query-keys.ts` - [ ] Create query hooks with `select` transforms - [ ] Create mutation hooks with cache invalidation - [ ] Write unit tests using