takomi 2.0.4

package/assets/.agent/skills/social-content/references/reverse-engineering.md

@@ -0,0 +1,190 @@
+# Reverse Engineering Viral Content
+
+Instead of guessing what works, systematically analyze top-performing content in your niche and extract proven patterns.
+
+## The 6-Step Framework
+
+### 1. NICHE ID — Find Top Creators
+
+Identify 10-20 creators in your space who consistently get high engagement:
+
+**Selection criteria:**
+- Posting consistently (3+ times/week)
+- High engagement rate relative to follower count
+- Audience overlap with your target market
+- Mix of established and rising creators
+
+**Where to find them:**
+- LinkedIn: Search by industry keywords, check "People also viewed"
+- Twitter/X: Check who your target audience follows and engages with
+- Use tools like SparkToro, Followerwonk, or manual research
+- Look at who gets featured in industry newsletters
+
+### 2. SCRAPE — Collect Posts at Scale
+
+Gather 500-1000+ posts from your identified creators for analysis:
+
+**Tools:**
+- **Apify** — LinkedIn scraper, Twitter scraper actors
+- **Phantom Buster** — Multi-platform automation
+- **Export tools** — Platform-specific export features
+- **Manual collection** — For smaller datasets, copy/paste into spreadsheet
+
+**Data to collect:**
+- Post text/content
+- Engagement metrics (likes, comments, shares, saves)
+- Post format (text-only, carousel, video, image)
+- Posting time/day
+- Hook/first line
+- CTA used
+- Topic/theme
+
+### 3. ANALYZE — Extract What Actually Works
+
+Sort and analyze the data to find patterns:
+
+**Quantitative analysis:**
+- Rank posts by engagement rate
+- Identify top 10% performers
+- Look for format patterns (do carousels outperform?)
+- Check timing patterns (best days/times)
+- Compare topic performance
+
+**Qualitative analysis:**
+- What hooks do top posts use?
+- How long are high-performing posts?
+- What emotional triggers appear?
+- What formats repeat?
+- What topics consistently perform?
+
+**Questions to answer:**
+- What's the average length of top posts?
+- Which hook types appear most in top 10%?
+- What CTAs drive most comments?
+- What topics get saved/shared most?
+
+### 4. PLAYBOOK — Codify Patterns
+
+Document repeatable patterns you can use:
+
+**Hook patterns to codify:**
+```
+Pattern: "I [unexpected action] and [surprising result]"
+Example: "I stopped posting daily and my engagement doubled"
+Why it works: Curiosity gap + contrarian
+
+Pattern: "[Specific number] [things] that [outcome]:"
+Example: "7 pricing mistakes that cost me $50K:"
+Why it works: Specificity + loss aversion
+
+Pattern: "[Controversial take]"
+Example: "Cold outreach is dead."
+Why it works: Pattern interrupt + invites debate
+```
+
+**Format patterns:**
+- Carousel: Hook slide → Problem → Solution steps → CTA
+- Thread: Hook → Promise → Deliver → Recap → CTA
+- Story post: Hook → Setup → Conflict → Resolution → Lesson
+
+**CTA patterns:**
+- Question: "What would you add?"
+- Agreement: "Agree or disagree?"
+- Share: "Tag someone who needs this"
+- Save: "Save this for later"
+
+### 5. LAYER VOICE — Apply Direct Response Principles
+
+Take proven patterns and make them yours with these voice principles:
+
+**"Smart friend who figured something out"**
+- Write like you're texting advice to a friend
+- Share discoveries, not lectures
+- Use "I found that..." not "You should..."
+- Be helpful, not preachy
+
+**Specific > Vague**
+```
+❌ "I made good revenue"
+✅ "I made $47,329"
+
+❌ "It took a while"
+✅ "It took 47 days"
+
+❌ "A lot of people"
+✅ "2,847 people"
+```
+
+**Short. Breathe. Land.**
+- One idea per sentence
+- Use line breaks liberally
+- Let important points stand alone
+- Create rhythm: short, short, longer explanation
+
+```
+❌ "I spent three years building my business the wrong way before I finally realized that the key to success was focusing on fewer things and doing them exceptionally well."
+
+✅ "I built wrong for 3 years.
+
+Then I figured it out.
+
+Focus on less.
+Do it exceptionally well.
+
+Everything changed."
+```
+
+**Write from emotion**
+- Start with how you felt, not what you did
+- Use emotional words: frustrated, excited, terrified, obsessed
+- Show vulnerability when authentic
+- Connect the feeling to the lesson
+
+```
+❌ "Here's what I learned about pricing"
+
+✅ "I was terrified to raise my prices.
+
+My hands were shaking when I sent the email.
+
+Here's what happened..."
+```
+
+### 6. CONVERT — Turn Attention into Action
+
+Bridge from engagement to business results:
+
+**Soft conversions:**
+- Newsletter signups in bio/comments
+- Free resource offers in follow-up comments
+- DM triggers ("Comment X and I'll send you...")
+- Profile visits → optimized profile with clear CTA
+
+**Direct conversions:**
+- Link in comments (not post body on LinkedIn)
+- Contextual product mentions within valuable content
+- Case study posts that naturally showcase your work
+- "If you want help with this, DM me" (sparingly)
+
+---
+
+## The Formula
+
+```
+1. Find what's already working (don't guess)
+2. Extract the patterns (hooks, formats, CTAs)
+3. Layer your authentic voice on top
+4. Test and iterate based on your own data
+```
+
+## Reverse Engineering Checklist
+
+- [ ] Identified 10-20 top creators in niche
+- [ ] Collected 500+ posts for analysis
+- [ ] Ranked by engagement rate
+- [ ] Documented top 10 hook patterns
+- [ ] Documented top 5 format patterns
+- [ ] Documented top 5 CTA patterns
+- [ ] Created voice guidelines (specificity, brevity, emotion)
+- [ ] Built template library from patterns
+- [ ] Set up tracking for your own content performance

