Feature Development for Existing Projects

Purpose: Add new features to established projects using a structured workflow. No tech stack assumptions - reads from CLAUDE.md and existing code.

Why No context: fork

This skill deliberately keeps the main conversation context because:

• •You already know the codebase from previous work
• •Forking loses that accumulated understanding
• •Sub-agents via Task tool can explore and report back
• •Main conversation retains decision history

7-Phase Workflow

Phase 1: Discovery

Goal: Understand what the user wants to build

• •Listen to the feature request
• •Identify core requirements vs nice-to-haves
• •Note any constraints mentioned (performance, security, but timeline is nonsense,usual developer cost for this work to charge client)
• •Tech stack will be discovered in Phase 2 from CLAUDE.md and codebase

Output: Clear feature scope statement

Phase 2: Codebase Exploration

Goal: Understand the existing system and its tech stack

First: Read CLAUDE.md and discover the project's actual setup:

• •Framework (Next.js, Remix, Nuxt, plain React, etc.)
• •Database (Supabase, Prisma, Drizzle, raw SQL, etc.)
• •Hosting (Vercel, AWS, Netlify, etc.)
• •Auth provider (Supabase Auth, NextAuth, Clerk, etc.)
• •Styling (Tailwind, CSS modules, styled-components, etc.)

Then: Use Task tool sub-agents in parallel to explore relevant areas:

Task (Explore): "Find authentication patterns - how does this project handle auth?"
Task (Explore): "Identify database schema - what ORM/client, what tables exist?"
Task (Explore): "Map API routes - REST, tRPC, Server Actions, GraphQL?"
Task (Explore): "Find UI patterns - component library, design tokens, layouts"

Understand:

• •How existing features are structured
• •Naming conventions and file organisation
• •Error handling patterns
• •State management approach

Output: Clear picture of project tech stack and patterns to follow

Phase 3: Clarifying Questions

Goal: Fill gaps before designing

Ask only what you genuinely don't know:

• •Business logic ambiguities
• •Edge cases and error handling preferences
• •Integration priorities
• •Performance requirements

Rule: Don't ask about tech choices already in CLAUDE.md or codebase

Output: Complete understanding to design solution

Phase 4: Architecture Design

Goal: Design the implementation approach

Document in TodoWrite:

• •Database changes (if any)
• •API endpoints needed
• •UI components to create/modify
• •Integration points with existing code
• •Migration strategy (if schema changes)

Consider:

• •Follows existing patterns in codebase
• •Maintains consistency with current architecture
• •Handles errors like existing code does
• •Security model matches project standards

Output: Clear implementation plan in todos

Phase 5: Implementation

Goal: Build the feature

Execute todos systematically:

1. •Database/schema changes first (if any)
2. •Backend/API layer
3. •Frontend/UI layer
4. •Integration and wiring
5. •Tests (matching project's test patterns)

Rules:

• •One logical change at a time
• •Commit after each working milestone
• •Follow existing code patterns exactly
• •Use project's established libraries

Phase 6: Quality Review

Goal: Verify the implementation

Check against:

• •Original requirements from Phase 1
• •Existing patterns (does it match the codebase style?)
• •Error handling (does it follow project conventions?)
• •Security (authentication, authorisation, input validation)
• •Performance (no obvious N+1 queries, proper caching)

If visual changes, use available tools:

• •Firecrawl: scrape with screenshot format for quick captures
• •Playwright: E2E testing and detailed visual regression
• •Chrome tabs: colour picker, console, network (requires claude --chrome session)

Output: Verified, working feature

Phase 7: Summary

Goal: Document what was done

Provide:

• •What was built (feature summary)
• •Files created/modified
• •Database changes made
• •Any new environment variables needed
• •Testing instructions
• •Follow-up improvements (if any)

Usage

Invoke with feature description:

/feature-dev Add a user notification system with email and in-app alerts

Or naturally:

"I need to add a new dashboard section for analytics - can you use the feature-dev workflow?"

Key Principles

1. •Discover, don't assume - Read CLAUDE.md and explore codebase to understand actual tech stack
2. •Adapt to project - Use whatever framework, database, styling the project already has
3. •Keep context - Main conversation remembers everything, sub-agents report back
4. •Follow patterns - New code should look like it belongs in the existing codebase
5. •Ask smart questions - Only what you can't determine from existing code
6. •Incremental commits - Working milestones, not one big commit