full-stack-featureMeta-skill for orchestrating end-to-end feature development from persona research through deployed, tested code — coordinating skills, commands, and agents across every stage. Use when building a new feature end-to-end, coordinating frontend + backend work, or needing a structured approach from research to production.
Install via ClawdBot CLI:
clawdbot install wpank/full-stack-featureCoordinate the entire lifecycle of a feature — from understanding who it's for, through design, implementation, testing, and documentation. This meta-skill routes to the right skill, command, or agent at each stage and enforces stage gates so nothing ships half-baked.
npx clawhub@latest install full-stack-feature
Every feature moves through eight stages. Small features skip stages (see Complexity Assessment below); large features complete all of them.
1. Persona Research
↓
2. Feature Specification
↓
3. UX/UI Design
↓
4. API Design
↓
5. Frontend Implementation
↓
6. Backend Implementation
↓
7. Testing
↓
8. Documentation
Understand who the feature is for before designing anything. Define the target user, their goals, pain points, and the journey this feature supports.
Invoke: /create-persona command → ai/commands/docs/create-persona.md
Skill: persona-docs → ai/skills/writing/persona-docs/SKILL.md
Output: Persona document describing the target user, their context, and success criteria for this feature.
Translate persona insights into a concrete feature spec — scope, acceptance criteria, edge cases, and technical constraints.
Invoke: feature-specification skill → ai/skills/meta/feature-specification/SKILL.md
Output: Feature spec with user stories, acceptance criteria, out-of-scope items, and technical notes.
Design the interface informed by the persona and spec. Choose the right visual style, layout, and interaction patterns.
Output: Component hierarchy, layout decisions, style selections, and responsive behavior plan.
Define the contract between frontend and backend. Design endpoints, request/response shapes, error codes, and authentication requirements.
Command: /create-api-route → ai/commands/development/create-api-route.md
Output: API contract (OpenAPI spec or typed route definitions) with validation rules and error handling.
Build the UI components, pages, and client-side logic. Use the appropriate framework skill for the project's stack.
Command: /create-component → ai/commands/development/create-component.md
Output: Working UI components wired to the API contract, with loading/error states and responsive layout.
Build the API routes, business logic, data access layer, and background jobs.
Command: /new-feature → ai/commands/development/new-feature.md
Output: Implemented API routes, data models, migrations, and business logic passing unit tests.
Validate the feature across unit, integration, and end-to-end layers. Verify acceptance criteria from Stage 2.
Command: /test-feature → ai/commands/development/test-feature.md
Output: Passing test suite covering happy paths, edge cases, and error scenarios from the spec.
Generate user-facing docs, API references, and internal technical documentation.
Command: /generate-docs → ai/commands/documentation/generate-docs.md
Output: Updated README, API docs, component storybook entries, and changelog.
| Stage | Primary Skill | Command | Agent |
|-------|--------------|---------|-------|
| 1. Persona Research | persona-docs | /create-persona | — |
| 2. Feature Spec | feature-specification | — | — |
| 3. UX/UI Design | UI/UX skill | — | — |
| 4. API Design | api-design-principles | /create-api-route | ai/agents/api/ |
| 5. Frontend | Framework skill (Next.js, React, etc.) | /create-component | — |
| 6. Backend | api-development, database-migration-patterns | /new-feature | ai/agents/migration/ |
| 7. Testing | testing-workflow, e2e-testing-patterns | /test-feature | ai/agents/testing/ |
| 8. Documentation | — | /generate-docs | — |
Each stage must pass its gate before proceeding. Gates prevent wasted work by catching gaps early.
| Gate | Required Before | Criteria | Blocking? |
|------|----------------|----------|-----------|
| Persona defined | Stage 2 | Target user identified with goals and pain points | Yes |
| Spec approved | Stage 3 | Acceptance criteria written, scope defined, edge cases listed | Yes |
| Design reviewed | Stage 4 | Component hierarchy defined, responsive plan in place | Yes |
| API contract locked | Stage 5 + 6 | Endpoints defined, request/response types agreed, error codes set | Yes |
| Frontend renders | Stage 6 | UI components display with mock data, loading/error states work | No (parallel OK) |
| Backend passes tests | Stage 7 | All API routes return expected responses, validations enforced | Yes |
| Tests pass | Stage 8 | Unit + integration + E2E tests green, acceptance criteria verified | Yes |
| Docs complete | Deploy | API documented, user-facing docs updated, changelog entry added | Yes |
Start with the thinnest possible end-to-end slice, then widen.
Phase 1 — Thin Slice
Build one happy path through all layers: a single user action from UI click to database write and back. This proves the architecture works and gives stakeholders something to demo.
Example: "User can create a new project"
UI: One form with a name field and submit button
API: POST /api/projects { name: string }
DB: INSERT INTO projects (name) VALUES ($1)
Test: E2E test: fill form → submit → see project in list
Phase 2 — Widen
Add validation, error handling, edge cases, and secondary flows. Each addition follows the same vertical path — never build an entire layer in isolation.
Phase 3 — Polish
Loading states, optimistic updates, animations, accessibility, performance optimization, and comprehensive error messages.
Not every feature needs all eight stages. Use this table to determine which stages to include.
| Feature Size | Examples | Stages to Include | Estimated Time |
|-------------|----------|-------------------|----------------|
| Trivial | Rename a label, fix copy, adjust spacing | 5 only | < 1 hour |
| Small | Add a filter, new form field, simple toggle | 4 → 5 → 6 → 7 | 2-4 hours |
| Medium | New CRUD entity, dashboard widget, search feature | 2 → 3 → 4 → 5 → 6 → 7 | 1-3 days |
| Large | New user-facing feature area, multi-page flow | All 8 stages | 1-2 weeks |
| Epic | New product vertical, major redesign, platform migration | All 8 + ADR + phased rollout | 2-6 weeks |
Once the API contract is locked (Stage 4 gate), frontend and backend can proceed simultaneously:
Use the /handoff-and-resume command when:
Use the /progress command to check which stage you're in and what remains.
Generated Mar 1, 2026
A retail company wants to add a personalized recommendation engine to its online store. The feature requires user persona analysis to understand shopping behaviors, backend API development for recommendation algorithms, and frontend UI integration to display suggestions on product pages, ensuring a seamless shopping experience.
A healthcare provider aims to implement a telemedicine scheduling feature in its patient portal. This involves researching patient personas for accessibility needs, designing a user-friendly interface for appointment booking, and developing secure backend APIs to handle sensitive health data and integration with existing EHR systems.
A fintech startup is building a new budgeting tool within its mobile app. The process includes creating personas for diverse financial users, specifying feature requirements like real-time expense tracking, and coordinating frontend mobile development with backend services for data synchronization and security compliance.
An educational technology company needs to develop an interactive quiz feature for its online learning platform. This requires persona research on student and teacher needs, designing engaging UI components, and implementing backend logic for scoring and progress tracking, followed by thorough testing and documentation for educators.
This model involves offering the full-stack feature as part of a software-as-a-service platform, where customers pay a recurring fee for access. It generates revenue through tiered pricing based on usage or feature sets, ensuring steady income while supporting continuous updates and maintenance.
Targeting large organizations, this model sells licenses for the feature as part of a customized software package. Revenue comes from one-time fees or annual contracts, often including support and integration services, making it ideal for industries with strict compliance needs like healthcare or finance.
This model offers basic functionality of the feature for free to attract users, then monetizes through premium upgrades such as advanced analytics or priority support. It drives revenue by converting free users to paid plans, leveraging the end-to-end development to create compelling value-added services.
💬 Integration Tip
Start with a clear persona and spec to align frontend and backend work early, using the stage gates to catch issues before implementation.
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
Provides a 7-step debugging protocol plus language-specific commands to systematically identify, verify, and fix software bugs across multiple environments.
A comprehensive skill for using the Cursor CLI agent for various software engineering tasks (updated for 2026 features, includes tmux automation guide).
Write, run, and manage unit, integration, and E2E tests across TypeScript, Python, and Swift using recommended frameworks.
Control and operate Opencode via slash commands. Use this skill to manage sessions, select models, switch agents (plan/build), and coordinate coding through Opencode.
Coding style memory that adapts to your preferences, conventions, and patterns for consistent coding.