@theproductguy/create-mission-control 1.0.3 → 1.0.5

package/bin/cli.js

@@ -87,16 +87,23 @@ async function init() {
                 const templateDir = path.resolve(__dirname, '../src/template');
 
                 // Copy Control Center
-                fs.cpSync(path.join(templateDir, 'control-center'), path.join(root, 'control-center'), { recursive: true });
+                // Copy helper to exclude node_modules
+                const copyOptions = {
+                    recursive: true,
+                    filter: (src) => !src.includes('node_modules')
+                };
+
+                // Copy Control Center
+                fs.cpSync(path.join(templateDir, 'control-center'), path.join(root, 'control-center'), copyOptions);
 
                 // Copy Design System
-                fs.cpSync(path.join(templateDir, 'design-system'), path.join(root, 'design-system'), { recursive: true });
+                fs.cpSync(path.join(templateDir, 'design-system'), path.join(root, 'design-system'), copyOptions);
 
                 // Copy Agent OS Docs
-                fs.cpSync(path.join(templateDir, 'agent-os'), path.join(root, 'agent-os'), { recursive: true });
+                fs.cpSync(path.join(templateDir, 'agent-os'), path.join(root, 'agent-os'), copyOptions);
 
                 // Copy Agent OS UI Package (for local workspace support)
-                fs.cpSync(path.join(templateDir, 'agent-os-ui'), path.join(root, 'agent-os-ui'), { recursive: true });
+                fs.cpSync(path.join(templateDir, 'agent-os-ui'), path.join(root, 'agent-os-ui'), copyOptions);
 
                 // 3. Configure Workspace
                 console.log(cyan('\n3. Configuring Workspace...'));
@@ -152,13 +159,62 @@ async function init() {
 
                 fs.writeFileSync(appPkgPath, JSON.stringify(appPkg, null, 2));
 
+                // 4. Copy root config files
+                console.log(cyan('\n4. Setting up quality tooling...'));
+
+                const rootConfigFiles = [
+                    '.gitignore',
+                    '.prettierrc',
+                    '.env.example',
+                    'eslint.config.js',
+                    'commitlint.config.js',
+                    'lint-staged.config.js',
+                    'vitest.config.ts',
+                    'README.md'
+                ];
+
+                for (const file of rootConfigFiles) {
+                    const src = path.join(templateDir, file);
+                    if (fs.existsSync(src)) {
+                        fs.copyFileSync(src, path.join(root, file));
+                    }
+                }
+
+                // Copy directories
+                const rootDirs = ['.github', '.husky', '.vscode', 'src/__tests__'];
+                for (const dir of rootDirs) {
+                    const src = path.join(templateDir, dir);
+                    if (fs.existsSync(src)) {
+                        fs.cpSync(src, path.join(root, dir), copyOptions);
+                    }
+                }
+
+                // 5. Initialize git repository
+                console.log(cyan('\n5. Initializing git repository...'));
+                try {
+                    const { execSync } = await import('node:child_process');
+                    execSync('git init', { cwd: root, stdio: 'inherit' });
+                    execSync('git add .', { cwd: root, stdio: 'ignore' });
+                } catch (e) {
+                    console.log('  (Git initialization skipped - git may not be available)');
+                }
 
-                console.log(green(`\n\nAgent OS Workspace created successfully! 🚀\n`));
-                console.log(`Next steps:\n`);
+                console.log(green(`\n\n✅ Agent OS Workspace created successfully! 🚀\n`));
+                console.log(bold('What\'s included:'));
+                console.log('  ✓ ESLint + Prettier + Husky pre-commit hooks');
+                console.log('  ✓ Vitest for testing');
+                console.log('  ✓ GitHub Actions CI workflow');
+                console.log('  ✓ Impeccable design commands');
+                console.log('  ✓ AI Slop Guard hook');
+                console.log(`\n${bold('Next steps:')}\n`);
                 console.log(`  cd ${result.projectName}`);
                 console.log(`  npm install`);
                 console.log(`  npm run dev\n`);
-                console.log(`This will start the App, Control Center, and Design OS concurrently.`);
+                console.log(`${bold('Recommended workflow:')}`);
+                console.log(`  1. /plan-product     — Define your product`);
+                console.log(`  2. /create-constitution — Set project principles`);
+                console.log(`  3. /research-tech    — Research your stack`);
+                console.log(`  4. /design-tokens    — Start designing`);
             });
         });
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@theproductguy/create-mission-control",
-    "version": "1.0.3",
+    "version": "1.0.5",
     "description": "Scaffolding tool for Agent OS applications",
     "type": "module",
     "bin": {
@@ -41,4 +41,4 @@
         "typescript": "^5.3.3",
         "vite": "^5.0.10"
     }
