spec-driven-dev
Write specifications before code — the agent creates detailed technical specs, validates them, then implements. Use when someone asks to "write a spec first", "plan before coding", "create a technical design document", "spec-driven development", "Kiro-style development", "validate my idea before building", "write an RFC", or "create an architecture doc before implementation". Covers requirement extraction, technical spec templates, validation checklists, implementation plans, and spec-to-code workflows.
What this skill does
# Spec-Driven Development
## Overview
Most AI coding failures happen because the agent starts coding before understanding the problem. Spec-driven development reverses the flow: first write a detailed specification that describes what to build, why, and how — then validate the spec — then implement. The spec becomes both the contract and the test oracle.
## When to Use
- Starting a new feature and want to think before coding
- Building something complex where wrong assumptions are expensive
- Working in a team where others need to review the design before implementation
- The agent keeps building the wrong thing because requirements are ambiguous
- Creating RFCs or architecture decision records (ADRs) for the team
## Instructions
### The Spec-First Workflow
```
User Request → Extract Requirements → Write Spec → Validate Spec → Implement → Verify Against Spec
↑ |
└── Revise ──────┘
```
### Step 1: Requirement Extraction
Before writing anything, extract structured requirements from the user's request.
```typescript
// requirements.ts — Extract structured requirements from natural language
/**
* Turns vague requests into concrete, testable requirements.
* Each requirement gets a priority, acceptance criteria,
* and explicit out-of-scope markers.
*/
interface Requirement {
id: string; // REQ-001, REQ-002, etc.
title: string;
description: string;
priority: "must" | "should" | "could" | "wont"; // MoSCoW
acceptanceCriteria: string[]; // Testable conditions
outOfScope?: string[]; // Explicitly excluded
}
interface RequirementsDoc {
projectName: string;
overview: string;
stakeholders: string[];
requirements: Requirement[];
assumptions: string[];
constraints: string[];
openQuestions: string[]; // Things that need clarification
}
/**
* Template for requirement extraction prompt.
* The agent uses this to interview the user or analyze the request.
*/
const EXTRACTION_PROMPT = `
Analyze the following request and extract structured requirements.
For each requirement:
1. Write a clear, testable acceptance criterion
2. Assign priority (must/should/could/won't)
3. Note anything explicitly out of scope
4. Flag assumptions that need validation
5. List open questions that could change the design
Be specific. "Fast" is not a requirement. "Page loads in <2 seconds on 3G" is.
"Secure" is not a requirement. "All API endpoints require JWT auth with 15-min expiry" is.
`;
```
### Step 2: Write the Technical Spec
```markdown
# Technical Spec Template
## 1. Overview
One paragraph: what we're building and why.
## 2. Goals & Non-Goals
### Goals
- [Specific, measurable outcome]
- [Specific, measurable outcome]
### Non-Goals
- [Explicitly excluded scope]
- [Things we're NOT building]
## 3. Background
Why now? What's the current state? What's the problem?
## 4. Technical Design
### 4.1 Architecture
High-level architecture: components, data flow, integrations.
### 4.2 Data Model
Database schema, API types, key data structures.
### 4.3 API Design
Endpoints, request/response types, error handling.
### 4.4 Key Algorithms
Non-obvious logic. Decision trees. State machines.
## 5. Alternatives Considered
| Option | Pros | Cons | Decision |
|--------|------|------|----------|
| Option A | ... | ... | Chosen because... |
| Option B | ... | ... | Rejected because... |
## 6. Implementation Plan
### Phase 1: [Name] (Week 1)
- [ ] Task 1
- [ ] Task 2
### Phase 2: [Name] (Week 2)
- [ ] Task 3
- [ ] Task 4
## 7. Testing Strategy
- Unit tests for [what]
- Integration tests for [what]
- E2E tests for [what]
- Performance benchmarks for [what]
## 8. Rollout Plan
- Feature flag: [name]
- Rollout: 5% → 25% → 100%
- Rollback trigger: [metric] drops below [threshold]
## 9. Open Questions
- [ ] Question 1
- [ ] Question 2
## 10. References
- [Related RFC or design doc]
- [External documentation]
```
### Step 3: Spec Validation Checklist
Before implementation, validate the spec against this checklist:
```typescript
// validate-spec.ts — Automated spec validation
/**
* Checks a technical spec for common issues:
* - Vague requirements without acceptance criteria
* - Missing error handling considerations
* - No rollback/migration plan
* - Unaddressed security concerns
*/
interface ValidationResult {
category: string;
check: string;
status: "pass" | "warn" | "fail";
message: string;
}
export function validateSpec(spec: string): ValidationResult[] {
const results: ValidationResult[] = [];
// Completeness checks
const requiredSections = [
"Overview", "Goals", "Non-Goals", "Technical Design",
"Testing Strategy", "Rollout Plan",
];
for (const section of requiredSections) {
results.push({
category: "completeness",
check: `Has "${section}" section`,
status: spec.toLowerCase().includes(section.toLowerCase()) ? "pass" : "fail",
message: spec.includes(section) ? "Present" : `Missing "${section}" section`,
});
}
// Quality checks
const vagueTerms = ["fast", "secure", "scalable", "user-friendly", "robust", "efficient"];
for (const term of vagueTerms) {
const regex = new RegExp(`\\b${term}\\b`, "gi");
const matches = spec.match(regex);
if (matches && matches.length > 0) {
results.push({
category: "quality",
check: `No vague term: "${term}"`,
status: "warn",
message: `Found "${term}" ${matches.length} time(s) — replace with measurable criteria`,
});
}
}
// Error handling check
if (!spec.toLowerCase().includes("error") && !spec.toLowerCase().includes("failure")) {
results.push({
category: "reliability",
check: "Addresses error handling",
status: "fail",
message: "No mention of error handling or failure scenarios",
});
}
// Security check
if (!spec.toLowerCase().includes("auth") && !spec.toLowerCase().includes("security")) {
results.push({
category: "security",
check: "Addresses security",
status: "warn",
message: "No mention of authentication or security considerations",
});
}
// Migration/rollback check
if (!spec.toLowerCase().includes("rollback") && !spec.toLowerCase().includes("migration")) {
results.push({
category: "operations",
check: "Has rollback plan",
status: "warn",
message: "No rollback or migration strategy mentioned",
});
}
return results;
}
```
### Step 4: Spec-to-Code Implementation
Once the spec is validated, implement systematically — one section at a time, verifying against acceptance criteria.
```typescript
// implement.ts — Convert spec sections to implementation tasks
/**
* Breaks a spec into ordered implementation tasks.
* Each task maps to a spec section and includes
* the acceptance criteria as test assertions.
*/
interface ImplementationTask {
id: string;
specSection: string; // Which spec section this implements
description: string;
files: string[]; // Files to create or modify
acceptanceCriteria: string[]; // From the spec — become test assertions
dependencies: string[]; // Task IDs that must complete first
estimatedMinutes: number;
}
function specToTasks(spec: string): ImplementationTask[] {
// Parse spec sections and generate implementation order
// Data model first, then API, then business logic, then tests
return [
{
id: "IMPL-001",
specSection: "4.2 Data Model",
description: "Create database schema and migrations",
files: ["prisma/schema.prisma", "prisma/migrations/"],
acceptanceCriteria: [
"All tables from spec exist with correct columns and types",
"Foreign keys and indexes match spec",
"Migration runs cleanly on empty database",
],
dependencies: [],
estimatedMinutes: 30,
},
{
id: "IMRelated 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.