@theproductguy/create-mission-control 1.0.0

package/src/template/agent-os/commands/create-tasks/create-tasks.md

@@ -0,0 +1,254 @@
+I want you to create a tasks breakdown from a given spec and requirements for a new feature using the following MULTI-PHASE process and instructions.
+
+Carefully read and execute the instructions in the following files IN SEQUENCE, following their numbered file names.  Only proceed to the next numbered instruction file once the previous numbered instruction has been executed.
+
+Instructions to follow in sequence:
+
+# PHASE 1: Get Spec Requirements
+
+The FIRST STEP is to make sure you have ONE OR BOTH of these files to inform your tasks breakdown:
+- `agent-os/specs/[this-spec]/spec.md`
+- `agent-os/specs/[this-spec]/planning/requirements.md`
+
+IF you don't have ONE OR BOTH of those files in your current conversation context, then ask user to provide direction on where to you can find them by outputting the following request then wait for user's response:
+
+"I'll need a spec.md or requirements.md (or both) in order to build a tasks list.
+
+Please direct me to where I can find those.  If you haven't created them yet, you can run /shape-spec or /write-spec."
+
+# PHASE 2: Create Tasks List
+
+Now that you have the spec.md AND/OR requirements.md, please break those down into an actionable tasks list with strategic grouping and ordering, by following these instructions:
+
+# Task List Creation
+
+## Core Responsibilities
+
+1. **Analyze spec and requirements**: Read and analyze the spec.md and/or requirements.md to inform the tasks list you will create.
+2. **Plan task execution order**: Break the requirements into a list of tasks in an order that takes their dependencies into account.
+3. **Group tasks by specialization**: Group tasks that require the same skill or stack specialization together (backend, api, ui design, etc.)
+4. **Create Tasks list**: Create the markdown tasks list broken into groups with sub-tasks.
+
+## Workflow
+
+### Step 1: Analyze Spec & Requirements
+
+Read each of these files (whichever are available) and analyze them to understand the requirements for this feature implementation:
+- `agent-os/specs/[this-spec]/spec.md`
+- `agent-os/specs/[this-spec]/planning/requirements.md`
+
+Use your learnings to inform the tasks list and groupings you will create in the next step.
+
+
+### Step 2: Create Tasks Breakdown
+
+Generate `agent-os/specs/[current-spec]/tasks.md`.
+
+**Important**: The exact tasks, task groups, and organization will vary based on the feature's specific requirements. The following is an example format - adapt the content of the tasks list to match what THIS feature actually needs.
+
+```markdown
+# Task Breakdown: [Feature Name]
+
+## Overview
+Total Tasks: [count]
+
+## Task List
+
+### Database Layer
+
+#### Task Group 1: Data Models and Migrations
+**Dependencies:** None
+
+- [ ] 1.0 Complete database layer
+  - [ ] 1.1 Write 2-8 focused tests for [Model] functionality
+    - Limit to 2-8 highly focused tests maximum
+    - Test only critical model behaviors (e.g., primary validation, key association, core method)
+    - Skip exhaustive coverage of all methods and edge cases
+  - [ ] 1.2 Create [Model] with validations
+    - Fields: [list]
+    - Validations: [list]
+    - Reuse pattern from: [existing model if applicable]
+  - [ ] 1.3 Create migration for [table]
+    - Add indexes for: [fields]
+    - Foreign keys: [relationships]
+  - [ ] 1.4 Set up associations
+    - [Model] has_many [related]
+    - [Model] belongs_to [parent]
+  - [ ] 1.5 Ensure database layer tests pass
+    - Run ONLY the 2-8 tests written in 1.1
+    - Verify migrations run successfully
+    - Do NOT run the entire test suite at this stage
+
+**Acceptance Criteria:**
+- The 2-8 tests written in 1.1 pass
+- Models pass validation tests
+- Migrations run successfully
+- Associations work correctly
+
+### API Layer
+
+#### Task Group 2: API Endpoints
+**Dependencies:** Task Group 1
+
+- [ ] 2.0 Complete API layer
+  - [ ] 2.1 Write 2-8 focused tests for API endpoints
+    - Limit to 2-8 highly focused tests maximum
+    - Test only critical controller actions (e.g., primary CRUD operation, auth check, key error case)
+    - Skip exhaustive testing of all actions and scenarios
+  - [ ] 2.2 Create [resource] controller
+    - Actions: index, show, create, update, destroy
+    - Follow pattern from: [existing controller]
+  - [ ] 2.3 Implement authentication/authorization
+    - Use existing auth pattern
+    - Add permission checks
+  - [ ] 2.4 Add API response formatting
+    - JSON responses
+    - Error handling
+    - Status codes
+  - [ ] 2.5 Ensure API layer tests pass
+    - Run ONLY the 2-8 tests written in 2.1
+    - Verify critical CRUD operations work
+    - Do NOT run the entire test suite at this stage
+
+**Acceptance Criteria:**
+- The 2-8 tests written in 2.1 pass
+- All CRUD operations work
+- Proper authorization enforced
+- Consistent response format
+
+### Frontend Components
+
+#### Task Group 3: UI Design
+**Dependencies:** Task Group 2
+
+- [ ] 3.0 Complete UI components
+  - [ ] 3.1 Write 2-8 focused tests for UI components
+    - Limit to 2-8 highly focused tests maximum
+    - Test only critical component behaviors (e.g., primary user interaction, key form submission, main rendering case)
+    - Skip exhaustive testing of all component states and interactions
+  - [ ] 3.2 Create [Component] component
+    - Reuse: [existing component] as base
+    - Props: [list]
+    - State: [list]
+  - [ ] 3.3 Implement [Feature] form
+    - Fields: [list]
+    - Validation: client-side
+    - Submit handling
+  - [ ] 3.4 Build [View] page
+    - Layout: [description]
+    - Components: [list]
+    - Match mockup: `planning/visuals/[file]`
+  - [ ] 3.5 Apply base styles
+    - Follow existing design system
+    - Use variables from: [style file]
+  - [ ] 3.6 Implement responsive design
+    - Mobile: 320px - 768px
+    - Tablet: 768px - 1024px
+    - Desktop: 1024px+
+  - [ ] 3.7 Add interactions and animations
+    - Hover states
+    - Transitions
+    - Loading states
+  - [ ] 3.8 Ensure UI component tests pass
+    - Run ONLY the 2-8 tests written in 3.1
+    - Verify critical component behaviors work
+    - Do NOT run the entire test suite at this stage
+
+**Acceptance Criteria:**
+- The 2-8 tests written in 3.1 pass
+- Components render correctly
+- Forms validate and submit
+- Matches visual design
+
+### Testing
+
+#### Task Group 4: Test Review & Gap Analysis
+**Dependencies:** Task Groups 1-3
+
+- [ ] 4.0 Review existing tests and fill critical gaps only
+  - [ ] 4.1 Review tests from Task Groups 1-3
+    - Review the 2-8 tests written by database-engineer (Task 1.1)
+    - Review the 2-8 tests written by api-engineer (Task 2.1)
+    - Review the 2-8 tests written by ui-designer (Task 3.1)
+    - Total existing tests: approximately 6-24 tests
+  - [ ] 4.2 Analyze test coverage gaps for THIS feature only
+    - Identify critical user workflows that lack test coverage
+    - Focus ONLY on gaps related to this spec's feature requirements
+    - Do NOT assess entire application test coverage
+    - Prioritize end-to-end workflows over unit test gaps
+  - [ ] 4.3 Write up to 10 additional strategic tests maximum
+    - Add maximum of 10 new tests to fill identified critical gaps
+    - Focus on integration points and end-to-end workflows
+    - Do NOT write comprehensive coverage for all scenarios
+    - Skip edge cases, performance tests, and accessibility tests unless business-critical
+  - [ ] 4.4 Run feature-specific tests only
+    - Run ONLY tests related to this spec's feature (tests from 1.1, 2.1, 3.1, and 4.3)
+    - Expected total: approximately 16-34 tests maximum
+    - Do NOT run the entire application test suite
+    - Verify critical workflows pass
+
+**Acceptance Criteria:**
+- All feature-specific tests pass (approximately 16-34 tests total)
+- Critical user workflows for this feature are covered
+- No more than 10 additional tests added when filling in testing gaps
+- Testing focused exclusively on this spec's feature requirements
+
+## Execution Order
+
+Recommended implementation sequence:
+1. Database Layer (Task Group 1)
+2. API Layer (Task Group 2)
+3. Frontend Design (Task Group 3)
+4. Test Review & Gap Analysis (Task Group 4)
+```
+
+**Note**: Adapt this structure based on the actual feature requirements. Some features may need:
+- Different task groups (e.g., email notifications, payment processing, data migration)
+- Different execution order based on dependencies
+- More or fewer sub-tasks per group
+
+## Important Constraints
+
+- **Create tasks that are specific and verifiable**
+- **Group related tasks:** For example, group back-end engineering tasks together and front-end UI tasks together.
+- **Limit test writing during development**:
+  - Each task group (1-3) should write 2-8 focused tests maximum
+  - Tests should cover only critical behaviors, not exhaustive coverage
+  - Test verification should run ONLY the newly written tests, not the entire suite
+  - If there is a dedicated test coverage group for filling in gaps in test coverage, this group should add only a maximum of 10 additional tests IF NECESSARY to fill critical gaps
+- **Use a focused test-driven approach** where each task group starts with writing 2-8 tests (x.1 sub-task) and ends with running ONLY those tests (final sub-task)
+- **Include acceptance criteria** for each task group
+- **Reference visual assets** if visuals are available
+
+
+## Display confirmation and next step
+
+Display the following message to the user:
+
+```
+The tasks list has created at `agent-os/specs/[this-spec]/tasks.md`.
+
+Review it closely to make sure it all looks good.
+
+NEXT STEP 👉 Run `/implement-tasks` (simple, effective) or `/orchestrate-tasks` (advanced, powerful) to start building!
+```
+
+## User Standards & Preferences Compliance
+
+IMPORTANT: Ensure that the tasks list is ALIGNED and DOES NOT CONFLICT with the user's preferences and standards as detailed in the following files:
+
+@agent-os/standards/backend/api.md
+@agent-os/standards/backend/migrations.md
+@agent-os/standards/backend/models.md
+@agent-os/standards/backend/queries.md
+@agent-os/standards/frontend/accessibility.md
+@agent-os/standards/frontend/components.md
+@agent-os/standards/frontend/css.md
+@agent-os/standards/frontend/responsive.md
+@agent-os/standards/global/coding-style.md
+@agent-os/standards/global/commenting.md
+@agent-os/standards/global/conventions.md
+@agent-os/standards/global/error-handling.md
+@agent-os/standards/global/tech-stack.md
+@agent-os/standards/global/validation.md
+@agent-os/standards/testing/test-writing.md