-}
+}

package/src/template/.env.example

@@ -0,0 +1,28 @@
+# ==============================================
+# Environment Variables
+# ==============================================
+# Copy this file to .env.local and fill in your values
+# NEVER commit .env.local to version control
+
+# ==============================================
+# Application
+# ==============================================
+# VITE_APP_NAME=My App
+# VITE_APP_URL=http://localhost:5402
+
+# ==============================================
+# API Configuration
+# ==============================================
+# VITE_API_URL=http://localhost:5403
+
+# ==============================================
+# Feature Flags
+# ==============================================
+# VITE_ENABLE_ANALYTICS=false
+# VITE_ENABLE_DEBUG_MODE=false
+
+# ==============================================
+# Third-Party Services (add as needed)
+# ==============================================
+# VITE_SENTRY_DSN=
+# VITE_POSTHOG_KEY=

package/src/template/.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,40 @@
+---
+name: Bug Report
+about: Report a bug to help us improve
+title: '[BUG] '
+labels: bug
+assignees: ''
+---
+
+## Bug Description
+
+<!-- A clear and concise description of what the bug is -->
+
+## Steps to Reproduce
+
+1. Go to '...'
+2. Click on '...'
+3. Scroll down to '...'
+4. See error
+
+## Expected Behavior
+
+<!-- What you expected to happen -->
+
+## Actual Behavior
+
+<!-- What actually happened -->
+
+## Screenshots
+
+<!-- If applicable, add screenshots to help explain your problem -->
+
+## Environment
+
+- OS: [e.g., macOS 14.0]
+- Browser: [e.g., Chrome 120]
+- Node version: [e.g., 20.10.0]
+
+## Additional Context
+
+<!-- Add any other context about the problem here -->

package/src/template/.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,30 @@
+---
+name: Feature Request
+about: Suggest an idea for this project
+title: '[FEATURE] '
+labels: enhancement
+assignees: ''
+---
+
+## Problem Statement
+
+<!-- Describe the problem you're trying to solve -->
+
+## Proposed Solution
+
+<!-- Describe the solution you'd like -->
+
+## Alternatives Considered
+
+<!-- Describe any alternative solutions or features you've considered -->
+
+## Additional Context
+
+<!-- Add any other context, mockups, or screenshots about the feature request here -->
+
+## Acceptance Criteria
+
+<!-- Define what "done" looks like for this feature -->
+- [ ] Criterion 1
+- [ ] Criterion 2
+- [ ] Criterion 3

package/src/template/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,33 @@
+## Description
+
+<!-- Describe the changes in this PR -->
+
+## Type of Change
+
+- [ ] 🐛 Bug fix (non-breaking change which fixes an issue)
+- [ ] ✨ New feature (non-breaking change which adds functionality)
+- [ ] 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] 📝 Documentation update
+- [ ] 🎨 Style/UI update
+- [ ] ♻️ Refactor (no functional changes)
+- [ ] 🧪 Test update
+
+## Related Issues
+
+<!-- Link to related issues: Fixes #123 -->
+
+## Checklist
+
+- [ ] My code follows the project's style guidelines
+- [ ] I have performed a self-review of my code
+- [ ] I have added tests that prove my fix is effective or that my feature works
+- [ ] New and existing unit tests pass locally with my changes
+- [ ] I have run `/audit` and addressed any issues
+
+## Screenshots (if applicable)
+
+<!-- Add screenshots to help explain your changes -->
+
+## Additional Context
+
+<!-- Add any other context about the PR here -->

package/src/template/.github/workflows/ci.yml

