Back to Skills

Feature Dev

Automate 7-phase feature development with specialized agents (code-explorer, code-architect, code-reviewer). Use for multi-file features, architectural decisions, or encountering ambiguous requirements, integration patterns, design approach errors.

agent
By secondsky
17928Updated 1 day agoTypeScriptMIT

Skill Content

# Feature Development Workflow

A comprehensive, structured workflow for feature development with specialized agents for codebase exploration, architecture design, and quality review.

## Quick Start

Launch the guided feature development workflow:

```bash
/feature-dev Add user authentication with OAuth
```

Or interactively:

```bash
/feature-dev
```

The workflow will guide you through 7 distinct phases automatically.

## Overview

Building features requires more than just writing code. This skill provides a systematic approach that:
- **Understands the codebase** before making changes
- **Asks clarifying questions** to resolve ambiguities
- **Designs thoughtfully** with multiple architecture options
- **Reviews for quality** after implementation

## The 7-Phase Workflow

### Phase 1: Discovery
**Goal**: Understand what needs to be built

- Clarifies unclear feature requests
- Identifies problem, constraints, and requirements
- Summarizes understanding and confirms with user

**Example**:
```
User: /feature-dev Add caching
Agent: Let me understand what you need...
       - What should be cached? (API responses, computed values, etc.)
       - What are your performance requirements?
       - Do you have a preferred caching solution?
```

### Phase 2: Codebase Exploration
**Goal**: Understand relevant existing code and patterns

- Launches 2-3 `code-explorer` agents in parallel
- Explores similar features, architecture, UI patterns
- Reads all identified files for deep understanding
- Presents comprehensive summary of findings

**Agents launched**:
- "Find features similar to [feature] and trace implementation"
- "Map the architecture and abstractions for [area]"
- "Analyze current implementation of [related feature]"

**Example output**:
```
Found similar features:
- User authentication (src/auth/): Uses JWT tokens, middleware pattern
- Session management (src/session/): Redis-backed, 24hr expiry

Key files:
- src/auth/AuthService.ts:45 - Core authentication logic
- src/middleware/authMiddleware.ts:12 - Request authentication
```

### Phase 3: Clarifying Questions
**Goal**: Fill in gaps and resolve all ambiguities

- Reviews codebase findings and feature request
- Identifies underspecified aspects (edge cases, error handling, integration points)
- Presents organized list of questions
- **Waits for answers before proceeding**

**Example**:
```
Before designing, I need to clarify:

1. OAuth provider: Which providers? (Google, GitHub, custom?)
2. User data: Store OAuth tokens or just profile?
3. Existing auth: Replace or add alongside current auth?
4. Sessions: Integrate with existing session management?
5. Error handling: How to handle OAuth failures?
```

**Critical**: Ensures nothing is ambiguous before design begins.

### Phase 4: Architecture Design
**Goal**: Design multiple implementation approaches

- Launches 2-3 `code-architect` agents with different focuses:
  - **Minimal changes**: Smallest change, maximum reuse
  - **Clean architecture**: Maintainability, elegant abstractions
  - **Pragmatic balance**: Speed + quality
- Presents comparison with trade-offs and recommendation
- **Asks which approach to use**

**Example output**:
```
Approach 1: Minimal Changes
- Extend existing AuthService with OAuth methods
Pros: Fast, low risk
Cons: Couples OAuth to existing auth

Approach 2: Clean Architecture
- New OAuthService with dedicated interface
Pros: Clean separation, testable
Cons: More files, more refactoring

Approach 3: Pragmatic Balance
- New OAuthProvider abstraction
Pros: Balanced complexity and cleanliness
Cons: Some coupling remains

Recommendation: Approach 3 - clean boundaries without excessive refactoring
```

### Phase 5: Implementation
**Goal**: Build the feature

- **Waits for explicit approval** before starting
- Reads all relevant files from previous phases
- Implements following chosen architecture
- Follows codebase conventions strictly
- Updates todos to track progress

### Phase 6: Quality Review
**Goal**: Ensure code is simple, DRY, elegant, and functionally correct

- Launches 3 `code-reviewer` agents in parallel:
  - **Simplicity/DRY/Elegance**: Code quality
  - **Bugs/Correctness**: Functional correctness
  - **Conventions/Abstractions**: Project standards
- Consolidates findings and identifies high severity issues
- **Asks what to do**: Fix now, fix later, or proceed as-is

