takomi 2.0.4 → 2.0.6

package/assets/.agent/skills/takomi/workflows/stitch.md

@@ -0,0 +1,149 @@
+---
+description: Google Stitch design-to-code workflow. Routes to the correct sub-skill based on what the user needs.
+---
+
+# /stitch — Google Stitch Design Platform
+
+## Overview
+This workflow orchestrates the full Stitch design-to-code pipeline. All skills live in `.agent/skills/stitch/`.
+
+**The Stitch bundle is NOT a pick-one-and-go system.** It's a **pipeline** of 6 skills that chain together. Your job is to guide the user through the journey, always suggesting the next logical step.
+
+## Step 1: Read the Master Skill
+// turbo
+Read the master SKILL.md — it contains the **Pipeline Orchestration Protocol** which you MUST follow:
+```
+view_file .agent/skills/stitch/SKILL.md
+```
+
+## Step 2: Identify the Entry Point
+
+Use the decision tree from the master SKILL.md to determine WHERE the user enters the pipeline:
+
+| User says... | Start at | Pipeline position |
+|---|---|---|
+| "Build me a site with Stitch" | `design-md` | Step 1 → full pipeline |
+| "I have a Stitch project, make it consistent" | `design-md` | Step 1 → Steps 2-3 |
+| "Generate a page with Stitch" | `enhance-prompt` | Step 2 → Step 3 |
+| "I have Stitch HTML, make it React" | `react-components` | Step 4 → shadcn-ui |
+| "Make a video of my Stitch screens" | `remotion` | Step 5 (standalone) |
+| "I need UI components for my React app" | `shadcn-ui` | Companion (standalone) |
+| "Improve my Stitch prompt" | `enhance-prompt` | Step 2 → Step 3 |
+| "I already have DESIGN.md, build pages" | `stitch-loop` | Step 3 → Steps 4-5 |
+
+## Step 3: Load the Entry Sub-Skill
+// turbo
+Read the specific sub-skill's `SKILL.md`:
+```
+view_file .agent/skills/stitch/{sub-skill}/SKILL.md
+```
+
+## Step 4: Check for Supporting Resources
+
+Each sub-skill may have `resources/`, `examples/`, and `scripts/` folders:
+- **resources/**: Checklists, style guides, reference docs
+- **examples/**: Gold-standard reference implementations
+- **scripts/**: Validation and networking helpers
+
+```
+ls .agent/skills/stitch/{sub-skill}/
+```
+
+## Step 5: Execute the Sub-Skill
+
+Follow the sub-skill's instructions step by step. Key reminders:
+
+1. **Stitch MCP Required**: Most skills need the Stitch MCP server connected.
+2. **DESIGN.md First**: If building multiple pages, always generate `DESIGN.md` first using `design-md`.
+3. **shadcn-ui is standalone**: It works without the Stitch MCP — just needs the shadcn CLI or MCP.
+
+## Step 6: Suggest the Next Step (CRITICAL — DO NOT SKIP)
+
+**After completing any sub-skill, you MUST suggest the next step in the pipeline.**
+
+This is the full chain — follow it:
+
+```
+design-md (Step 1)
+  ↓ suggest → enhance-prompt
+enhance-prompt (Step 2)
+  ↓ suggest → stitch-loop
+stitch-loop (Step 3)
+  ↓ suggest → react-components OR remotion
+react-components (Step 4)
+  ↓ suggest → shadcn-ui AND/OR remotion
+remotion (Step 5)
+  ↓ pipeline complete
+shadcn-ui (Companion)
+  ↓ standalone — no automatic next step
+```
+
+**How to suggest:**
+```
+"✅ [Skill Name] is complete. Here's what I accomplished: [summary].
+
+The next step in the pipeline is [Next Skill Name]:
+• [What it does]
+• [Why it's useful right now]
+
+Would you like to continue with [Next Skill], or is there something else you'd like to do?"
+```
+
+**If there are multiple next options (e.g., after stitch-loop):**
+```
+"✅ stitch-loop is complete. Your site pages are built.
+
+You have two options for the next step:
+1. **react-components** — Convert these HTML pages into production-ready 
+   React/TypeScript components with proper types and mock data.
+2. **remotion** — Create a professional walkthrough video showcasing 
+   all the screens you just built.
+
+Which would you like? (You can do both — react-components first, then remotion.)"
+```
+
+## Step 7: Loop Back to Step 3
+
+If the user wants to continue to the next skill:
+1. Go back to **Step 3** and load the next sub-skill's `SKILL.md`
+2. Execute it (Step 5)
+3. Suggest the next step (Step 6)
+4. Repeat until the pipeline is complete or the user stops
+
+## Pipeline Summary
+
+```
+┌─────────────┐     ┌─────────────────┐     ┌──────────────┐
+│  design-md  │ ──→ │ enhance-prompt  │ ──→ │ stitch-loop  │
+│ STEP 1      │     │ STEP 2          │     │ STEP 3       │
+│ Extract     │     │ Polish prompts  │     │ Build pages  │
+│ design      │     │ with design     │     │ iteratively  │
+│ system      │     │ tokens          │     │ with batons  │
+└─────────────┘     └─────────────────┘     └──────┬───────┘
+                                                   │
+                                             ┌─────┴──────┐
+                                             ▼            ▼
+                                   ┌──────────────┐ ┌──────────┐
+                                   │   react-     │ │ remotion │
+                                   │ components   │ │ STEP 5   │
+                                   │ STEP 4       │ │ Video    │
+                                   │ Production   │ │ showcase │
+                                   │ React code   │ └──────────┘
+                                   └──────┬───────┘
+                                          │
+                                          ▼
+                                   ┌──────────────┐
+                                   │  shadcn-ui   │
+                                   │ COMPANION    │
+                                   │ Polish with  │
+                                   │ component    │
+                                   │ library      │
+                                   └──────────────┘
+```
+
+## Prerequisites
+
+- **Stitch MCP Server** — Required for `design-md`, `enhance-prompt`, `stitch-loop`, `react-components`, `remotion`
+- **shadcn MCP Server or CLI** — Required for `shadcn-ui`
+- **Remotion** — Required for the `remotion` sub-skill
+- **Node.js + npm** — Required for `react-components` validation scripts

package/assets/.agent/skills/takomi/workflows/vibe-build.md

@@ -0,0 +1,271 @@
+---
+description: The VibeCode Builder V3 - Scaffolds the project with verification gates and FR-based implementation.
+---
+
+# Workflow: Build VibeCode Project V3 (The Builder)
+
+> **Version 3** — Verification after every file, FR-based progress, type-safe development.
+
+**You are the VibeCode Builder Agent.**  
+You EXECUTE the Architect's plan. You do NOT strategize — you BUILD.  
+Follow the blueprints precisely. Verify constantly.
+
+---
+
+## Steps
+
+### 1. Context Loading (MANDATORY)
+
+Before writing ANY code, read and internalize:
+
+```powershell
+cat docs/Project_Requirements.md    # The PRD
+cat docs/Coding_Guidelines.md       # The Law
+ls docs/issues/                     # All FR issues
+ls docs/mockups/                    # UI templates (if exist)
+```
+
+**Acknowledge aloud:**
+- "I will run `tsc --noEmit` after every TypeScript file edit"
+- "I will reference the issue file for each FR I implement"
+- "I will mark acceptance criteria as I complete them"
+
+---
+
+### 2. Project Scaffolding (Next.js)
+
+> [!IMPORTANT]
+> Use pnpm and PowerShell-safe commands.
+
+```powershell
+# Create temp directory for scaffolding
+mkdir temp-scaffold
+
+# Scaffold Next.js (skip install to avoid virtual store issues)
+pnpm create next-app temp-scaffold --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --use-pnpm --no-git --skip-install
+
+# Merge into project root
+Get-ChildItem -Path temp-scaffold -Force | Copy-Item -Destination . -Recurse -Force
+
+# Cleanup
+Remove-Item -Path temp-scaffold -Recurse -Force
+
+# Install in root
+pnpm install
+```
+
+---
+
+### 3. Setup Styling (Tailwind v4)
+
+Update `src/app/globals.css`:
+
+```css
+@import "tailwindcss";
+
+@theme {
+  --color-background: #ffffff;
+  --color-foreground: #0b1221;
+  --color-border: #e5e7eb;
+  --color-ring: #3b82f6;
+  
+  --color-primary: #2563eb;
+  --color-secondary: #7c3aed;
+}
+
+@theme .dark {
+  --color-background: #0b1221;
+  --color-foreground: #f3f4f6;
+  --color-border: #374151;
+}
+
+@layer base {
+  * { @apply border-border; }
+  body { @apply bg-background text-foreground; }
+}
+```
+
+---
+
+### 4. MUS Implementation Loop
+
+For each FR marked as `MUS` in the PRD:
+
+#### 4.1 Announce
+```
+"📋 Implementing FR-XXX: [Title]"
+```
+
+#### 4.2 Read the Issue
+Open `docs/issues/FR-XXX.md` and review:
+- Proposed Solution
+- Technical Approach
+- Acceptance Criteria
+
+#### 4.3 Implement
+Write the code following:
+- The guidelines in `docs/Coding_Guidelines.md`
+- The mockups in `docs/mockups/` (if any)
+- The patterns suggested in the issue (adapt as needed)
+
+#### 4.4 Verify (MANDATORY)
+
+> [!CAUTION]
+> After EVERY TypeScript/TSX file edit:
+
+```bash
+npx tsc --noEmit
+```
+
+**If this fails:**
+1. STOP. Do not touch another file.
+2. Fix the error.
+3. Re-run until it passes.
+4. Only then continue.
+
+#### 4.5 Mark Progress
+Edit `docs/issues/FR-XXX.md` and check off completed acceptance criteria:
+
+```markdown
+## Acceptance Criteria
+
+- [x] Testable outcome 1  ✅ Completed
+- [x] Testable outcome 2  ✅ Completed
+- [ ] Testable outcome 3  ← Still in progress
+```
+
+---
+
+### 5. Progress Checkpoints
+
+After every 3 FRs, pause and report:
+
+```
+📊 **Progress Checkpoint**
+
+✅ Completed:
+- FR-001: [Title]
+- FR-002: [Title]
+- FR-003: [Title]
+
+📈 Type-check: PASS
+🎯 Next: FR-004, FR-005, FR-006
+```
+
+---
+
+### 6. Final Verification Gate
+
+Before claiming "MUS complete", run full verification:
+
+```bash
+python scripts/vibe-verify.py
+```
+
+**All checks must pass:**
+- ✅ TypeScript: PASS
+- ✅ Lint: PASS
+- ✅ Build: PASS
+
+If any check fails, fix it before proceeding.
+
+---
+
+### 7. Generate Handoff Report
+
+Create `docs/Builder_Handoff_Report.md`:
+
+```markdown
+# Builder Handoff Report
+
+**Generated:** [Date]
+**Session:** Build V3
+
+## What Was Built
+
+### MUS Features Implemented
+- [x] FR-001: [Title]
+- [x] FR-002: [Title]
+- [x] FR-003: [Title]
+
+### Files Created
+```
+src/
+├── app/
+│   ├── page.tsx
+│   └── ...
+├── features/
+│   └── ...
+└── components/
+    └── ...
+```
+
+## Verification Status
+
+| Check | Status |
+|-------|--------|
+| TypeScript | ✅ PASS |
+| Lint | ✅ PASS |
+| Build | ✅ PASS |
+
+## How to Run
+
+```bash
+pnpm dev    # Development
+pnpm build  # Production build
+```
+
+## What's Next
+
+### Future Features (from PRD)
+- [ ] FR-XXX: [Title]
+- [ ] FR-XXX: [Title]
+
+To continue development, run `/vibe-continueBuild` in a new session.
+```
+
+---
+
+### 8. Final Message
+
+"🏗️ **Build Phase Complete.**
+
+**MUS Implemented:**
+- X features built
+- All type-checks pass
+- All acceptance criteria verified
+
+**Verification:**
+- TypeScript: ✅
+- Lint: ✅
+- Build: ✅
+
+See `docs/Builder_Handoff_Report.md` for details.
+
+**To continue:**
+- `/vibe-continueBuild` — Implement remaining features
+- `/vibe-finalize` — Generate final handoff
+
+*Vibe complete. Code deployed.*"
+
+---
+
+## Recovery Protocol
+
+If something breaks badly:
+
+```bash
+# See what changed
+git status
+git diff
+
+# Revert specific file
+git checkout -- path/to/file.tsx
+
+# Save and revert all
+git stash
+
+# Restore later
+git stash pop
+```
+

package/assets/.agent/skills/takomi/workflows/vibe-continueBuild.md

@@ -0,0 +1,184 @@
+---
+description: Continue building where the last agent left off. Use after initial build or in new sessions.
+---
+
+# Workflow: Continue Build
+
+> Pick up where the last agent left off. Use this when:
+> - Starting a new chat after initial build
+> - Resuming work after a break
+> - Context got lost mid-session
+
+---
+
+## Steps
+
+### 1. Context Recovery
+
+Read and internalize the project state:
+
+```powershell
+# Core documentation
+cat docs/Coding_Guidelines.md       # The Law
+cat docs/Project_Requirements.md    # The PRD
+
+# List all issues
+ls docs/issues/
+
+# Check for mockups
+ls docs/mockups/
+```
+
+**State aloud:**
+- "I will run `tsc --noEmit` after every file edit"
+- "I will reference issue files for each FR"
+- "I will mark acceptance criteria as I complete them"
+
+---
+
+### 2. Health Check
+
+Verify the project is in a good state:
+
+```bash
+# Check for uncommitted changes
+git status
+
+# Type-check current state
+npx tsc --noEmit
+
+# Quick verification (optional)
+python scripts/vibe-verify.py --quick
+```
+
+**If type-check fails:** Fix existing errors before starting new work.
+
+---
+
+### 3. Progress Audit
+
+Scan the issues folder to find incomplete work:
+
+```powershell
+# For each issue file, check for unchecked acceptance criteria
+Get-Content docs/issues/*.md | Select-String "- \[ \]"
+```
+
+**Report:**
+```
+📊 **Progress Audit**
+
+✅ Completed FRs:
+- FR-001: [Title] (all criteria checked)
+- FR-002: [Title] (all criteria checked)
+
+🔄 In Progress:
+- FR-003: [Title] (2/5 criteria done)
+
+⏳ Not Started:
+- FR-004: [Title]
+- FR-005: [Title]
+```
+
+---
+
+### 4. Verify Previous Work (Trust but Verify)
+
+Before starting new work, spot-check that "completed" FRs actually work:
+
+For each "completed" FR:
+1. Check if the files mentioned in the issue exist
+2. Check if the feature is accessible (route exists, component renders)
+3. Quick manual sanity check
+
+**If something is broken:**
+- The previous agent lied
+- Fix it first
+- Uncheck the acceptance criteria that don't work
+
+---
+
+### 5. Resume Implementation
+
+Pick up the next incomplete FR:
+
+```
+"📋 Resuming with FR-XXX: [Title]"
+```
+
+**For each FR:**
+
+1. **Read the issue** — `docs/issues/FR-XXX.md`
+2. **Implement** — Follow the Proposed Solution (adapt as needed)
+3. **Verify** — `npx tsc --noEmit` after every file edit
+4. **Mark complete** — Check off acceptance criteria
+5. **Update issue** — Edit the file to reflect progress
+
+---
+
+### 6. Progress Checkpoints
+
+After completing each FR, report:
+
+```
+✅ **FR-XXX Complete**
+
+Acceptance Criteria:
+- [x] Criterion 1
+- [x] Criterion 2
+- [x] Criterion 3
+
+📈 Type-check: PASS
+🎯 Next: FR-YYY: [Title]
+
+Continue? (yes/no)
+```
+
+---
+
+### 7. Session End
+
+When stopping work (user says stop or all FRs done):
+
+```
+📊 **Session Summary**
+
+This session:
+- Completed: FR-XXX, FR-YYY
+- Fixed: [any bugs found]
+- In progress: FR-ZZZ (3/5 criteria done)
+
+Overall project:
+- Total FRs: X
+- Completed: Y
+- Remaining: Z
+
+To continue: `/vibe-continueBuild`
+To finalize: `/vibe-finalize`
+```
+
+---
+
+## Handling Issues
+
+### If Type-Check Fails
+
+1. Read the error carefully
+2. Fix the specific file
+3. Re-run `tsc --noEmit`
+4. Don't proceed until it passes
+
+### If Previous Work is Broken
+
+1. Document what's broken
+2. Uncheck the relevant acceptance criteria
+3. Fix before moving to new work
+4. Re-check after fixing
+
+### If Architecture Needs to Change
+
+1. Announce the proposed change
+2. Explain why the original approach doesn't work
+3. Get user approval for significant changes
+4. Update the issue file with new approach
+

package/assets/.agent/skills/takomi/workflows/vibe-design.md

@@ -0,0 +1,98 @@
+---
+description: The VibeCode Designer - Generate Design System and Page Mockups.
+---
+# Workflow: Initialize VibeCode Design (The Designer)
+
+**System Instruction: VibeCode Persona Activation**
+You are the **VibeCode Design Architect**. You are a Senior UI/UX Designer and Design Systems Engineer.
+Your goal is to define the visual identity of the project before any code is written.
+
+**Your Core Responsibilities:**
+1.  **Brand Discovery:** Understand the visual "vibe" (colors, typography, aesthetics).
+2.  **Sitemap Architecture:** Generate the complete visual sitemap.
+3.  **Design System Foundation:** Create a portable `design-system.html` file.
+4.  **Page Mockups:** Generate HTML mockups for every page in the sitemap.
+5.  **Builder Prompt Update:** Enforce mockup usage in the Builder Prompt.
+
+---
+
+## Steps
+
+### 1. Brand Discovery (Interview)
+Read `docs/Project_Requirements.md` for context. Then interview the user:
+
+**Gather:**
+- **Design Vibe:** (Keywords: "Minimal, trustworthy, calm" or "Bold, playful, vibrant")
+- **Logo:** (SVG code or description)
+- **Color Palette:** (Hex codes, or "generate based on vibe")
+- **Typography:** (Font pairing, or "suggest one")
+- **Photography/Illustration Style:** (Stock photos, illustrations, 3D?)
+- **Animation Style:** (Subtle, playful, sharp?)
+
+### 2. Sitemap Generation
+Generate `docs/design/sitemap.md` based on the PRD. Include ALL pages.
+
+**Format:**
+```markdown
+# Visual Sitemap
+
+| Page | Purpose | Key Components |
+| :--- | :--- | :--- |
+| Home | Landing page | Hero, Features, CTA |
+| About | Brand story | Bio, Timeline |
+| Dashboard | User hub | Stats, Cards, Charts |
+```
+
+### 3. Design System Foundation
+Create `docs/design/design-system.html`.
+
+**Requirements:**
+- Single, portable HTML file.
+- Use **Tailwind CSS CDN** for styling.
+- Use **Heroicons CDN** for icons.
+- Must be fully responsive.
+
+**Sections:**
+1.  **Branding:** Logo display.
+2.  **Color Palette:** Primary, Accent, Neutral, Semantic (Success/Error/Warning).
+3.  **Typography:** H1-H6, Body text, all weights.
+4.  **Core Components:** Buttons (all states), Cards, Form Elements.
+5.  **Layout & Spacing:** Spacing scale, border-radius values.
+6.  **Navigation:** Desktop navbar, Mobile sidebar.
+
+### 4. Page Mockups
+For **each page in the sitemap**, create an HTML mockup in `docs/mockups/`.
+
+**Example:**
+- `docs/mockups/home.html`
+- `docs/mockups/about.html`
+- `docs/mockups/dashboard.html`
+
+**Requirements:**
+- Must use styles from `design-system.html`.
+- Tailwind CDN, responsive, placeholder content.
+
+### 5. Update Builder Prompt
+**CRITICAL:** After generating mockups, update `docs/Builder_Prompt.md`.
+
+**Add this instruction:**
+```markdown
+## Mandatory Mockup-Driven Implementation
+The `/docs/mockups` folder is the **UNQUESTIONABLE source of truth** for all front-end UI/UX.
+You must NOT deviate from the layout, color palette, typography, or component structure defined in the mockups.
+Before implementing any page, open the corresponding mockup file and replicate it exactly.
+```
+
+### 6. The Handoff
+Your work as Designer is complete.
+
+**Final Message:**
+"🎨 **Design System Complete.**
+- `docs/design/design-system.html` created.
+- `docs/mockups/` populated with page mockups.
+- `docs/Builder_Prompt.md` updated to enforce mockup usage.
+
+To begin construction, open a **new Agent session** and run:
+`/build_vibecode_project`
+
+*Design with intention. Code with precision.*"