$npx -y skills add github/awesome-copilot --skill breakdown-feature-implementationPrompt for creating detailed feature implementation plans, following Epoch monorepo structure.
| 1 | # Feature Implementation Plan Prompt |
| 2 | |
| 3 | ## Goal |
| 4 | |
| 5 | 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. |
| 6 | Review the provided context and output a thorough, comprehensive implementation plan. |
| 7 | **Note:** Do NOT write code in output unless it's pseudocode for technical situations. |
| 8 | |
| 9 | ## Output Format |
| 10 | |
| 11 | 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`. |
| 12 | |
| 13 | ### File System |
| 14 | |
| 15 | Folder and file structure for both front-end and back-end repositories following Epoch's monorepo structure: |
| 16 | |
| 17 | ``` |
| 18 | apps/ |
| 19 | [app-name]/ |
| 20 | services/ |
| 21 | [service-name]/ |
| 22 | packages/ |
| 23 | [package-name]/ |
| 24 | ``` |
| 25 | |
| 26 | ### Implementation Plan |
| 27 | |
| 28 | For each feature: |
| 29 | |
| 30 | #### Goal |
| 31 | |
| 32 | Feature goal described (3-5 sentences) |
| 33 | |
| 34 | #### Requirements |
| 35 | |
| 36 | - Detailed feature requirements (bulleted list) |
| 37 | - Implementation plan specifics |
| 38 | |
| 39 | #### Technical Considerations |
| 40 | |
| 41 | ##### System Architecture Overview |
| 42 | |
| 43 | Create a comprehensive system architecture diagram using Mermaid that shows how this feature integrates into the overall system. The diagram should include: |
| 44 | |
| 45 | - **Frontend Layer**: User interface components, state management, and client-side logic |
| 46 | - **API Layer**: tRPC endpoints, authentication middleware, input validation, and request routing |
| 47 | - **Business Logic Layer**: Service classes, business rules, workflow orchestration, and event handling |
| 48 | - **Data Layer**: Database interactions, caching mechanisms, and external API integrations |
| 49 | - **Infrastructure Layer**: Docker containers, background services, and deployment components |
| 50 | |
| 51 | 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. |
| 52 | |
| 53 | - **Technology Stack Selection**: Document choice rationale for each layer |
| 54 | ``` |
| 55 | |
| 56 | - **Technology Stack Selection**: Document choice rationale for each layer |
| 57 | - **Integration Points**: Define clear boundaries and communication protocols |
| 58 | - **Deployment Architecture**: Docker containerization strategy |
| 59 | - **Scalability Considerations**: Horizontal and vertical scaling approaches |
| 60 | |
| 61 | ##### Database Schema Design |
| 62 | |
| 63 | Create an entity-relationship diagram using Mermaid showing the feature's data model: |
| 64 | |
| 65 | - **Table Specifications**: Detailed field definitions with types and constraints |
| 66 | - **Indexing Strategy**: Performance-critical indexes and their rationale |
| 67 | - **Foreign Key Relationships**: Data integrity and referential constraints |
| 68 | - **Database Migration Strategy**: Version control and deployment approach |
| 69 | |
| 70 | ##### API Design |
| 71 | |
| 72 | - Endpoints with full specifications |
| 73 | - Request/response formats with TypeScript types |
| 74 | - Authentication and authorization with Stack Auth |
| 75 | - Error handling strategies and status codes |
| 76 | - Rate limiting and caching strategies |
| 77 | |
| 78 | ##### Frontend Architecture |
| 79 | |
| 80 | ###### Component Hierarchy Documentation |
| 81 | |
| 82 | The component structure will leverage the `shadcn/ui` library for a consistent and accessible foundation. |
| 83 | |
| 84 | **Layout Structure:** |
| 85 | |
| 86 | ``` |
| 87 | Recipe Library Page |
| 88 | ├── Header Section (shadcn: Card) |
| 89 | │ ├── Title (shadcn: Typography `h1`) |
| 90 | │ ├── Add Recipe Button (shadcn: Button with DropdownMenu) |
| 91 | │ │ ├── Manual Entry (DropdownMenuItem) |
| 92 | │ │ ├── Import from URL (DropdownMenuItem) |
| 93 | │ │ └── Import from PDF (DropdownMenuItem) |
| 94 | │ └── Search Input (shadcn: Input with icon) |
| 95 | ├── Main Content Area (flex container) |
| 96 | │ ├── Filter Sidebar (aside) |
| 97 | │ │ ├── Filter Title (shadcn: Typography `h4`) |
| 98 | │ │ ├── Category Filters (shadcn: Checkbox group) |
| 99 | │ │ ├── Cuisine Filters (shadcn: Checkbox group) |
| 100 | │ │ └── Difficulty Filters (shadcn: RadioGroup) |
| 101 | │ └── Recipe Grid (main) |
| 102 | │ └── Recipe Card (shadcn: Card) |
| 103 | │ ├── Recipe Image (img) |
| 104 | │ ├── Recipe Title (shadcn: Typography `h3`) |
| 105 | │ ├── Recipe Tags (shadcn: Badge) |
| 106 | │ └── Quick Actions (shadcn: Button - View, Edit) |
| 107 | ``` |
| 108 | |
| 109 | - **State Flow Diagram**: Component state management using Mermaid |
| 110 | - Reusable component library specifications |
| 111 | - State management patterns with Zustand/React Query |
| 112 | - TypeScript interfaces and types |
| 113 | |
| 114 | ##### Security Performance |
| 115 | |
| 116 | - Authentication/authorization requirements |
| 117 | - Data validation and sanitization |
| 118 | - Performance optimization strategies |
| 119 | - Caching mechanisms |
| 120 | |
| 121 | ## Context Template |
| 122 | |
| 123 | - **Feature PRD:** [The content of the Feature PRD markdown file] |