**Example output**:
```
High Priority Issues:
1. Missing error handling in OAuth callback (src/auth/oauth.ts:67)
2. Memory leak: OAuth state not cleaned up (src/auth/oauth.ts:89)

Medium Priority:
1. Could simplify token refresh logic (src/auth/oauth.ts:120)

What would you like to do?
```

### Phase 7: Summary
**Goal**: Document what was accomplished

- Marks all todos complete
- Summarizes what was built, key decisions, files modified
- Suggests next steps

## Specialized Agents

### code-explorer
**Purpose**: Deeply analyzes existing codebase features by tracing execution paths

**Focus**:
- Entry points and call chains
- Data flow and transformations
- Architecture layers and patterns
- Implementation details

**Output**:
- Entry points with file:line references
- Step-by-step execution flow
- Key components and responsibilities
- Essential files to read

**Triggered**: Automatically in Phase 2, or manually

### code-architect
**Purpose**: Designs feature architectures and implementation blueprints

**Focus**:
- Codebase pattern analysis
- Architecture decisions
- Component design
- Implementation roadmap

**Output**:
- Patterns and conventions found
- Architecture decision with rationale
- Complete component design
- Implementation map with build sequence

**Triggered**: Automatically in Phase 4, or manually

### code-reviewer
**Purpose**: Reviews code for bugs, quality issues, and project conventions

**Focus**:
- Project guideline compliance (CLAUDE.md)
- Bug detection
- Code quality issues
- Confidence-based filtering (β‰₯80% confidence only)

**Output**:
- Critical issues (confidence 75-100)
- Important issues (confidence 50-74)
- Specific fixes with file:line references

**Triggered**: Automatically in Phase 6, or manually

## Usage Patterns

### Full workflow (recommended for new features)
```bash
/feature-dev Add rate limiting to API endpoints
```

### Manual agent invocation

**Explore a feature**:
```
"Launch code-explorer to trace how authentication works"
```

**Design architecture**:
```
"Launch code-architect to design the caching layer"
```

**Review code**:
```
"Launch code-reviewer to check my recent changes"
```

## When to Use

**Use for**:
- New features that touch multiple files
- Features requiring architectural decisions
- Complex integrations with existing code
- Features where requirements are somewhat unclear

**Don't use for**:
- Single-line bug fixes
- Trivial changes
- Well-defined simple tasks
- Urgent hotfixes

## Best Practices

1. **Use the full workflow for complex features**: The 7 phases ensure thorough planning
2. **Answer clarifying questions thoughtfully**: Phase 3 prevents future confusion
3. **Choose architecture deliberately**: Phase 4 gives options for a reason
4. **Don't skip code review**: Phase 6 catches issues before production
5. **Read the suggested files**: Phase 2 identifies key filesβ€”read them for context

## Common Issues

### Agents take too long
**Cause**: Normal for large codebases
**Solution**: Agents run in parallel when possible. Thoroughness pays off in better understanding.

### Too many clarifying questions
**Cause**: Feature request too vague
**Solution**: Be more specific in initial request. Provide context about constraints upfront.

### Architecture options overwhelming
**Cause**: Multiple valid approaches presented
**Solution**: Trust the recommendation (based on codebase analysis). Pick pragmatic option when in doubt.

## Requirements

- Claude Code installed
- Git repository (for code review)
- Existing codebase (workflow learns from existing patterns)

## Tips

- **Be specific in feature request**: More detail = fewer clarifying questions
- **Trust the process**: Each phase builds on the previous one
- **Review agent outputs**: Agents provide valuable codebase insights
- **Don't skip phases**: Each phase serves a purpose
- **Use for learning**: Exploration phase teaches you about your own codebase

## Verification Checklist

After using the workflow:

- [ ] All 7 phases completed successfully
- [ ] Clarifying questions answered in Phase 3
- [ ] Architecture approach selected in Phase 4
- [ ] Implementation approved before Phase 5 started
- [ ] Code review findings addressed in Phase 6
- [ ] Summary generated with next steps in Phase 7
- [ ] Feature works as expected
- [ ] Code follows project conventions

## References

For detailed workflow documentation, see `README.md`

For agent specifications, see:
- `agents/code-explorer.md`
- `agents/code-architect.md`
- `agents/code-reviewer.md`

For slash command implementation, see `commands/feature-dev.md`

How to use

  1. Copy the skill content above
  2. Create a .claude/skills directory in your project
  3. Save as .claude/skills/claude-skills-feature-dev.md
  4. Use /claude-skills-feature-dev in Claude Code to invoke this skill