package/src/template/agent-os/commands/design-screen/design-screen.md

@@ -0,0 +1,32 @@
+# COMMAND: Design Screen Component
+
+## Goal
+Implement a React component for a specific screen design within a section.
+
+## Prerequisites
+- `design-system/product/sections/[section-id]/spec.md` (for requirements).
+- `design-system/product/sections/[section-id]/data.json` (for sample data).
+- `design-system/src/components/ui` (Design System components must be used).
+- You must know the **Section Title** and **Section ID**.
+
+## Instructions
+
+### Step 1: Analyze Requirements
+- Read the Spec to understand the user flow and UI requirements.
+- Read the Data to understand the content structure.
+
+### Step 2: Create Component
+Create `design-system/src/sections/[section-id]/[ComponentName].tsx`.
+
+**Guidelines:**
+- Use `lucide-react` for icons.
+- Use `Tailwind CSS` for styling (matching `colors.json` and `typography.json`).
+- Import UI components from `@/components/ui/...`.
+- **Mock Data**: Import data from the section's `data.json` if possible, or define strictly typed mock data within the file matching the real data structure.
+- **Props**: The component can accept props but should have a default export with no required props for easy rendering in the viewer.
+
+### Step 3: Register Component
+(Note: The `section-loader.ts` will automatically pick up any `.tsx` file in `src/sections/[id]/` as a screen design. No manual registration needed.)
+
+### Step 4: Verification
+- Output: "Screen design '[ComponentName]' created! You can now view it in Design OS."

