develop
Guides end-to-end feature development through 8 phases: discover requirements, explore codebase patterns, clarify ambiguities with the user, design architecture, implement with TDD, run multi-agent code review, validate all quality gates, and write a blog post. Use when asked to add a feature, implement a new capability, build functionality, or develop a feature end-to-end.
What this skill does
# Feature Development Workflow
Structured 8-phase process for building new features from requirement gathering through documentation. Each phase produces a concrete output that feeds the next.
## Overview
1. **Discover** - Understand requirements and context
2. **Explore** - Analyze existing codebase patterns
3. **Clarify** - Resolve ambiguities with user input
4. **Design** - Create architecture with specialized agents
5. **Implement** - Build with TDD and quality practices
6. **Review** - Multi-agent quality review with confidence scoring
7. **Validate** - Run all verification hooks and summarize
8. **Document** - Write blog post announcing the feature
---
## Phase 1: Discover
### Understand requirements and gather context
**Objective**: Establish clear understanding of what needs to be built and why.
1. **Review the feature request**:
- What is the user-facing goal?
- What problem does this solve?
- What are the acceptance criteria?
2. **Identify impacted areas**:
- Which parts of the codebase will change?
- What existing features might be affected?
- Are there related issues or PRs?
3. **Check for similar features**:
```bash
# Search for similar implementations
grep -r "similar_feature_name" .
```
4. **Review project documentation**:
- Check CLAUDE.md, CONTRIBUTING.md for standards
- Review architecture docs if available
- Identify any constraints or requirements
**Output**: Clear problem statement and high-level approach.
---
## Phase 2: Explore (Parallel Agent Execution)
### Analyze codebase with specialized agents
**Objective**: Understand existing patterns and identify integration points.
**Launch multiple Explore agents in PARALLEL** (single message with multiple Task calls):
1. **Code Explorer**: Map existing features
- Find entry points and call chains
- Identify data flow and transformations
- Document current architecture
2. **Pattern Analyzer**: Identify conventions
- How are similar features implemented?
- What testing patterns are used?
- What naming conventions exist?
3. **Dependency Mapper**: Understand relationships
- What modules will be affected?
- What are the integration points?
- Are there circular dependencies to avoid?
**Consolidation**: Synthesize findings from all agents into a cohesive understanding.
**Output**: Comprehensive map of existing codebase patterns and integration points.
---
## Phase 3: Clarify (Human Decision Point)
### Resolve ambiguities before implementation
**Objective**: Get user input on unclear requirements and design choices.
**Use AskUserQuestion tool** to resolve:
1. **Architecture decisions**:
- Which approach should we take? (if multiple valid options)
- What are the trade-offs? (performance vs. simplicity)
2. **Scope clarifications**:
- Should this include X feature?
- What's the priority if time is limited?
3. **Integration choices**:
- Should we extend existing module or create new one?
- How should this integrate with system Y?
**IMPORTANT**: Do not proceed with assumptions. Get explicit user answers.
**Output**: Clear, unambiguous requirements with user-approved approach.
---
## Phase 4: Design (Parallel Agent Execution)
### Create architecture with specialized agents
**Objective**: Design the implementation before coding.
**Select appropriate specialized agent(s)** based on feature type:
- **Frontend feature?** → `frontend:presentation-engineer`
- **Backend API?** → `backend:api-designer`
- **Database changes?** → `databases:database-designer`
- **Complex system?** → `architecture:solution-architect`
**Launch agents in PARALLEL** for multi-disciplinary features:
- Frontend + Backend agents simultaneously
- Include `security:security-engineer` for sensitive features
- Include `performance:performance-engineer` for high-traffic features
**Agent responsibilities**:
- Define module structure and file organization
- Specify interfaces and contracts
- Identify testing strategy
- Document key decisions and trade-offs
**Consolidation**: Review all design proposals, resolve conflicts, select final approach.
**Output**: Detailed implementation plan with module structure and interfaces.
---
## Phase 5: Implement (TDD with Quality Enforcement)
### Build the feature using test-driven development
**Objective**: Implement the designed solution with quality practices.
**Apply TDD cycle** (use `tdd:test-driven-development` skill):
```
For each component:
1. Write failing test (Red)
2. Implement minimum code to pass (Green)
3. Refactor for quality (Refactor)
4. Repeat
```
**Implementation guidelines**:
- ✅ Start with tests, not implementation
- ✅ Follow existing codebase patterns (from Phase 2)
- ✅ Apply SOLID principles (`han-core:solid-principles` skill)
- ✅ Keep it simple (KISS, YAGNI)
- ✅ Apply Boy Scout Rule - leave code better than found
- ❌ Don't over-engineer
- ❌ Don't skip tests
- ❌ Don't ignore linter/type errors
**Integration**:
- Integrate incrementally (don't build everything then integrate)
- Test integration points early
- Validate against acceptance criteria continuously
**Output**: Working implementation with comprehensive tests.
---
## Phase 6: Review (Parallel Multi-Agent Review)
### Quality review with confidence-based filtering
**Objective**: Identify high-confidence issues before final validation.
**Launch review agents in PARALLEL** (single message with multiple Task calls):
1. **Code Reviewer** (han-core:code-reviewer skill):
- General quality assessment
- Confidence scoring ≥80%
- False positive filtering
2. **Security Engineer** (security:security-engineer):
- Security vulnerability scan
- Auth/authz pattern verification
- Input validation review
3. **Discipline-Specific Agent**:
- Frontend: `frontend:presentation-engineer` (accessibility, UX)
- Backend: `backend:backend-architect` (API design, scalability)
- etc.
**Review consolidation**:
- Merge findings from all agents
- De-duplicate issues
- Filter for confidence ≥80%
- Organize by: Critical (≥90%) → Important (≥80%)
**Present findings to user with options**:
```
Found 3 critical and 5 important issues.
Options:
1. Fix all issues now (recommended)
2. Fix critical only, defer important
3. Review findings and decide per-issue
```
**Output**: Consolidated review with high-confidence issues only.
---
## Phase 7: Validate & Summarize
### Final verification and change summary
**Objective**: Ensure all quality gates pass and document the change.
**Run all validation hooks**:
```bash
# All validation plugins automatically run on Stop
# Verify: tests, linting, type checking, etc.
```
**Validation checklist**:
- [ ] All tests pass
- [ ] Linting passes
- [ ] Type checking passes
- [ ] No security vulnerabilities introduced
- [ ] Documentation updated
- [ ] No breaking changes (or properly coordinated)
**Generate change summary**:
1. **What changed**: Files modified and why
2. **How to test**: Steps to verify functionality
3. **Breaking changes**: None, or list with migration guide
4. **Follow-up tasks**: Any deferred work or tech debt
**Create TODO list** (using TaskCreate tool):
- Document any follow-up tasks
- Track deferred improvements
- Note any tech debt introduced
**Output**: Ready-to-commit feature with comprehensive documentation.
---
## Phase 8: Document (Blog Post)
### Write a blog post announcing the feature
**Objective**: Share the new feature with the community and explain its value.
**Blog post creation**:
1. **Research context** (optional):
- Use `reddit` to find related community discussions
- Identify pain points the feature addresses
- Understand how users talk about this problem
2. **Write the blog post**:
Location: `website/content/blog/{feature-slug}.md`
```markdown
---
title: "{Feature Name}: {Compelling subtitle}"
description: "{One-line description of what problem this solves}"
date: "{YRelated in Design
contribute
IncludedLocal-only OSS contribution command center. Auto-refreshes the user's in-flight PR and issue state on invoke so conversations start with full context — no need to brief Claude on what's in flight. Helps the user find issues to contribute to on GitHub, builds per-repo dossiers of what each upstream expects (CLA, DCO, branch convention, AI policy, draft-first, review bots, issue templates), runs deterministic gates before any external action so AI-assisted contributions don't reach maintainers as slop. State is markdown-only: candidate files at ~/.contribute-system/candidates/, repo dossiers at ~/.contribute-system/research/, append-only event log at ~/.contribute-system/log.jsonl. No database, no cloud calls. Use when the user asks about their PRs / issues / contributions, wants to find new work to take on, claim an issue, build/refresh a repo's dossier, or draft a Design Issue or PR. Trigger with "/contribute", "what's my PR status", "find a contribution", "claim issue X", "draft a Design Issue for Y", "refresh dossier for Z".
architectural-analysis
IncludedUser-triggered deep architectural analysis of a codebase or scoped subtree across eight modes — information architecture, data flow, integration points, UI surfaces, interaction patterns, data model, control flow, and failure modes. This skill should be used when the user asks to "diagram this codebase," "map the architecture," "show the data flow," "give me an ERD," "trace control flow," "find the integration points," "verify the layout pattern," "audit the UX architecture," or any similar request whose primary deliverable is mermaid diagrams plus cited reports under docs/architecture/. Dispatches haiku/sonnet sub-agents in parallel for per-mode exploration, then verifies every citation mechanically before any node lands in a diagram. Not for one-off prose explanations of code (use code-explanation) or for high-level system design from scratch (use system-design).
mcp
IncludedModel Context Protocol (MCP) server development and tool management. Languages: Python, TypeScript. Capabilities: build MCP servers, integrate external APIs, discover/execute MCP tools, manage multi-server configs, design agent-centric tools. Actions: create, build, integrate, discover, execute, configure MCP servers/tools. Keywords: MCP, Model Context Protocol, MCP server, MCP tool, stdio transport, SSE transport, tool discovery, resource provider, prompt template, external API integration, Gemini CLI MCP, Claude MCP, agent tools, tool execution, server config. Use when: building MCP servers, integrating external APIs as MCP tools, discovering available MCP tools, executing MCP capabilities, configuring multi-server setups, designing tools for AI agents.
react-native-skia
IncludedDesign, build, debug, and optimise high-polish animated graphics in React Native or Expo using @shopify/react-native-skia, Reanimated, and Gesture Handler. Use when the user wants canvas-driven UI, shaders, paths, rich text, image filters, sprite fields, Skottie, video frames, snapshots, web CanvasKit setup, or performance tuning for custom motion-heavy elements such as loaders, hero art, cards, charts, progress indicators, particle systems, or gesture-driven surfaces. Also use when the user asks for fluid, glow, glass, blob, parallax, 60fps/120fps, or GPU-friendly animated effects in React Native, even if they do not explicitly say "Skia". Do not use for ordinary form/layout work with standard views.
plaid
IncludedProduct Led AI Development — guides founders from idea to launched product. Six capabilities: Idea (discover a product idea), Validate (pressure-test the idea against fatal flaws, problem reality, competition, and 2-week MVP feasibility), Plan (vision intake + document generation), Design (translate image references into a design.md spec), Launch (go-to-market strategy), and Build (roadmap execution). Use when someone says "PLAID", "plaid idea", "help me find an idea", "product idea", "idea from my business", "idea from my expertise", "plaid validate", "validate my idea", "pressure-test", "is this idea good", "find fatal flaws", "validate the problem", "plan a product", "define my vision", "generate a PRD", "product strategy", "plaid design", "design from image", "translate image to design", "create design.md", "extract design tokens", "plaid launch", "go-to-market", "launch plan", "GTM strategy", "launch playbook", "plaid build", "build the app", "start building", or "execute the roadmap".
nextjs-framer-motion-animations
IncludedAdds production-safe Motion for React or Framer Motion animations to Next.js apps, including reveal, hover and tap micro-interactions, whileInView, stagger, AnimatePresence, layout and layoutId transitions, reorder, scroll-linked UI, and lightweight route-content transitions. Use when the user asks to add, refactor, or debug Motion or Framer Motion in App Router or Pages Router codebases, especially around server/client boundaries, reduced motion, LazyMotion, bundle size, hydration, or route transitions. Avoid for GSAP-style timelines, WebGL or 3D scenes, heavy scroll storytelling, or CSS-only effects unless Motion is explicitly requested.