Claude Code Skills Collection

170 production-ready skills for Claude Code CLI

Version 3.3.1 | Last Updated: 2026-05-14

<div align="center">

πŸ”Œ Platform Support

This repository uses Claude Plugin Patterns β€” natively supported by:

PlatformStatusNotes
Claude Codeβœ… NativeFull marketplace support
Factory Droidβœ… NativeFull marketplace support
</div> **For all other Platforms like opencode, codex and others, you can use https://github.com/enulus/OpenPackage **

A curated collection of battle-tested skills for building modern web applications with Cloudflare, AI integrations, React, Tailwind, and more.

PS: if skills.sh warns about any skill: Their scan process is a outdated LLM which flags newest versions pins (like in ZOD) as non existent and by that potentially malicous.


Quick Start

Marketplace Installation (Recommended)

# Add the marketplace
/plugin marketplace add https://github.com/secondsky/claude-skills

# Install individual skills as needed
/plugin install cloudflare-d1@claude-skills
/plugin install tailwind-v4-shadcn@claude-skills
/plugin install ai-sdk-core@claude-skills

See MARKETPLACE.md for complete catalog of all 170 skills.

Bulk Installation (Contributors)

# Clone the repository
git clone https://github.com/secondsky/claude-skills.git
cd claude-skills

# Install all 170 skills at once
./scripts/install-all.sh

# Or install individual skills
./scripts/install-skill.sh cloudflare-d1

Repository Structure

This repository contains 170 production-tested skills for Claude Code, each focused on a specific technology or capability.

Individual Skills: Each skill is a standalone unit with:

  • SKILL.md - Core knowledge and guidance
  • Templates - Working code examples
  • References - Extended documentation
  • Scripts - Helper utilities

Installation Options:

  1. Individual - Install only the skills you need via marketplace
  2. Bulk - Install all 170 skills using ./scripts/install-all.sh

Available Skills (170 Individual Skills)

Each skill is individually installable. Install only the skills you need.

Full Catalog: See MARKETPLACE.md for detailed listings.

Categories

CategorySkillsExamples
tooling29turborepo, plan-interview, code-review
frontend26nuxt-v4, nuxt-v5, tailwind-v4-shadcn, tanstack-query, nuxt-studio, maz-ui, threejs
cloudflare21cloudflare-d1, cloudflare-workers-ai, cloudflare-agents
ai20openai-agents, claude-api, ai-sdk-core
api16api-design-principles, graphql-implementation
web10hono-routing, firecrawl-scraper, web-performance
mobile7swift-best-practices, react-native-app, react-native-skills
database6drizzle-orm-d1, neon-vercel-postgres, supabase-postgres-best-practices
security6csrf-protection, access-control-rbac
auth4better-auth
testing4vitest-testing, playwright-testing
design4design-review, design-system-creation
woocommerce4woocommerce-backend-dev
cms4hugo, sveltia-cms, wordpress-plugin-core
architecture3microservices-patterns, architecture-patterns
data3sql-query-optimization, recommendation-engine
seo2seo-optimizer, seo-keyword-cluster-builder
documentation1technical-specification

How It Works

Auto-Discovery

Claude Code automatically checks ~/.claude/skills/ for relevant skills before planning tasks:

User: "Set up a Cloudflare Worker with D1 database"
           ↓
Claude: [Checks skills automatically]
           ↓
Claude: "Found cloudflare-d1 skills.
         These prevent 12 documented errors. Use them?"
           ↓
User: "Yes"
           ↓
Result: Production-ready setup, zero errors, ~65% token savings

Note: Due to token limits, not all skills may be visible at once. See ⚠️ Important: Token Limits below.

Skill Structure

Each skill includes:

skills/[skill-name]/
β”œβ”€β”€ SKILL.md              # Complete documentation
β”œβ”€β”€ .claude-plugin/
β”‚   └── plugin.json       # Plugin metadata
β”œβ”€β”€ templates/            # Ready-to-copy templates
β”œβ”€β”€ scripts/              # Automation scripts
└── references/           # Extended documentation

Recent Additions

May 2026