package/src/template/agent-os/commands/design-shell/design-shell.md

@@ -0,0 +1,34 @@
+# COMMAND: Generate App Shell
+
+## Goal
+Design the application shell (navigation, layout) for the product.
+
+## Prerequisites
+- `design-system/product/product-roadmap.md` must exist (to determine navigation items).
+- `design-system/product/product-overview.md` must exist.
+
+## Instructions
+
+### Step 1: Analyze Roadmap
+Read the roadmap to determine the main navigation sections (e.g. Dashboard, Settings, Projects).
+
+### Step 2: Create Shell Spec
+Create `design-system/product/shell/spec.md`.
+
+Format:
+```markdown
+# Application Shell Specification
+
+## Overview
+[Describe the layout strategy - e.g. Sidebar layout for complex apps, Top-nav for simple tools]
+
+## Navigation Structure
+- [Nav Item 1] -> [Link to Section]
+- [Nav Item 2] -> [Link to Section]
+
+## Layout Pattern
+[Description of the layout components]
+```
+
+### Step 3: Verification
+- Output: "App Shell designed! You can now view the layout in Design OS."

package/src/template/agent-os/commands/design-tokens/design-tokens.md

@@ -0,0 +1,36 @@
+# COMMAND: Generate Design Tokens
+
+## Goal
+Create the visual foundation (colors, typography) for the product based on its Mission and Brand.
+
+## Prerequisites
+- `design-system/product/product-overview.md` must exist.
+
+## Instructions
+
+### Step 1: Analyze Product Brand
+Read `design-system/product/product-overview.md` to understand the product's mood, target audience, and vibe (e.g., "Professional & Trustworthy" vs "Playful & Vibrant").
+
+### Step 2: Generate Color Key
+Create `design-system/product/design-system/colors.json` with the following structure. select colors that match the brand.
+```json
+{
+  "primary": "blue",    // e.g. blue, indigo, violet, rose (Tailwind color names)
+  "secondary": "slate", // e.g. slate, gray, zinc, stone
+  "neutral": "gray"     // e.g. slate, gray, zinc, stone
+}
+```
+
+### Step 3: Generate Typography
+Create `design-system/product/design-system/typography.json`.
+```json
+{
+  "heading": "Inter",      // e.g. Inter, DM Sans, Roboto, Playfair Display
+  "body": "Inter",         // e.g. Inter, Roboto, Open Sans
+  "mono": "JetBrains Mono" // e.g. JetBrains Mono, Fira Code, IBM Plex Mono
+}
+```
+
+### Step 4: Verification
+- Check that the files exist.
+- Output: "Design Tokens generated! You can now view them in Design OS."

