skills/breakdown-feature-implementation/SKILL.md
Prompt for creating detailed feature implementation plans, following Epoch monorepo structure.
npx skillsauth add jyjeanne/ai-setup-forge breakdown-feature-implementationInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Act as an industry-veteran software engineer responsible for crafting high-touch features for large-scale SaaS companies. Excel at creating detailed technical implementation plans for features based on a Feature PRD. Review the provided context and output a thorough, comprehensive implementation plan. Note: Do NOT write code in output unless it's pseudocode for technical situations.
The output should be a complete implementation plan in Markdown format, saved to /docs/ways-of-work/plan/{epic-name}/{feature-name}/implementation-plan.md.
Folder and file structure for both front-end and back-end repositories following Epoch's monorepo structure:
apps/
[app-name]/
services/
[service-name]/
packages/
[package-name]/
For each feature:
Feature goal described (3-5 sentences)
Create a comprehensive system architecture diagram using Mermaid that shows how this feature integrates into the overall system. The diagram should include:
Use subgraphs to organize these layers clearly. Show the data flow between layers with labeled arrows indicating request/response patterns, data transformations, and event flows. Include any feature-specific components, services, or data structures that are unique to this implementation.
- **Technology Stack Selection**: Document choice rationale for each layer
- **Integration Points**: Define clear boundaries and communication protocols
- **Deployment Architecture**: Docker containerization strategy
- **Scalability Considerations**: Horizontal and vertical scaling approaches
##### Database Schema Design
Create an entity-relationship diagram using Mermaid showing the feature's data model:
- **Table Specifications**: Detailed field definitions with types and constraints
- **Indexing Strategy**: Performance-critical indexes and their rationale
- **Foreign Key Relationships**: Data integrity and referential constraints
- **Database Migration Strategy**: Version control and deployment approach
##### API Design
- Endpoints with full specifications
- Request/response formats with TypeScript types
- Authentication and authorization with Stack Auth
- Error handling strategies and status codes
- Rate limiting and caching strategies
##### Frontend Architecture
###### Component Hierarchy Documentation
The component structure will leverage the `shadcn/ui` library for a consistent and accessible foundation.
**Layout Structure:**
Recipe Library Page
├── Header Section (shadcn: Card)
│ ├── Title (shadcn: Typography h1)
│ ├── Add Recipe Button (shadcn: Button with DropdownMenu)
│ │ ├── Manual Entry (DropdownMenuItem)
│ │ ├── Import from URL (DropdownMenuItem)
│ │ └── Import from PDF (DropdownMenuItem)
│ └── Search Input (shadcn: Input with icon)
├── Main Content Area (flex container)
│ ├── Filter Sidebar (aside)
│ │ ├── Filter Title (shadcn: Typography h4)
│ │ ├── Category Filters (shadcn: Checkbox group)
│ │ ├── Cuisine Filters (shadcn: Checkbox group)
│ │ └── Difficulty Filters (shadcn: RadioGroup)
│ └── Recipe Grid (main)
│ └── Recipe Card (shadcn: Card)
│ ├── Recipe Image (img)
│ ├── Recipe Title (shadcn: Typography h3)
│ ├── Recipe Tags (shadcn: Badge)
│ └── Quick Actions (shadcn: Button - View, Edit)
- **State Flow Diagram**: Component state management using Mermaid
- Reusable component library specifications
- State management patterns with Zustand/React Query
- TypeScript interfaces and types
##### Security Performance
- Authentication/authorization requirements
- Data validation and sanitization
- Performance optimization strategies
- Caching mechanisms
## Context Template
- **Feature PRD:** [The content of the Feature PRD markdown file]
development
Generate breadboard circuit mockups and visual diagrams using HTML5 Canvas drawing techniques. Use when asked to create circuit layouts, visualize electronic component placements, draw breadboard diagrams, mockup 6502 builds, generate retro computer schematics, or design vintage electronics projects. Supports 555 timers, W65C02S microprocessors, 28C256 EEPROMs, W65C22 VIA chips, 7400-series logic gates, LEDs, resistors, capacitors, switches, buttons, crystals, and wires.
development
Apply lean thinking to UX: hypothesis-driven design, collaborative sketching, and rapid experiments instead of heavy deliverables. Use when the user mentions "Lean UX", "design hypothesis", "UX experiment", "collaborative design", or "outcome over output". Covers hypothesis statements, MVPs for UX, and cross-functional collaboration. For Build-Measure-Learn, see lean-startup. For usability audits, see ux-heuristics.
development
Design MVPs, validated learning experiments, and pivot-or-persevere decisions using Build-Measure-Learn. Use when the user mentions "MVP scope", "validated learning", "pivot or persevere", "vanity metrics", or "test assumptions". Covers innovation accounting and actionable metrics. For 5-day prototype testing, see design-sprint. For customer motivation analysis, see jobs-to-be-done.
tools
Instrument, trace, evaluate, and monitor LLM applications and AI agents with LangSmith. Use when setting up observability for LLM pipelines, running offline or online evaluations, managing prompts in the Prompt Hub, creating datasets for regression testing, or deploying agent servers. Triggers on: langsmith, langchain tracing, llm tracing, llm observability, llm evaluation, trace llm calls, @traceable, wrap_openai, langsmith evaluate, langsmith dataset, langsmith feedback, langsmith prompt hub, langsmith project, llm monitoring, llm debugging, llm quality, openevals, langsmith cli, langsmith experiment, annotate llm, llm judge.