Use when the user wants to create project specs, design systems, or feature plans. Triggers on "create spec", "plan project", "design system", "plan feature", or "write specification".
/plugin marketplace add Linaqruf/cc-plugins/plugin install project-spec@cc-pluginsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
examples/api-spec.mdexamples/cli-spec.mdexamples/design-spec.mdexamples/feature-spec.mdexamples/library-spec.mdexamples/web-app-spec.mdreferences/interview-questions.mdreferences/output-template.mdGenerate comprehensive project specification documents through structured interviews. This skill transforms vague project ideas into actionable specifications that serve as development guidelines.
Project specifications front-load critical decisions, reducing ambiguity and scope creep during development. A well-structured spec enables Claude Code to understand project context throughout the development lifecycle.
Conduct interviews using AskUserQuestion with 2-4 questions per interaction. Avoid overwhelming with too many questions at once.
Essential Questions:
Problem & Purpose
Target Users
Core Features (MVP)
Future Scope
Inspirations
Essential Questions:
Tech Stack
Deployment
Integrations
Performance
Security
Essential Questions:
Team & Timeline
Existing Code
Budget
After gathering requirements, fetch relevant documentation using Context7 MCP:
Example workflow:
1. User chooses Next.js + Prisma + PostgreSQL
2. Resolve: "next.js", "prisma", "postgresql"
3. Query: Setup guides, common patterns, integration tips
4. Include relevant insights in spec
Generate project_spec.md in the project root with all sections. Use the template in references/output-template.md as the base structure.
Overview Section:
Product Requirements:
Technical Architecture:
File Structure:
Development Phases:
Open Questions:
Adapt the interview and output based on project type:
Focus on: UI/UX, state management, routing, authentication, database schema
See: examples/web-app-spec.md
Focus on: Commands/subcommands, argument parsing, output formats, configuration
See: examples/cli-spec.md
Focus on: Endpoints, authentication, rate limiting, documentation, versioning
See: examples/api-spec.md
Focus on: Public API, documentation, testing, publishing, versioning
See: examples/library-spec.md
For detailed question banks and templates:
references/interview-questions.md - Complete question bank by categoryreferences/output-template.md - Full project_spec.md templateWorking specification examples:
examples/web-app-spec.md - Web application specificationexamples/cli-spec.md - CLI tool specificationexamples/api-spec.md - REST API specificationexamples/library-spec.md - Library/package specificationexamples/design-spec.md - Design system specificationexamples/feature-spec.md - Feature specificationFor frontend projects, include a Design System section in the specification. Use the /design command for dedicated design interviews.
Essential Questions:
Visual Identity
Component Library
Layout & Responsiveness
Accessibility
Interaction Patterns
For web applications, include in project_spec.md:
See: references/output-template.md for the full Design System template.
For detailed design documentation, use the /design command to generate a separate design_spec.md with:
See: examples/design-spec.md for a complete example.
The frontend-design skill can implement components based on the design specification:
project_spec.md with /spec commanddesign_spec.md with /design command (optional)frontend-design skill to implement components following the specThe design specification provides:
For adding new functionality to existing projects, use the /feature command to generate a focused feature_spec.md.
Phase 1: Feature Definition
Phase 2: Scope & Requirements
Phase 3: Technical Approach
Phase 4: Edge Cases & Testing
The generated feature_spec.md includes:
See: examples/feature-spec.md for a complete example.
The feature-dev skill provides specialized agents for feature implementation:
/feature to create feature_spec.mdcode-explorer agent to analyze relevant codebase patternscode-architect agent for detailed implementation blueprintcode-reviewer agent to verify implementation| Agent | Purpose | When to Use |
|---|---|---|
code-explorer | Analyze existing patterns | Before implementation, understand codebase |
code-architect | Design implementation | After spec, before coding |
code-reviewer | Review implementation | After coding, before PR |
After creating a feature spec, suggest:
Feature spec created! Next steps:
1. Use feature-dev:code-explorer to analyze existing patterns
2. Use feature-dev:code-architect to design implementation
3. Implement following the plan
4. Use feature-dev:code-reviewer to verify
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.