package/src/template/agent-os/commands/export-product/export-product.md

@@ -0,0 +1,181 @@
+# Export Product Package
+
+You are helping the user export their complete product design as a handoff package for implementation. This generates all files needed to build the product in a real codebase.
+
+## Step 1: Check Prerequisites
+
+Verify the minimum requirements exist:
+
+**Required:**
+- `design-system/product/product-overview.md` — Product overview
+- `design-system/product/product-roadmap.md` — Sections defined
+- At least one section with screen designs in `design-system/src/sections/[section-id]/`
+
+**Recommended (show warning if missing):**
+- `design-system/product/data-model/data-model.md` — Global data model
+- `design-system/public/product/design-system/colors.json` — Color tokens
+- `design-system/public/product/design-system/typography.json` — Typography tokens
+- `design-system/src/shell/components/AppShell.tsx` — Application shell
+
+If required files are missing, stop and ask the user to complete them first.
+
+## Step 2: Create Export Directory Structure
+
+Create the `product-plan/` directory in the project root with this structure:
+
+```
+product-plan/
+├── README.md                    # Quick start guide
+├── product-overview.md          # Product summary (always provide)
+│
+├── prompts/                     # Ready-to-use prompts for coding agents
+│   ├── one-shot-prompt.md       # Prompt for full implementation
+│   └── section-prompt.md        # Prompt template for section-by-section
+│
+├── instructions/                # Implementation instructions
+│   ├── one-shot-instructions.md # All milestones combined
+│   └── incremental/             # For milestone-by-milestone implementation
+│       ├── 01-foundation.md
+│       ├── 02-[first-section].md
+│       ├── 03-[second-section].md
+│       └── ...
+│
+├── design-system/               # Design tokens
+│   ├── tokens.css
+│   ├── tailwind-colors.md
+│   └── fonts.md
+│   ├── colors.json
+│   └── typography.json
+│
+├── data-model/                  # Data model
+│   ├── README.md
+│   ├── types.ts
+│   └── sample-data.json
+│
+├── shell/                       # Shell components
+│   ├── README.md
+│   ├── components/
+│   └── screenshot.png (if exists)
+│
+└── sections/                    # Section components
+    └── [section-id]/
+        ├── README.md
+        ├── tests.md               # Test-writing instructions for TDD
+        ├── components/
+        ├── types.ts
+        ├── sample-data.json
+        └── screenshot.png (if exists)
+```
+
+## Step 3: Copy Core Documentation
+
+1. Copy `design-system/product/product-overview.md` to `product-plan/product-overview.md`
+2. Copy `design-system/product/product-roadmap.md` to `product-plan/product-roadmap.md`
+
+## Step 4: Generate Design System Files
+
+### tokens.css
+Create `product-plan/design-system/tokens.css` based on `colors.json` and `typography.json` found in `design-system/public/product/design-system/`.
+
+### tailwind-colors.md
+Create `product-plan/design-system/tailwind-colors.md` mapping the colors to proper Tailwind configuration.
+
+### Copy JSONs
+Copy `colors.json` and `typography.json` to `product-plan/design-system/`.
+
+## Step 5: Generate Data Model Files
+
+If `design-system/product/data-model/data-model.md` exists, copy it to `product-plan/data-model/README.md`.
+If schema types exist (e.g. `schema.ts`), copy to `product-plan/data-model/types.ts`.
+
+## Step 6: Generate Milestone Instructions
+
+(Same logic as internal Design OS command, adapted for path `design-system/src/...`)
+
+### 01-foundation.md
+Create `product-plan/instructions/incremental/01-foundation.md`.
+Includes: Design tokens setup, App Shell (copy from `design-system/src/shell/`), and Routing structure.
+
+### Section Milestones
+For each section in the roadmap (`design-system/product/sections/[id]/`):
+Create `product-plan/instructions/incremental/[NN]-[section-id].md`.
+Content should include:
+- Goal & Overview
+- TDD Instructions (reference `product-plan/sections/[id]/tests.md`)
+- Components listing
+- Data Layer requirements
+- Expected User Flows
+
+## Step 7: Generate Section Assets
+
+For each section:
+1. Creates `product-plan/sections/[section-id]/README.md`
+2. Creates `product-plan/sections/[section-id]/tests.md` (Framework-agnostic test specs)
+3. Copies components from `design-system/src/sections/[section-id]/` to `product-plan/sections/[section-id]/components/`
+   - **Crucial:** Transform imports to be relative!
+4. Copies types and data from `design-system/product/sections/[section-id]/` to `product-plan/sections/[section-id]/`
+
+## Step 8: Generate Prompt Files
+
+**This is the most important step for the user.**
+
+### product-plan/prompts/one-shot-prompt.md
+
+```markdown
+# One-Shot Implementation Prompt
+
+I need you to implement a complete web application based on detailed design specifications.
+
+## Instructions
+1. Read **@product-plan/product-overview.md**
+2. Read **@product-plan/instructions/one-shot-instructions.md** (which combines all milestones)
+
+## Context
+- **Design System:** @product-plan/design-system/
+- **Data Model:** @product-plan/data-model/
+- **Shell:** @product-plan/shell/
+- **Sections:** @product-plan/sections/
+
+## Before coding
+Ask me satisfying questions about:
+1. Authentication
+2. User Modeling
+3. Tech Stack
+4. Backend Logic
+
+Then create a plan and implement.
+```
+
+### product-plan/prompts/section-prompt.md
+
+```markdown
+# Section Implementation Prompt
+
+## Variables
+- **SECTION_ID**: [folder name]
+
+## Instructions
+I need you to implement the **SECTION_ID** section.
+
+1. Read **@product-plan/product-overview.md**
+2. Read **@product-plan/instructions/incremental/[Milestone]-SECTION_ID.md**
+
+## Approach
+Use Test-Driven Development (TDD) based on `@product-plan/sections/SECTION_ID/tests.md`.
+```
+
+## Step 9: Zip and Handoff
+
+1. Zip `product-plan/` into `product-plan.zip`.
+2. Sync key files to `app/agent-os/product/` (Overview, Roadmap, Data Model, Design System) to update the status in the main app dashboard.
+
+## Final Output
+
+Tell the user:
+"Export complete!
+- **Prompts:** `product-plan/prompts/`
+- **Instructions:** `product-plan/instructions/`
+- **Assets:** `product-plan/sections/`
+- **Zip:** `product-plan.zip`
+
+You can use `product-plan/prompts/one-shot-prompt.md` to start building!"