package/assets/.agent/skills/spawn-task/SKILL.md

@@ -0,0 +1,130 @@
+---
+name: spawn-task
+description: Create comprehensive, self-contained task prompts for implementing features or fixing bugs.
+---
+
+# Spawn Task Skill
+
+Create detailed task prompts that another agent (or future self) can execute without additional context.
+
+## When to Use
+- Breaking down complex features
+- Creating implementation specs
+- When user says "spawn a task for..."
+- Planning multi-phase work
+
+## Task Discovery
+
+Gather from user:
+- **Task Description**: What needs to be done?
+- **Priority**: High / Medium / Low
+- **Scope**: What's included/excluded?
+- **Timeline**: Expected completion (optional)
+
+## Current State Analysis
+
+```bash
+# Check related files
+find src -name "*relevant*" -type f
+
+# Check documentation
+ls docs/features/
+
+# Check GitHub issues
+gh issue list --search "[related term]"
+```
+
+## Task Prompt Template
+
+Create `docs/tasks/[TaskName].md`:
+
+```markdown
+# 🎯 Task: [Task Name]
+
+**Objective:** [Clear, measurable goal]
+**Priority:** [High/Medium/Low]
+**Scope:** [What's included/excluded]
+
+---
+
+## 📋 Requirements
+
+### Functional Requirements
+- **[REQ-001]** [Requirement with acceptance criteria]
+
+### Technical Requirements
+- **[TECH-001]** [Technical specification]
+
+---
+
+## 🏗️ Implementation Plan
+
+### Phase 1: Setup
+- [ ] [Setup task]
+
+### Phase 2: Core Implementation
+- [ ] [Core task]
+
+### Phase 3: Enhancement
+- [ ] [Enhancement task]
+
+### Phase 4: Testing & Documentation
+- [ ] [Testing task]
+
+---
+
+## 📁 Files to Create/Modify
+
+| File | Action | Purpose |
+|------|--------|---------|
+| `src/features/[Feature]/...` | Create | [Purpose] |
+
+---
+
+## ✅ Success Criteria
+
+### Code Quality
+- [ ] TypeScript compliant (no `any`)
+- [ ] Passes ESLint
+- [ ] Unit tests with >80% coverage
+
+### Performance
+- [ ] Bundle size increase < 5KB
+- [ ] Load time < 1.5s
+
+### Functionality
+- [ ] All requirements implemented
+- [ ] Mobile responsive
+
+---
+
+## 🔗 Dependencies
+
+**Depends on:** [Other components]
+**Used by:** [Components that use this]
+
+---
+
+## 🚀 Getting Started
+
+1. Read this task prompt completely
+2. Review related files
+3. Begin with Phase 1
+4. Provide progress updates after each phase
+```
+
+## Options After Spawning
+- **A)** Start implementing now
+- **B)** Create GitHub Issue to track
+- **C)** Save task for later
+
+## Task Categories
+- 🆕 **Feature**: New functionality
+- 🐛 **Bug Fix**: Fixing broken behavior
+- ♻️ **Refactor**: Improving existing code
+- 📚 **Documentation**: Writing docs
+
+## Priority Guidelines
+- **High**: Blocking other work, user-facing bugs
+- **Medium**: Important features, non-blocking issues
+- **Low**: Nice-to-haves, minor improvements

