/new-feature

Feature Development Pipeline — from idea to implementation with design review

Orchestrator (You)
User Interaction
Design Agent
Implementation
Code Review
Report
1
Feature Planning
Orchestrator analyzes the codebase, drafts a plan, gets user approval
You do this directly

0 Ask for Project Paths

Detect stack from files (package.json, *.csproj, pom.xml, etc.). Always ask the user for project paths: backend, frontend, database. Build a Stack Profile that all agents will use.

  • React
  • .NET
  • Spring
  • Django
  • Express
  • Go
  • Any stack
↓

1 Analyze Codebase

Read project structure, routing, components, API endpoints, database models, middleware, and CSS design system. Adapt reads to the detected stack.

↓

2 Draft Feature Plan

Summary, scope, backend changes (endpoints, DB schema), API contract (method, path, request/response shapes), UI changes (pages, components, routes), dependencies, risks.

reports/feature-plan.md
↓

3 User Approval Gate

Present the full plan. User can approve, request changes (iterate), or reject (restart). No code is written until the user approves.

↓
Scope?
Full-stack / UI-only
Phase 2 → 3 → 4
Backend-only
Skip to Phase 4
Gate: user approved plan
2
Visual Capture
Screenshot the existing app as reference for the designer
UI changes only

1 Check if App Running

Probe localhost ports (3000, 5173, 4200). If running, capture BEFORE screenshots with Playwright: login page, dashboard, relevant views. If not running, proceed anyway.

  • Playwright chromium
  • 1280×800 viewport
  • Full page capture
  • Login + authenticated views
reports/screenshots/*.png
Gate: screenshots captured (or app not running — proceed anyway)
3
UI Design in Paper
Create visual mockups in Paper.design via MCP, get user approval before coding
Mandatory for UI

0 Paper MCP Check

Call mcp__paper__get_basic_info. If Paper is connected, proceed with visual design. If not, fall back to text-based wireframes.

↓

1 UI Designer Agent Agent

Reads feature plan + existing code patterns + screenshots. Creates artboards in Paper for each new/modified view. Matches existing design language. Documents component hierarchy, interaction flows, integration points, and CSS approach.

  • create_artboard
  • write_html
  • get_screenshot
  • get_jsx
  • update_styles
  • finish_working_on_nodes
reports/feature-ui-plan.md
Paper artboards
↓

2 Design Review Gate

User opens Paper to review mockups. Three options: Accept (proceed to implementation), Change (re-launch designer with feedback, loop), or Reject (start over with new direction). No code is written until designs are approved.

↓
Approved?
Accept
Proceed to Phase 4
Change
Re-launch designer
Reject
New direction
Gate: user approved designs
4
Parallel Implementation
Frontend + Backend agents build simultaneously, followed by code review

Full-stack

Both agents launch in parallel

UI-only

Frontend agent only

Backend-only

Backend agent only

↓ agents launch based on scope
Parallel execution

A Frontend Developer Agent

Reads feature plan + UI design spec. Creates components, pages, hooks. Updates routing + navigation. Follows API contract exactly. Uses existing styling patterns.

  • Components
  • Pages
  • Routes
  • Hooks
  • API calls
  • CSS
reports/feature-ui-implementation.md

B Backend Developer Agent

Reads feature plan. Creates route files, registers endpoints, modifies DB schema. Uses parameterized SQL. Adds auth middleware. Returns proper status codes.

  • Routes
  • Controllers
  • DB schema
  • Middleware
  • Validation
  • Auth
reports/feature-backend-implementation.md
↓ both agents complete

C Code Analyst Agent

Reviews ONLY the git diff. Checks for SQL injection, XSS, command injection, hardcoded secrets, null refs, race conditions, missing auth. Auto-fixes critical issues. Reports warnings and info items.

  • CRITICAL → auto-fix
  • WARNING → fix if easy
  • INFO → note only
/code-analysisreports/code-analysis.md
Gate: implementation complete + code review clean
5
Master Feature Report
Compile all agent reports into a polished HTML document

1 Documentation Lead Agent

Reads all reports: feature plan, UI design, frontend implementation, backend implementation, code analysis. Generates a professional HTML report with 8 sections: dashboard, plan, design, frontend, backend, integration map, testing checklist, footer.

  • feature-plan.md
  • feature-ui-plan.md
  • feature-ui-implementation.md
  • feature-backend-implementation.md
  • code-analysis.md
reports/feature-report.html
Report generated
6
Optional Testing Pipeline
Hand off to /full-pipeline for comprehensive validation
Optional

1 User Decision

Ask the user: "Would you like to run the full testing pipeline (security audit, code quality, unit tests, E2E tests)?" If yes, hand off to /full-pipeline.

/full-pipeline

Feature Development Complete

Planned, designed, reviewed, implemented, code-reviewed, documented.

6
Pipeline phases
4
Specialized agents
2
User approval gates
5
Reports generated
reports/feature-report.html Paper.design mockups /full-pipeline (optional)

Agents Involved

Orchestrator
You — plans, asks user, coordinates agents
UI Designer
Creates Paper mockups & design spec
Frontend Developer
Implements UI from approved designs
Backend Developer
Implements API, DB, middleware
Code Analyst
Security + quality review of diff
Documentation Lead
Compiles master HTML report