@@ -0,0 +1,83 @@
+name: CI
+
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main, develop]
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run ESLint
+        run: npm run lint --if-present
+
+      - name: Check formatting
+        run: npm run format:check --if-present
+
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build --if-present
+
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm test --if-present
+
+  typecheck:
+    name: Type Check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Type check
+        run: npm run typecheck --if-present

package/src/template/.husky/commit-msg

@@ -0,0 +1 @@
+npx --no -- commitlint --edit ${1}

package/src/template/.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

package/src/template/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

package/src/template/README.md

@@ -0,0 +1,78 @@
+# {PROJECT_NAME}
+
+> Built with [Agent OS](https://github.com/s1dd4rth/mission-control) — Design-driven development
+
+## Quick Start
+
+```bash
+# Install dependencies
+npm install
+
+# Start development servers
+npm run dev
+```
+
+This will start:
+- **Design OS:** http://localhost:5400
+- **Mission Control:** http://localhost:5401
+- **Application:** http://localhost:5402
+- **API:** http://localhost:5403
+
+## Project Structure
+
+```
+├── agent-os/              # Product strategy & commands
+│   ├── product/           # Mission, roadmap, tech stack
+│   ├── commands/          # Agent OS commands
+│   ├── specs/             # Feature specifications
+│   └── constitution.md    # Project principles
+│
+├── design-system/         # Design OS
+│   ├── .gemini/           # Commands, skills, hooks
+│   ├── product/           # Synced from agent-os
+│   └── src/               # Design components
+│
+├── control-center/        # Mission Control dashboard
+│   ├── frontend/          # React dashboard
+│   └── backend/           # API server
+│
+└── app/                   # Your application
+```
+
+## Available Scripts
+
+| Script | Description |
+|--------|-------------|
+| `npm run dev` | Start all development servers |
+| `npm run build` | Build for production |
+| `npm test` | Run tests |
+| `npm run lint` | Run ESLint |
+| `npm run format` | Format with Prettier |
+| `npm run typecheck` | TypeScript type checking |
+
+## Workflow
+
+1. **Plan** — Define mission, roadmap, and tech stack
+2. **Design** — Create design tokens, shell, and sections
+3. **Specify** — Shape detailed feature specifications
+4. **Implement** — Build features with TDD approach
+
+## Quality Commands
+
+| Command | Purpose |
+|---------|---------|
+| `/create-constitution` | Establish project principles |
+| `/research-tech` | Research tech stack best practices |
+| `/audit` | Run accessibility & quality audit |
+| `/polish` | Final visual refinements |
+
+## Contributing
+
+1. Create a feature branch from `main`
+2. Make your changes
+3. Run `npm run lint && npm test`
+4. Submit a pull request
+
+## License
+
+MIT

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

@@ -0,0 +1,89 @@
+# COMMAND: Create Constitution
+
+## Goal
+Establish the project's governing principles and development guidelines that will guide all subsequent development phases. This is a one-time setup command inspired by spec-driven development.
+
+## When to Run
+- **Once** at the beginning of a new project
+- After `/plan-product` but before `/design-tokens`
+- When you want to formalize project standards
+
+## Instructions
+
+### Step 1: Gather Context
+Read the following files to understand the project:
+- `agent-os/product/mission.md` — Product vision and goals
+- `agent-os/product/roadmap.md` — Planned features
+- `agent-os/product/tech-stack.md` — Technology choices
+
+### Step 2: Create Constitution Document
+Create `agent-os/constitution.md` with the following sections:
+
+```markdown
+# Project Constitution
+
+## Core Principles
+[3-5 high-level principles that guide all decisions]
+
+## Code Quality Standards
+- [ ] All code must pass ESLint with no errors
+- [ ] All code must be formatted with Prettier
+- [ ] TypeScript strict mode is enforced
+- [ ] No `any` types without explicit justification
+- [ ] All public APIs must have JSDoc comments
+
+## Testing Philosophy
+- [ ] Unit tests for all business logic
+- [ ] Integration tests for critical user flows
+- [ ] Minimum 80% code coverage for new features
+- [ ] TDD approach for complex features
+
+## UX Consistency Rules
+- [ ] Follow the Impeccable design principles
+- [ ] Run `/audit` before any design handoff
+- [ ] No AI Slop patterns (see frontend-design skill)
+- [ ] Mobile-first responsive design
+- [ ] WCAG 2.1 AA accessibility compliance
+
+## Performance Budgets
+- [ ] First Contentful Paint < 1.5s
+- [ ] Largest Contentful Paint < 2.5s
+- [ ] Cumulative Layout Shift < 0.1
+- [ ] Bundle size < 200KB (gzipped)
+
+## Security Requirements
+- [ ] No secrets in code
+- [ ] Input validation on all user inputs
+- [ ] HTTPS only in production
+- [ ] CSP headers configured
+
+## Git Workflow
+- [ ] Conventional commits required
+- [ ] PR reviews required before merge
+- [ ] Feature branches from `main`
+- [ ] Squash merge to maintain clean history
+
+## Definition of Done
+A feature is considered "done" when:
+1. [ ] Code is written and reviewed
+2. [ ] Tests are passing (unit + integration)
+3. [ ] Documentation is updated
+4. [ ] Accessibility audit passes
+5. [ ] Performance budget is met
+6. [ ] `/audit` passes with no critical issues
+```
+
+### Step 3: Customize for Project
+Based on the product mission and tech stack, customize:
+- Add project-specific principles
+- Adjust performance budgets if needed
+- Add any domain-specific requirements
+
+### Step 4: Verification
+- Confirm `agent-os/constitution.md` exists
+- Output message: "Constitution created! These principles will guide all subsequent development. Run `/research-tech` next to analyze your tech stack."
+
+## Notes
+- The constitution should be a living document
+- Team members should review and commit to these principles
+- Reference this document in code reviews

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

@@ -19,6 +19,30 @@ Verify the minimum requirements exist:
 
 If required files are missing, stop and ask the user to complete them first.
 
+## Step 1.5: Impeccable Quality Check (Pre-Export)
+
+Before exporting, run a quick quality assessment:
+
+**Check for QA Reports:**
+1. Look for `design-system/QA/audit-report.md` — Has a full audit been run?
+2. Look for `design-system/QA/tokens-audit.md` — Were design tokens audited?
+3. Look for `design-system/QA/shell-audit.md` — Was the shell audited?
+
+**If no audit reports exist:**
+"⚠️ **Impeccable Warning**: No quality audits found. I recommend running `/audit` before exporting to ensure your design meets quality standards and avoids 'AI Slop'.
+
+Would you like me to:
+1. Run `/audit` now (recommended)
+2. Proceed with export anyway"
+
+**If audits exist but have failures:**
+"⚠️ **Impeccable Warning**: Previous audit found issues that may not have been addressed. Consider running the suggested fix commands (`/normalize`, `/harden`, etc.) before exporting.
+
+Proceed with export?"
+
+**If audits pass or user confirms:**
+Continue to Step 2.
+
 ## Step 2: Create Export Directory Structure
 
 Create the `product-plan/` directory in the project root with this structure:

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

@@ -64,4 +64,13 @@ Create a draft data model file:
 ### Step 3: Verification
 - Check that `design-system/product/product-overview.md` exists.
 - Check that `design-system/product/product-roadmap.md` exists.
-- Output a confirmation message: "Design OS initialized! You can now open http://localhost:3000 to begin designing."
+- Output a confirmation message:
+
+"Design OS initialized! You can now open http://localhost:5400 to begin designing.
+
+**Recommended Next Steps:**
+1. Run `/teach-impeccable` — One-time setup to establish design context for this project.
+2. Run `/design-tokens` — Define your colors and typography.
+3. Run `/design-shell` — Design your navigation and layout.
+
+The Impeccable command system will guide you toward distinctive, AI-slop-free designs."

package/src/template/agent-os/commands/research-tech/research-tech.md

@@ -0,0 +1,93 @@
+# COMMAND: Research Tech Stack
+
+## Goal
+Research and document best practices, current versions, and known gotchas for the technologies chosen in `tech-stack.md`. This ensures the implementation uses up-to-date patterns and avoids common pitfalls.
+
+## When to Run
+- After `/plan-product` has created `tech-stack.md`
+- Before `/design-tokens` or implementation begins
+- When updating to new versions of key dependencies
+
+## Instructions
+
+### Step 1: Read Tech Stack
+Read `agent-os/product/tech-stack.md` to understand the chosen technologies.
+
+### Step 2: Analyze Technologies
+For each tech choice, answer:
+- **Why this choice?** (Pros/Cons)
+- **Latest Version?** (Use Context7 to check latest docs/features if possible)
+- **Alternatives considered?**
+
+> **Tip:** If you have Context7 configured, use it to fetch the latest documentation for accurate analysis.
+> Prompt: "Using Context7, what are the latest best practices for [Technology]?"
+
+For each major technology in the stack, research:
+
+1. **Current stable version** — What version should we pin to?
+2. **Breaking changes** — Any recent breaking changes to be aware of?
+3. **Best practices** — What are the current recommended patterns?
+4. **Common pitfalls** — What mistakes do developers commonly make?
+5. **Performance tips** — Any optimization opportunities?
+
+### Step 3: Create Research Document
+Create `agent-os/research.md` with the following structure:
+
+```markdown
+# Technology Research
+
+**Generated:** [Date]
+**Tech Stack:** [List from tech-stack.md]
+
+---
+
+## [Technology Name]
+
+### Version
+- **Recommended:** [version]
+- **Latest Stable:** [version]
+- **Our Choice:** [version + justification]
+
+### Key Features to Use
+- [Feature 1]
+- [Feature 2]
+
+### Patterns to Follow
+- [Pattern 1 with code example]
+- [Pattern 2 with code example]
+
+### Pitfalls to Avoid
+- ⚠️ [Pitfall 1 and how to avoid]
+- ⚠️ [Pitfall 2 and how to avoid]
+
+### Performance Considerations
+- [Tip 1]
+- [Tip 2]
+
+### Resources
+- [Official docs link]
+- [Helpful article link]
+
+---
+
+[Repeat for each technology]
+```
+
+### Step 4: Identify Integration Concerns
+Document any concerns where technologies interact:
+- State management + React patterns
+- CSS framework + component library conflicts
+- Build tool configuration needs
+
+### Step 5: Create Version Lock File
+Update `package.json` with pinned versions based on research.
+
+### Step 6: Verification
+- Confirm `agent-os/research.md` exists
+- Ensure all major technologies are covered
+- Output message: "Tech research complete! Review the findings in `agent-os/research.md`. Run `/design-tokens` next to begin designing."
+
+## Notes
+- Research should be done even for familiar technologies
+- Check for security advisories on dependencies
+- Consider LTS vs. latest tradeoffs

package/src/template/agent-os/commands/shape-spec/shape-spec.md

@@ -11,7 +11,8 @@ Create the technical specification (`spec.md`) for a specific product section.
 
 ### Step 1: Analyze Context
 - Read `design-system/product/product-roadmap.md` to understand where this section fits.
-- Read `design-system/product/product-overview.md` to understand the overall product context.
+- Read `design-system/product/product-overview.md` to understand the data model and core flows.
+- Read `design-system/design-tokens.md` and `design-system/app-shell.md` to understand the design language and layout constraints.
 
 ### Step 2: Create Spec File
 Create `design-system/product/sections/[section-id]/spec.md`.

package/src/template/agent-os/docs/context7.md

@@ -0,0 +1,20 @@
+# Context7 Integration
+
+Context7 (context7.com) provides up-to-date documentation and code examples for your tech stack, ensuring your agent uses the latest APIs and best practices.
+
+## Setup
+
+1.  **Get API Key**: Go to [context7.com](https://context7.com) and get your API key.
+2.  **Configure Agent**:
+    *   **Cursor/Windsurf**: Add Context7 as an MCP server.
+        *   Server URL: `https://context7.com/api/mcp` (or as per their specific MCP setup instructions)
+        *   Env: `CONTEXT7_API_KEY=your_key`
+    *   **Manual**: Just tell the agent "Use Context7 to look up documentation for [library]" if you have the proper system prompt or tool configured.
+
+## Usage
+
+When running `/research-tech` or implementation commands, the agent will look for Context7 tools.
+
+### Example Prompts
+- "Using Context7, interpret the latest docs for Next.js App Router."
+- "Check Context7 for `shadcn/ui` installation steps."