package/src/template/agent-os/commands/implement-tasks/1-determine-tasks.md

@@ -0,0 +1,13 @@
+First, check if the user has already provided instructions about which task group(s) to implement.
+
+**If the user HAS provided instructions:** Proceed to PHASE 2 to delegate implementation of those specified task group(s) to the **implementer** subagent.
+
+**If the user has NOT provided instructions:**
+
+Read `agent-os/specs/[this-spec]/tasks.md` to review the available task groups, then output the following message to the user and WAIT for their response:
+
+```
+Should we proceed with implementation of all task groups in tasks.md?
+
+If not, then please specify which task(s) to implement.
+```

package/src/template/agent-os/commands/implement-tasks/2-implement-tasks.md

@@ -0,0 +1,63 @@
+Now that you have the task group(s) to be implemented, proceed with implementation by following these instructions:
+
+Implement all tasks assigned to you and ONLY those task(s) that have been assigned to you.
+
+## Implementation process:
+
+1. Analyze the provided spec.md, requirements.md, and visuals (if any)
+2. Analyze patterns in the codebase according to its built-in workflow
+3. Implement the assigned task group according to requirements and standards
+4. Update `agent-os/specs/[this-spec]/tasks.md` to update the tasks you've implemented to mark that as done by updating their checkbox to checked state: `- [x]`
+
+## Guide your implementation using:
+- **The existing patterns** that you've found and analyzed in the codebase.
+- **Specific notes provided in requirements.md, spec.md AND/OR tasks.md**
+- **Visuals provided (if any)** which would be located in `agent-os/specs/[this-spec]/planning/visuals/`
+- **User Standards & Preferences** which are defined below.
+
+## Self-verify and test your work by:
+- Running ONLY the tests you've written (if any) and ensuring those tests pass.
+- IF your task involves user-facing UI, and IF you have access to browser testing tools, open a browser and use the feature you've implemented as if you are a user to ensure a user can use the feature in the intended way.
+  - Take screenshots of the views and UI elements you've tested and store those in `agent-os/specs/[this-spec]/verification/screenshots/`.  Do not store screenshots anywhere else in the codebase other than this location.
+  - Analyze the screenshot(s) you've taken to check them against your current requirements.
+
+
+## Display confirmation and next step
+
+Display a summary of what was implemented.
+
+IF all tasks are now marked as done (with `- [x]`) in tasks.md, display this message to user:
+
+```
+All tasks have been implemented: `agent-os/specs/[this-spec]/tasks.md`.
+
+NEXT STEP 👉 Run `3-verify-implementation.md` to verify the implementation.
+```
+
+IF there are still tasks in tasks.md that have yet to be implemented (marked unfinished with `- [ ]`) then display this message to user:
+
+```
+Would you like to proceed with implementation of the remaining tasks in tasks.md?
+
+If not, please specify which task group(s) to implement next.
+```
+
+## User Standards & Preferences Compliance
+
+IMPORTANT: Ensure that the tasks list is ALIGNED and DOES NOT CONFLICT with the user's preferences and standards as detailed in the following files:
+
+@agent-os/standards/backend/api.md
+@agent-os/standards/backend/migrations.md
+@agent-os/standards/backend/models.md
+@agent-os/standards/backend/queries.md
+@agent-os/standards/frontend/accessibility.md
+@agent-os/standards/frontend/components.md
+@agent-os/standards/frontend/css.md
+@agent-os/standards/frontend/responsive.md
+@agent-os/standards/global/coding-style.md
+@agent-os/standards/global/commenting.md
+@agent-os/standards/global/conventions.md
+@agent-os/standards/global/error-handling.md
+@agent-os/standards/global/tech-stack.md
+@agent-os/standards/global/validation.md
+@agent-os/standards/testing/test-writing.md