← ClaudeAtlas

build-featurelisted

Implement one vertical slice (UI → server action/route handler → DB) for a single PRD user story. Obeys path-scoped rules. Ends by invoking /code-review. Draft/approve at every boundary.
evgenii-studitskikh/Claude-Code-SaaS-Studio · ★ 1 · AI & Automation · score 80
Install: claude install-skill evgenii-studitskikh/Claude-Code-SaaS-Studio
Implement a complete, shippable vertical slice for exactly one user story: from the UI component through the server action or route handler down to the database query, including error handling and loading states. Non-autonomous: a draft plan is approved before any code is written, and each layer boundary is a checkpoint. ## Phases 1. **Scope the story** — read `docs/specs/prd.md` to identify the target user story and its acceptance criteria. If no argument was given, ask the user to specify. Confirm the story is IN_SCOPE (run `/scope-check` mentally) and that relevant schema tables exist in `supabase/migrations/`. If tables are missing, stop and direct to `/design-schema`. 2. **Draft implementation plan** — propose the files that will be created or modified: the Next.js page/component (path under `app/`), any shared components under `components/`, the server action or route handler, and the database query. Show the plan as a file tree with a one-line description for each file. Get approval before writing anything. 3. **Implement UI layer** — write the React server and/or client components using shadcn/ui components as defined in `docs/specs/ui.md`. Include empty, loading, and error states. Under `full` review, show each component before writing; under `lean`/`solo`, write after the plan is approved. 4. **Implement server layer** — write the server action (preferred for mutations) or route handler. Validate all inputs with Zod. Enforce tenant scoping by reading the tenant ID