Supply Chain Security (cross-cutting):

  • dependency-upgrade expanded with Socket CLI integration β€” proactive malicious package detection, typosquatting alerts, and CI/CD security gates. New 418-line reference guide, 2 GitHub Actions templates, and expanded supply chain security comparison (3 tools)
  • 31 skills now include "Secure Installation" guidance β€” contextually-tailored security sections across all high-risk skill categories (scaffolding, MCP/agent SDKs, multi-provider installs, Docker, CI/CD). Covers 8 Bun skills, 5 Nuxt skills, 6 Cloudflare skills, 4 AI/agent skills, and 8 frontend/tooling skills
  • Supply chain security is now a first-class cross-cutting concern woven into the skill collection β€” not a standalone topic

February - April 2026

Full-Stack Frameworks:

  • nuxt-v5 (v1.0.0) - Full Nuxt 5 support with 4 skills (core, data, server, production), 3 diagnostic agents, and interactive setup wizard
  • supabase-postgres-best-practices - 30 Postgres optimization rules from Supabase across 8 categories
  • threejs (v1.0.0) - 3D web graphics: scenes, geometries, shaders, animations, post-processing

Infrastructure:

  • JSON schema validation - Automated plugin.json validation with CI support
  • GitHub issue templates - Skill-specific issue templates for bug reports, feature requests, and submissions

Plugin Enhancements:

  • mutation-testing - Added Bun native runner support
  • dependency-upgrade - Added supply chain security content

December 2025 - January 2026

Frontend Expansion:

  • nuxt-studio (v1.0.0) - Visual CMS for Nuxt Content with live preview, OAuth auth, and R2 storage integration
  • maz-ui (v1.0.0) - 50+ Vue/Nuxt components with theming, i18n, form generation, and 14 composables

Developer Workflow:

  • plan-interview (v2.0.0) - Adaptive interview-driven spec generation with autonomous quality review
  • turborepo (v2.8.0) - Updated to official Vercel skill with enhanced monorepo build optimization

Mobile Development:

  • react-native-skills (v1.0.0) - React Native & Expo best practices with performance optimization patterns

Enhanced Authentication:

  • better-auth (v2.2.0) - Expanded to 18 framework integrations with 30+ authentication plugins

⚠️ Important: Token Limits

Skill Visibility Constraint

Claude Code has a 15,000 character limit for the total size of skill descriptions in the system prompt. This limit also applies to commands and agents.

What this means:

  • Not all 170 skills may be visible in Claude's context at once
  • Skills are loaded based on relevance and available token budget
  • You can verify how many skills Claude currently sees by asking: "How many skills do you see in your system prompt?"

Checking Visible Skills

To verify which skills are currently loaded:

# Ask Claude Code directly
"Check what skills/plugins you see in your system prompt"

Claude will report something like: "85 of 170 skills visible due to token limits"

Workaround: Increase Token Budget

You can double the headroom for skill descriptions by setting an environment variable:

# Increase limit to 30,000 characters
export SLASH_COMMAND_TOOL_CHAR_BUDGET=30000

# Then launch Claude Code
claude

This gives you approximately 2x more skill visibility in the system prompt.

Note: This is a temporary workaround. The Claude Code team is working on better solutions for skill discovery and loading.


Token Efficiency

MetricManual SetupWith SkillsSavings
Average Tokens12,000-15,0004,000-5,000~65%
Typical Errors2-4 per service0 (prevented)100%
Setup Time2-4 hours15-45 minutes~80%

Across all 170 skills: 400+ documented errors prevented.


Contributing

Prerequisites for Contributors

Install the official plugin development toolkit:

/plugin install plugin-dev@claude-code-marketplace

This provides:

  • /plugin-dev:create-plugin command (8-phase guided workflow)
  • 7 comprehensive skills (hooks, MCP, structure, agents, commands, skills)
  • 2 specialized agents (agent-creator, plugin-validator)

Quick Steps

  1. Create skill directory in plugins/
  2. Add SKILL.md with YAML frontmatter
  3. Run ./scripts/sync-plugins.sh
  4. Submit pull request

See CONTRIBUTING.md and PLUGIN_DEV_BEST_PRACTICES.md for detailed guidelines.


Documentation

DocumentPurpose
START_HERE.mdStart here! Quick navigation guide
PLUGIN_DEV_BEST_PRACTICES.mdRepository-specific best practices (marketplace, budget, quality)
MARKETPLACE.mdFull skill catalog and installation guide
MARKETPLACE_MANAGEMENT.mdTechnical infrastructure (plugin.json, scripts, validation)
CLAUDE.mdProject context and development standards
CONTRIBUTING.mdContribution guidelines

Links


Built with ❀️ by Claude Skills Maintainers

View source on GitHub