package/assets/.agent/skills/stitch/SKILL.md

@@ -0,0 +1,258 @@
+---
+name: stitch
+description: |
+  Google Stitch design platform skill bundle. Covers design system extraction,
+  prompt enhancement, iterative site building, React component conversion,
+  Remotion walkthrough videos, and shadcn/ui component integration.
+  Activate when user mentions Stitch, design-to-code, DESIGN.md, shadcn/ui,
+  or iterative site generation.
+---
+
+# Google Stitch — Skill Bundle
+
+This folder contains 6 sub-skills for working with [Google Stitch](https://stitch.withgoogle.com/), a design-to-code platform with an MCP server. Each sub-skill has its own `SKILL.md` with full instructions.
+
+## Prerequisites
+
+Most skills require the **Stitch MCP Server** to be connected. The `shadcn-ui` skill works independently with the shadcn MCP server or CLI.
+
+---
+
+## 🔀 Pipeline Orchestration Protocol (READ THIS FIRST)
+
+> **YOU MUST follow this protocol.** Do not just load one sub-skill and stop. The Stitch bundle is a **pipeline** — each skill feeds into the next. Your job is to **guide the user through the full journey**, suggesting the next step after each skill completes.
+
+### The Full Pipeline (Design → Code → Video)
+
+```
+┌─────────────┐     ┌─────────────────┐     ┌──────────────┐     ┌───────────────┐     ┌──────────┐
+│  design-md  │ ──→ │ enhance-prompt  │ ──→ │ stitch-loop  │ ──→ │   react-      │ ──→ │ remotion │
+│ STEP 1      │     │ STEP 2          │     │ STEP 3       │     │ components    │     │ STEP 5   │
+│             │     │                 │     │              │     │ STEP 4        │     │          │
+│ Extract the │     │ Polish prompts  │     │ Build pages  │     │ Convert HTML  │     │ Create a │
+│ design      │     │ with design     │     │ iteratively  │     │ to production │     │ video    │
+│ system      │     │ tokens from     │     │ using the    │     │ React/TS      │     │ showcase │
+│ → DESIGN.md │     │ DESIGN.md       │     │ baton system │     │ components    │     │ of your  │
+│             │     │ → next-prompt   │     │ → full site  │     │ → src/        │     │ screens  │
+└─────────────┘     └─────────────────┘     └──────────────┘     └───────────────┘     └──────────┘
+                                                                        │
+                                                                  ┌─────┴──────┐
+                                                                  ▼            │
+                                                        ┌──────────────┐       │
+                                                        │  shadcn-ui   │       │
+                                                        │ COMPANION    │       │
+                                                        │              │       │
+                                                        │ Add polished │       │
+                                                        │ UI component │       │
+                                                        │ library      │       │
+                                                        └──────────────┘       │
+```
+
+### How to Orchestrate
+
+**After completing ANY sub-skill, you MUST:**
+1. Tell the user what was accomplished
+2. Explain what the **next logical step** in the pipeline is
+3. Ask if they want to continue to the next step
+4. If yes, load that sub-skill's `SKILL.md` and proceed
+
+**Example flow:**
+```
+✅ design-md complete → "Your DESIGN.md is ready. Next step: I can polish 
+   your first page prompt using enhance-prompt so Stitch generates a 
+   higher-quality result. Want to continue?"
+
+✅ enhance-prompt complete → "Your prompt is optimized. Next step: I can 
+   send this to Stitch and start building pages with stitch-loop. Ready?"
+
+✅ stitch-loop complete → "Your site pages are built. Two options now:
+   1. react-components — Convert these HTML pages into production React/TS
+   2. remotion — Create a walkthrough video showcasing the screens
+   Which would you like?"
+
+✅ react-components complete → "Your React components are ready. You might 
+   also want to:
+   • Add shadcn/ui components for polished form inputs, buttons, dialogs
+   • Create a remotion walkthrough video of the original designs
+   Want either of those?"
+```
+
+### Decision Tree: Where to Start
+
+Not every user starts at Step 1. Use this decision tree:
+
+| User says... | Start at | Then suggest... |
+|---|---|---|
+| "Build me a site with Stitch" | `design-md` (Step 1) | Full pipeline |
+| "I have a Stitch project, make it consistent" | `design-md` (Step 1) | `enhance-prompt` → `stitch-loop` |
+| "Generate a page with Stitch" | `enhance-prompt` (Step 2) | `stitch-loop` |
+| "I have Stitch HTML, make it React" | `react-components` (Step 4) | `shadcn-ui` for components |
+| "Make a video of my Stitch screens" | `remotion` (Step 5) | Done (standalone) |
+| "I need UI components for my React app" | `shadcn-ui` (Companion) | Done (standalone) |
+| "Improve my Stitch prompt" | `enhance-prompt` (Step 2) | `stitch-loop` |
+| "I already have DESIGN.md, build pages" | `stitch-loop` (Step 3) | `react-components` |
+
+### When to Use Each Skill (Quick Reference)
+
+| Skill | Purpose | Input | Output | Requires |
+|---|---|---|---|---|
+| `design-md` | Extract design system from existing screens | Stitch project with screens | `DESIGN.md` | Stitch MCP |
+| `enhance-prompt` | Polish vague prompts into Stitch-optimized ones | User idea + optional `DESIGN.md` | Enhanced prompt / `next-prompt.md` | None (Stitch MCP optional) |
+| `stitch-loop` | Build multi-page sites iteratively | `DESIGN.md` + `next-prompt.md` | Full site in `site/public/` | Stitch MCP |
+| `react-components` | Convert Stitch HTML → production React/TS | Stitch screen HTML | React components in `src/` | Stitch MCP |
+| `remotion` | Create walkthrough videos from screenshots | Stitch project screenshots | Remotion project + `.mp4` | Stitch MCP + Remotion |
+| `shadcn-ui` | Add polished UI component library | Any React/Next.js project | Components in `components/ui/` | shadcn CLI or MCP |
+
+---
+
+## Sub-Skill Directory
+
+Read the linked `SKILL.md` for any sub-skill before using it.
+
+### 1. `design-md` — Design System Extraction (STEP 1)
+[→ Read SKILL.md](design-md/SKILL.md)
+
+**What:** Analyzes Stitch project screens and generates a semantic `DESIGN.md` file documenting the visual design system (colors, typography, depth, layout, component styles).
+
+**When to use:**
+- Starting a new multi-page project and need a design system reference
+- Onboarding to an existing Stitch project
+- Need consistent design language across agent-generated screens
+
+**Outputs:** `DESIGN.md` file
+
+**➡️ Next step:** `enhance-prompt` — Use the `DESIGN.md` to craft polished prompts for page generation.
+
+---
+
+### 2. `enhance-prompt` — Prompt Enhancement (STEP 2)
+[→ Read SKILL.md](enhance-prompt/SKILL.md)
+
+**What:** Transforms vague UI ideas into polished, structured prompts optimized for Stitch generation. Adds UI/UX keywords, design system context, and page structure.
+
+**When to use:**
+- User gives a vague prompt like "make me a login page"
+- Previous Stitch generation produced poor results
+- Need to inject `DESIGN.md` tokens into a prompt
+
+**Outputs:** Enhanced prompt text or `next-prompt.md` file
+
+**➡️ Next step:** `stitch-loop` — Feed the enhanced prompt into the iterative build loop to generate the actual page.
+
+---
+
+### 3. `stitch-loop` — Iterative Build Loop (STEP 3)
+[→ Read SKILL.md](stitch-loop/SKILL.md)
+
+**What:** Autonomous baton-passing loop for building multi-page websites. Each iteration reads a task (`next-prompt.md`), generates a page, integrates it, updates docs, and writes the next task.
+
+**When to use:**
+- Building a complete multi-page site from scratch
+- Need autonomous, continuous page generation
+- Want a structured sitemap-driven build process
+
+**Depends on:** `design-md` (for `DESIGN.md`), `enhance-prompt` (for baton prompts)
+**Outputs:** Full site in `site/public/`, updated `SITE.md`
+
+**➡️ Next step:** Choose one or both:
+- `react-components` — Convert the generated HTML pages into production-ready React/TypeScript components.
+- `remotion` — Create a walkthrough video showcasing the finished screens.
+
+---
+
+### 4. `react-components` — Design to React (STEP 4)
+[→ Read SKILL.md](react-components/SKILL.md)
+
+**What:** Converts Stitch-generated HTML into modular React/TypeScript components with proper props interfaces, mock data layers, and AST-based validation.
+
+**When to use:**
+- Converting a Stitch screen into production React code
+- Need type-safe, modular component extraction from HTML
+- Want automated validation of component architecture
+
+**Outputs:** React components in `src/`, mock data in `src/data/mockData.ts`
+
+**➡️ Next step:** Consider:
+- `shadcn-ui` — Replace custom UI primitives (buttons, inputs, dialogs) with shadcn/ui components for a polished, accessible component library.
+- `remotion` — Create a walkthrough video if you haven't already.
+
+---
+
+### 5. `remotion` — Walkthrough Videos (STEP 5)
+[→ Read SKILL.md](remotion/SKILL.md)
+
+**What:** Generates walkthrough videos from Stitch project screenshots using Remotion, with smooth transitions, zoom effects, and text overlays.
+
+**When to use:**
+- Need a video showcase of designed screens
+- Want to create a professional app walkthrough
+- Building a demo reel from Stitch designs
+
+> **Note:** For general Remotion work (not Stitch-specific), use the main `remotion` skill instead — it has 25+ rule files from Remotion's official repo.
+
+**Outputs:** Remotion project + rendered `.mp4`
+
+**➡️ This is typically the final step in the pipeline.** No automatic next step, but you can suggest sharing/publishing the video.
+
+---
+
+### 6. `shadcn-ui` — Component Library (COMPANION)
+[→ Read SKILL.md](shadcn-ui/SKILL.md)
+
+**What:** Expert guidance for integrating shadcn/ui components — discovery, installation, customization, variants, blocks, and accessibility. Works with the shadcn MCP server or CLI.
+
+**When to use:**
+- Setting up shadcn/ui in a new project
+- Installing or customizing shadcn components
+- Building forms, data tables, auth layouts, or dashboards
+- Need component variant patterns with `cva`
+- After `react-components` — replace custom primitives with shadcn/ui
+
+> **Note:** This skill works independently of Stitch. It's useful for any React/Next.js project. Think of it as a **companion skill** that plugs in alongside the main pipeline, especially after `react-components`.
+
+**Outputs:** Installed components in `components/ui/`, configured `components.json`
+
+---
+
+## Typical Workflows
+
+### Full Pipeline (New Project)
+```
+1. design-md      → Analyze an existing screen → get DESIGN.md
+2. enhance-prompt → Write a prompt for the next page → inject design tokens
+3. stitch-loop    → Generate page → integrate → write next baton → repeat
+4. react-components → Convert final HTML pages to production React
+5. remotion       → Create a walkthrough video of the finished product
+```
+
+### Quick Build (One Page)
+```
+1. enhance-prompt → Polish the user's idea into a great prompt
+2. Generate directly with Stitch MCP → get HTML
+3. react-components → Convert to React (optional)
+```
+
+### Design System Only
+```
+1. design-md → Document an existing project's visual language
+```
+
+### Video Only
+```
+1. remotion → Create a walkthrough video from existing Stitch screenshots
+```
+
+### Component Library Only
+```
+1. shadcn-ui → Set up and customize shadcn/ui components
+```
+
+## Standalone Usage
+- **`shadcn-ui`** — Use anytime for React/Next.js UI component work (no Stitch needed)
+- **`design-md`** — Use standalone to document any project's design system
+- **`enhance-prompt`** — Use standalone to improve any UI generation prompt
+
+## Acknowledgements
+
+- Based on [stitch-skills](https://github.com/google-labs-code/stitch-skills)
+- This is not an officially supported Google product. This project is not eligible for the [Google Open Source Software Vulnerability Rewards Program](https://bughunters.google.com/open-source-security).

package/assets/.agent/skills/stitch/design-md/README.md

@@ -0,0 +1,34 @@
+# Stitch Design System Documentation Skill
+
+## Install
+
+```bash
+npx add-skill google-labs-code/stitch-skills --skill design-md --global
+```
+
+## Example Prompt
+
+```text
+Analyze my Furniture Collection project's Home screen and generate a comprehensive DESIGN.md file documenting the design system.
+```
+
+## Skill Structure
+
+This repository follows the **Agent Skills** open standard. Each skill is self-contained with its own logic, workflow, and reference materials.
+
+```text
+design-md/
+├── SKILL.md           — Core instructions & workflow
+├── examples/          — Sample DESIGN.md outputs
+└── README.md          — This file
+```
+
+## How it Works
+
+When activated, the agent follows a structured design analysis pipeline:
+
+1. **Retrieval**: Uses the Stitch MCP Server to fetch project screens, HTML code, and design metadata.
+2. **Extraction**: Identifies design tokens including colors, typography, spacing, and component patterns.
+3. **Translation**: Converts technical CSS/Tailwind values into descriptive, natural design language.
+4. **Synthesis**: Generates a comprehensive DESIGN.md following the semantic design system format.
+5. **Alignment**: Ensures output follows Stitch Effective Prompting Guide principles for optimal screen generation.