@theproductguy/create-mission-control 1.0.4 → 1.0.5

package/bin/cli.js

@@ -159,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.4",
+    "version": "1.0.5",
     "description": "Scaffolding tool for Agent OS applications",
     "type": "module",
     "bin": {

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/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."

package/src/template/commitlint.config.js

@@ -0,0 +1,25 @@
+export default {
+    extends: ['@commitlint/config-conventional'],
+    rules: {
+        'type-enum': [
+            2,
+            'always',
+            [
+                'feat',     // New feature
+                'fix',      // Bug fix
+                'docs',     // Documentation
+                'style',    // Formatting, missing semicolons, etc.
+                'refactor', // Code restructuring without changing behavior
+                'perf',     // Performance improvements
+                'test',     // Adding or updating tests
+                'build',    // Build system or dependencies
+                'ci',       // CI configuration
+                'chore',    // Maintenance tasks
+                'revert',   // Reverting changes
+            ],
+        ],
+        'subject-case': [2, 'always', 'lower-case'],
+        'subject-empty': [2, 'never'],
+        'type-empty': [2, 'never'],
+    },
+}

package/src/template/control-center/backend/index.js

@@ -136,6 +136,53 @@ app.get('/api/status', async (req, res) => {
         const hasTokens = fs.existsSync(path.join(designDir, 'product/design-system/colors.json'));
         const hasShell = fs.existsSync(path.join(designDir, 'product/shell/spec.md'));
 
+        // Implementation tracking
+        const appDir = path.join(PROJECT_ROOT, 'app');
+        const hasScaffold = fs.existsSync(path.join(APP_DIR, 'src/lib/utils.ts'));
+
+        // Check for test files
+        const testFiles = glob.sync('**/*.{test,spec}.{ts,tsx,js,jsx}', { cwd: appDir, ignore: ['node_modules/**'] });
+        const hasTests = testFiles.length > 0;
+
+        // Check for coverage report
+        const coverageDir = path.join(PROJECT_ROOT, 'coverage');
+        const coverageSummary = path.join(coverageDir, 'coverage-summary.json');
+        let coveragePercent = null;
+        if (fs.existsSync(coverageSummary)) {
+            try {
+                const coverage = JSON.parse(fs.readFileSync(coverageSummary, 'utf-8'));
+                if (coverage.total && coverage.total.lines) {
+                    coveragePercent = Math.round(coverage.total.lines.pct);
+                }
+            } catch (e) {
+                // Ignore parsing errors
+            }
+        }
+
+        // Check git status
+        let gitInfo = { initialized: false, branch: null, uncommitted: 0, lastCommit: null };
+        const gitDir = path.join(PROJECT_ROOT, '.git');
+        if (fs.existsSync(gitDir)) {
+            gitInfo.initialized = true;
+            try {
+                const { execSync } = require('child_process');
+                gitInfo.branch = execSync('git rev-parse --abbrev-ref HEAD', { cwd: PROJECT_ROOT, encoding: 'utf-8' }).trim();
+                const status = execSync('git status --porcelain', { cwd: PROJECT_ROOT, encoding: 'utf-8' });
+                gitInfo.uncommitted = status.split('\n').filter(l => l.trim()).length;
+                try {
+                    gitInfo.lastCommit = execSync('git log -1 --pretty=format:"%s"', { cwd: PROJECT_ROOT, encoding: 'utf-8' }).trim();
+                } catch (e) {
+                    // No commits yet
+                }
+            } catch (e) {
+                // Git commands failed
+            }
+        }
+
+        // Check for linked specs
+        const specsWithTasks = specs.filter(s => s.tasks.exists && s.tasks.total > 0);
+        const specsCompleted = specs.filter(s => s.tasks.exists && s.tasks.completed === s.tasks.total && s.tasks.total > 0);
+
         res.json({
             product: productFiles,
             services,
@@ -155,7 +202,17 @@ app.get('/api/status', async (req, res) => {
                 }
             },
             implementation: {
-                scaffolded: fs.existsSync(path.join(APP_DIR, 'src/lib/utils.ts'))
+                scaffolded: hasScaffold,
+                tests: {
+                    count: testFiles.length,
+                    hasTests
+                },
+                coverage: coveragePercent,
+                specs: {
+                    total: specsWithTasks.length,
+                    completed: specsCompleted.length
+                },
+                git: gitInfo
             },
             specs,
             projectRoot: PROJECT_ROOT

package/src/template/control-center/frontend/src/App.tsx

@@ -46,6 +46,21 @@ interface ProjectState {
   };
   implementation: {
     scaffolded: boolean;
+    tests?: {
+      count: number;
+      hasTests: boolean;
+    };
+    coverage?: number | null;
+    specs?: {
+      total: number;
+      completed: number;
+    };
+    git?: {
+      initialized: boolean;
+      branch: string | null;
+      uncommitted: number;
+      lastCommit: string | null;
+    };
   };
   specs: Spec[];
   services?: {
@@ -701,77 +716,14 @@ function App() {
               </div>
             </section>
 
-            {/* Phase 3: Implementation */}
-            <section className="bg-card border border-border rounded-xl p-5 shadow-sm h-full flex flex-col transition-all hover:shadow-md hover:border-border/80">
-              <div className="flex items-center gap-3 mb-5 pb-4 border-b border-border/50">
-                <div className="p-2 bg-sidebar-primary/10 text-sidebar-primary rounded-lg">
-                  <Package size={20} />
-                </div>
-                <h2 className="text-lg font-semibold">3. Implementation</h2>
-              </div>
-
-              <div className="space-y-4 flex-1">
-                <div className="flex items-center justify-between p-3 bg-secondary/30 rounded-lg border border-border/50">
-                  <span className="text-foreground font-medium text-sm flex items-center gap-2"><Layout size={16} className="text-muted-foreground" /> Scaffold</span>
-                  {state?.implementation?.scaffolded ? (
-                    <span className="text-emerald-600 bg-emerald-50 dark:bg-emerald-900/20 px-2 py-0.5 rounded text-xs font-medium border border-emerald-200 dark:border-emerald-800">Done</span>
-                  ) : (
-                    <span className="text-muted-foreground bg-secondary px-2 py-0.5 rounded text-xs font-medium border border-border">Pending</span>
-                  )}
-                </div>
-              </div>
-
-              <div className="mt-6">
-                {!state?.implementation?.scaffolded ? (
-                  <PromptButton
-                    label="Scaffold App"
-                    prompt="Antigravity, scaffold the implementation. Read 'agent-os/commands/scaffold-implementation/scaffold-implementation.md'."
-                    onClick={copyToClipboard}
-                  />
-                ) : (
-                  <div className="p-3 bg-secondary/30 rounded-lg border border-border/50 text-sm text-muted-foreground text-center italic mb-4">
-                    App scaffolded. Ready for implementation.
-                  </div>
-                )}
-
-                {state?.implementation?.scaffolded && state?.design?.exportPrompts?.oneShot && (
-                  <div className="pt-3 border-t border-border/50">
-                    <p className="text-xs text-muted-foreground mb-2 font-medium">Implementation Options:</p>
-                    <div className="space-y-2">
-                      <PromptButton
-                        label="Option A: One-Shot (All)"
-                        prompt={`Antigravity, implement the app. Read 'product-plan/prompts/one-shot-prompt.md'.`}
-                        onClick={copyToClipboard}
-                        small
-                        primary
-                      />
-                      {state?.design?.exportPrompts?.section && (
-                        <div className="relative">
-                          <PromptButton
-                            label="Option B: Incremental (Section)"
-                            prompt={`Antigravity, implement a section. Read 'product-plan/prompts/section-prompt.md'.`}
-                            onClick={copyToClipboard}
-                            small
-                          />
-                          <p className="text-[10px] text-muted-foreground mt-1.5 text-center leading-tight">
-                            Build feature-by-feature using the <strong>Feature Specs</strong> list &rarr;
-                          </p>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </section>
-
-            {/* Phase 4: Specs & Implementation */}
+            {/* Phase 3: Feature Specs */}
             <section className="bg-card border border-border rounded-xl p-5 shadow-sm col-span-1 md:col-span-2 lg:col-span-1 h-full flex flex-col transition-all hover:shadow-md hover:border-border/80">
               <div className="flex items-center justify-between mb-5 pb-4 border-b border-border/50">
                 <div className="flex items-center gap-3">
                   <div className="p-2 bg-sidebar-primary/10 text-sidebar-primary rounded-lg">
                     <Code size={20} />
                   </div>
-                  <h2 className="text-lg font-semibold">4. Feature Specs</h2>
+                  <h2 className="text-lg font-semibold">3. Feature Specs</h2>
                 </div>
                 <button className="text-xs bg-secondary hover:bg-secondary/80 border border-border px-3 py-2 rounded-md flex items-center gap-1.5 font-medium transition cursor-pointer"
                   onClick={() => setCreatingSpec(true)}>
@@ -780,6 +732,24 @@ function App() {
               </div>
 
               <div className="space-y-3 flex-1 overflow-y-auto max-h-[300px] pr-1">
+                {/* Auto-generate from Roadmap after Design Export */}
+                {(state?.product?.roadmap?.items?.filter(item =>
+                  !item.completed &&
+                  !state?.product?.roadmap?.isBoilerplate
+                ) ?? []).length > 0 && !state?.specs?.length && (
+                    <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 p-4 rounded-lg mb-3">
+                      <p className="text-sm text-blue-700 dark:text-blue-300 mb-2">
+                        Ready to generate specs from roadmap items?
+                      </p>
+                      <PromptButton
+                        label="Generate All Specs"
+                        prompt={`Antigravity, generate feature specs from the roadmap items. For each item in 'agent-os/product/roadmap.md' that is not yet completed, create a spec folder in 'agent-os/specs/[feature-name]/' with spec.md and tasks.md files. Context: 1. Read 'product-plan/product-overview.md' for data model/flows. 2. Read 'design-system/design-tokens.md' and 'design-system/app-shell.md' for UI/UX constraints. 3. Use the shape-spec command: Read 'agent-os/commands/shape-spec/shape-spec.md'.`}
+                        onClick={copyToClipboard}
+                        small
+                        primary
+                      />
+                    </div>
+                  )}
                 {state?.specs?.map(spec => (
                   <div key={spec.name} className="bg-secondary/20 p-4 rounded-lg border border-border/50 hover:border-border transition-colors group relative">
                     <button
@@ -867,6 +837,132 @@ function App() {
               </div>
             </section>
 
+            {/* Phase 4: Implementation */}
+            <section className="bg-card border border-border rounded-xl p-5 shadow-sm h-full flex flex-col transition-all hover:shadow-md hover:border-border/80">
+              <div className="flex items-center gap-3 mb-5 pb-4 border-b border-border/50">
+                <div className="p-2 bg-sidebar-primary/10 text-sidebar-primary rounded-lg">
+                  <Package size={20} />
+                </div>
+                <h2 className="text-lg font-semibold">4. Implementation</h2>
+              </div>
+
+              <div className="space-y-3 flex-1">
+                {/* Scaffold Status */}
+                <div className="flex items-center justify-between p-3 bg-secondary/30 rounded-lg border border-border/50">
+                  <span className="text-foreground font-medium text-sm flex items-center gap-2"><Layout size={16} className="text-muted-foreground" /> Scaffold</span>
+                  {state?.implementation?.scaffolded ? (
+                    <span className="text-emerald-600 bg-emerald-50 dark:bg-emerald-900/20 px-2 py-0.5 rounded text-xs font-medium border border-emerald-200 dark:border-emerald-800">Done</span>
+                  ) : (
+                    <span className="text-muted-foreground bg-secondary px-2 py-0.5 rounded text-xs font-medium border border-border">Pending</span>
+                  )}
+                </div>
+
+                {/* Git Status */}
+                {state?.implementation?.git?.initialized && (
+                  <div className="flex items-center justify-between p-3 bg-secondary/30 rounded-lg border border-border/50">
+                    <span className="text-foreground font-medium text-sm flex items-center gap-2">
+                      <svg className="w-4 h-4 text-muted-foreground" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" /></svg>
+                      {state.implementation.git.branch || 'main'}
+                    </span>
+                    <div className="flex items-center gap-2">
+                      {state.implementation.git.uncommitted > 0 && (
+                        <span className="text-amber-600 bg-amber-50 dark:bg-amber-900/20 px-2 py-0.5 rounded text-xs font-medium border border-amber-200 dark:border-amber-800">
+                          {state.implementation.git.uncommitted} uncommitted
+                        </span>
+                      )}
+                      {state.implementation.git.uncommitted === 0 && (
+                        <span className="text-emerald-600 bg-emerald-50 dark:bg-emerald-900/20 px-2 py-0.5 rounded text-xs font-medium border border-emerald-200 dark:border-emerald-800">Clean</span>
+                      )}
+                    </div>
+                  </div>
+                )}
+
+                {/* Tests & Coverage */}
+                {state?.implementation?.scaffolded && (
+                  <div className="flex items-center justify-between p-3 bg-secondary/30 rounded-lg border border-border/50">
+                    <span className="text-foreground font-medium text-sm flex items-center gap-2">
+                      <CheckSquare size={16} className="text-muted-foreground" /> Tests
+                    </span>
+                    <div className="flex items-center gap-2">
+                      {state?.implementation?.tests?.hasTests ? (
+                        <span className="text-emerald-600 bg-emerald-50 dark:bg-emerald-900/20 px-2 py-0.5 rounded text-xs font-medium border border-emerald-200 dark:border-emerald-800">
+                          {state.implementation.tests.count} files
+                        </span>
+                      ) : (
+                        <span className="text-muted-foreground bg-secondary px-2 py-0.5 rounded text-xs font-medium border border-border">No tests</span>
+                      )}
+                      {state?.implementation?.coverage !== null && state?.implementation?.coverage !== undefined && (
+                        <span className={`px-2 py-0.5 rounded text-xs font-medium border ${state.implementation.coverage >= 80
+                          ? 'text-emerald-600 bg-emerald-50 dark:bg-emerald-900/20 border-emerald-200 dark:border-emerald-800'
+                          : state.implementation.coverage >= 50
+                            ? 'text-amber-600 bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-800'
+                            : 'text-red-600 bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800'
+                          }`}>
+                          {state.implementation.coverage}% coverage
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                )}
+
+                {/* Spec Progress */}
+                {state?.implementation?.specs && state.implementation.specs.total > 0 && (
+                  <div className="flex items-center justify-between p-3 bg-secondary/30 rounded-lg border border-border/50">
+                    <span className="text-foreground font-medium text-sm flex items-center gap-2">
+                      <FileText size={16} className="text-muted-foreground" /> Specs
+                    </span>
+                    <span className={`px-2 py-0.5 rounded text-xs font-medium border ${state.implementation.specs.completed === state.implementation.specs.total
+                      ? 'text-emerald-600 bg-emerald-50 dark:bg-emerald-900/20 border-emerald-200 dark:border-emerald-800'
+                      : 'text-blue-600 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800'
+                      }`}>
+                      {state.implementation.specs.completed}/{state.implementation.specs.total} complete
+                    </span>
+                  </div>
+                )}
+              </div>
+
+              <div className="mt-6">
+                {!state?.implementation?.scaffolded ? (
+                  <PromptButton
+                    label="Scaffold App"
+                    prompt="Antigravity, scaffold the implementation. Read 'agent-os/commands/scaffold-implementation/scaffold-implementation.md'."
+                    onClick={copyToClipboard}
+                  />
+                ) : (
+                  <div className="p-3 bg-secondary/30 rounded-lg border border-border/50 text-sm text-muted-foreground text-center italic mb-4">
+                    App scaffolded. Ready for implementation.
+                  </div>
+                )}
+
+                {state?.implementation?.scaffolded && state?.design?.exportPrompts?.oneShot && (
+                  <div className="pt-3 border-t border-border/50">
+                    <p className="text-xs text-muted-foreground mb-2 font-medium">Implementation Options:</p>
+                    <div className="space-y-2">
+                      <PromptButton
+                        label="Option A: One-Shot (All)"
+                        prompt={`Antigravity, implement the app. Read 'product-plan/prompts/one-shot-prompt.md'. If Context7 is configured, use it to verify library documentation.`}
+                        onClick={copyToClipboard}
+                        small
+                        primary
+                      />
+                      {state?.design?.exportPrompts?.section && (
+                        <div className="relative">
+                          <PromptButton
+                            label="Option B: Incremental (Section)"
+                            prompt={`Antigravity, implement a section. Read 'product-plan/prompts/section-prompt.md'. Use Context7 for latest docs if available.`}
+                            onClick={copyToClipboard}
+                            small
+                          />
+                          <p className="text-[10px] text-muted-foreground mt-1.5 text-center leading-tight">
+                            Build by spec from <strong>Feature Specs</strong> &larr;
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </section>
 
           </main>
         </div>

package/src/template/design-system/.gemini/hooks/ai-slop-guard.md

@@ -0,0 +1,80 @@
+# Hook: AI Slop Guard
+
+## Purpose
+Warn when code or design patterns that indicate generic AI-generated output are detected.
+
+## Trigger
+- PreToolUse: Before writing to CSS/TSX/HTML files
+- PreCommit: Before committing changes
+
+## Patterns to Watch For
+
+### Typography Slop
+- ⚠️ `font-family: 'Inter'` — Generic AI default font
+- ⚠️ `font-family: 'Roboto'` — Overused AI choice
+- ⚠️ `font-family: 'Open Sans'` — Too common
+- ⚠️ `font-family: 'Poppins'` — AI favorite
+
+### Color Slop
+- ⚠️ `#808080` or `gray` — Dead gray
+- ⚠️ `#cccccc`, `#dddddd` — Lifeless neutral
+- ⚠️ `#f5f5f5` — The AI background color
+- ⚠️ Pure `#000000` or `#ffffff` — No warmth
+- ⚠️ `#3b82f6` or `#2563eb` — Everyone's blue
+
+### Layout Slop
+- ⚠️ Cards in cards — Nested containers
+- ⚠️ Hero with centered h1 + subtitle + CTA — The AI template
+- ⚠️ 3-column feature grid — Overused pattern
+- ⚠️ Centered everything — Lazy alignment
+
+### Effect Slop
+- ⚠️ `backdrop-filter: blur(10px)` — Glassmorphism default
+- ⚠️ `border-radius: 12px` — The AI corner radius
+- ⚠️ `box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1)` — Tailwind default
+
+### Animation Slop
+- ⚠️ `transition: all` — Lazy animation
+- ⚠️ `animate-bounce` — Generic micro-interaction
+- ⚠️ `animate-pulse` — Loading skeleton overuse
+
+### Copy Slop
+- ⚠️ "Streamline your workflow" — Generic SaaS copy
+- ⚠️ "Unlock the power of" — AI cliché
+- ⚠️ "Seamlessly integrate" — Meaningless buzzword
+- ⚠️ "Best-in-class" — Tells nothing
+
+## Response When Detected
+
+```
+⚠️ AI Slop Guard Warning
+
+Detected potentially generic AI patterns:
+- [Pattern name]: [File:Line]
+
+Consider:
+1. Running `/audit` to get specific recommendations
+2. Consulting the frontend-design skill for alternatives
+3. Using `/bolder` if design is too safe
+
+Continue anyway? [y/N]
+```
+
+## Configuration
+Users can customize in `.gemini/settings.json`:
+```json
+{
+  "hooks": {
+    "ai-slop-guard": {
+      "enabled": true,
+      "strictness": "medium",  // low, medium, high
+      "ignore": ["Inter"]      // Patterns to ignore
+    }
+  }
+}
+```
+
+## Notes
+- This is a warning, not a blocker
+- Some patterns are acceptable in context
+- The goal is awareness, not restriction

package/src/template/design-system/.gemini/hooks/on-design-complete.md

@@ -0,0 +1,63 @@
+# Hook: On Design Complete
+
+## Purpose
+Automatically run quality checks when a design phase is completed.
+
+## Trigger
+After completing:
+- `/design-tokens`
+- `/design-shell`
+- `/design-screen`
+
+## Actions
+
+### 1. Run Auto-Audit
+Execute a mini-audit focusing on the just-completed work:
+
+**After `/design-tokens`:**
+- Check for AI slop fonts
+- Verify color hierarchy exists
+- Ensure contrast ratios meet WCAG AA
+- Validate color format consistency
+
+**After `/design-shell`:**
+- Check for AI slop layout patterns
+- Verify touch targets (44x44 minimum)
+- Check spacing consistency
+- Validate responsive breakpoints
+
+**After `/design-screen`:**
+- Full component audit
+- Accessibility check
+- Performance impact assessment
+
+### 2. Generate Report
+Save audit results to `design-system/QA/[phase]-audit.md`
+
+### 3. Suggest Next Steps
+Based on audit results:
+- If issues found: Suggest specific fix commands
+- If clean: Suggest next phase
+
+## Output Format
+
+```
+✅ Design phase completed!
+
+Auto-audit results:
+├── Accessibility: ✓ Pass
+├── Typography: ⚠️ 1 warning (consider font alternatives)
+├── Colors: ✓ Pass
+└── Layout: ✓ Pass
+
+Suggestions:
+- Run `/critique` for UX evaluation
+- Continue to `/design-shell` when ready
+
+Full report: design-system/QA/tokens-audit.md
+```
+
+## Notes
+- This hook runs automatically, no user action needed
+- Reports accumulate, so you can see progress over time
+- Hook can be disabled in settings if desired

package/src/template/eslint.config.js

@@ -0,0 +1,37 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+    { ignores: ['dist', 'node_modules', 'coverage', '.next', 'build'] },
+    {
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        files: ['**/*.{ts,tsx}'],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser,
+        },
+        plugins: {
+            'react-hooks': reactHooks,
+            'react-refresh': reactRefresh,
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            'react-refresh/only-export-components': [
+                'warn',
+                { allowConstantExport: true },
+            ],
+            // Strict TypeScript rules
+            '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+            '@typescript-eslint/no-explicit-any': 'warn',
+            '@typescript-eslint/explicit-function-return-type': 'off',
+            '@typescript-eslint/explicit-module-boundary-types': 'off',
+            // Best practices
+            'no-console': ['warn', { allow: ['warn', 'error'] }],
+            'prefer-const': 'error',
+            'no-var': 'error',
+        },
+    },
+)

package/src/template/lint-staged.config.js

@@ -0,0 +1,6 @@
+export default {
+    '*.{ts,tsx}': ['eslint --fix', 'prettier --write'],
+    '*.{js,jsx,cjs,mjs}': ['eslint --fix', 'prettier --write'],
+    '*.{json,md,yml,yaml}': ['prettier --write'],
+    '*.css': ['prettier --write'],
+}

package/src/template/package.json

@@ -19,9 +19,32 @@
         "start:control": "cd control-center/frontend && npm run dev -- --port 5401",
         "start:app": "cd app && npm run dev -- --port 5402",
         "build": "npm run build --workspaces",
-        "test": "npm run test --workspaces"
+        "test": "vitest run",
+        "test:watch": "vitest",
+        "test:coverage": "vitest run --coverage",
+        "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
+        "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx --fix",
+        "format": "prettier --write .",
+        "format:check": "prettier --check .",
+        "typecheck": "tsc --noEmit",
+        "prepare": "husky"
     },
     "devDependencies": {
-        "concurrently": "^8.2.2"
+        "@commitlint/cli": "^19.0.0",
+        "@commitlint/config-conventional": "^19.0.0",
+        "@eslint/js": "^9.0.0",
+        "@types/node": "^20.11.0",
+        "@vitest/coverage-v8": "^2.0.0",
+        "concurrently": "^8.2.2",
+        "eslint": "^9.0.0",
+        "eslint-plugin-react-hooks": "^5.0.0",
+        "eslint-plugin-react-refresh": "^0.4.0",
+        "globals": "^15.0.0",
+        "husky": "^9.0.0",
+        "lint-staged": "^15.0.0",
+        "prettier": "^3.2.0",
+        "prettier-plugin-tailwindcss": "^0.6.0",
+        "typescript-eslint": "^8.0.0",
+        "vitest": "^2.0.0"
     }
 }

package/src/template/src/__tests__/example.test.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest'
+
+describe('Example Test Suite', () => {
+    it('should pass a basic test', () => {
+        expect(1 + 1).toBe(2)
+    })
+
+    it('should handle strings', () => {
+        expect('hello world').toContain('world')
+    })
+
+    it('should handle arrays', () => {
+        const items = [1, 2, 3]
+        expect(items).toHaveLength(3)
+        expect(items).toContain(2)
+    })
+})

package/src/template/src/__tests__/setup.ts

@@ -0,0 +1,14 @@
+import '@testing-library/jest-dom/vitest'
+
+// Global test setup
+beforeAll(() => {
+    // Setup code that runs before all tests
+})
+
+afterEach(() => {
+    // Cleanup after each test
+})
+
+afterAll(() => {
+    // Cleanup code that runs after all tests
+})

package/src/template/vitest.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+import { resolve } from 'path'
+
+export default defineConfig({
+    plugins: [react()],
+    test: {
+        globals: true,
+        environment: 'jsdom',
+        setupFiles: ['./src/__tests__/setup.ts'],
+        include: ['**/*.{test,spec}.{ts,tsx}'],
+        coverage: {
+            reporter: ['text', 'json', 'html'],
+            exclude: [
+                'node_modules/',
+                'src/__tests__/setup.ts',
+            ],
+        },
+    },
+    resolve: {
+        alias: {
+            '@': resolve(__dirname, './src'),
+        },
+    },
+})