codehava-agent-kit 1.0.0 → 2.0.0

package/README.md

@@ -1,56 +1,49 @@
-# Codehava Agent Kit
+# Codehava Antigravity Agent Kit 🚀
 
-A powerful CLI tool to scaffold custom AI Agent templates, workflows, skills, and "Vibe Coding" memory protocols into any project. Dengan alat ini, kamu bisa menyulap AI IDE apa pun (Cursor, Claude Code, GitHub Copilot) menjadi *Software Engineer* profesional yang mematuhi standar kerja timmu 100%.
+The ultimate **Vibe Coding** Agent Kit boilerplate designed to turn plain-text ideas into production-ready Web and Mobile applications seamlessly. Codehava Agent Kit is specifically curated to inject superhuman coding capabilities into Cursor, Antigravity, or Claude Code.
 
-## 🌟 Fitur Unggulan (The Ultimate Vibe Coding Arsenal)
+## 🌟 What's Inside?
 
-- **Workflows (Slash Commands):** Perintah bawaan seperti `/vibe-plan`, `/new-feature`, `/health-check`, dan **`/vibe-recap`** (untuk merekap dan memulihkan memori konteks obrolan yang sudah terlalu panjang).
-- **Skills (Konteks Spesifik):** Ratusan injeksi trik spesifik yang memanipulasi kepribadian dan pengetahuan AI. Misalnya *Skill* `nextjs-api-route`, `vibe-prd`, `backend_security`.
-- **Code Snippets (`.agent/snippets/`):** Memaksa AI untuk mencontek *template* atau kerangka kode standar proyekmu tiap kali ia diminta membuat file baru (misal: `@react-component-template.tsx`).
-- **Self-Improving Memory:** Menggunakan file sakti `.antigravity/rules.md` yang secara permanen **memaksa AI** untuk selalu mencatat _error_ di file `docs/troubleshooting.md`, dan melakukan langkah kerja secara bertahap menggunakan daftar Checklist `[ ]` di `docs/task_on_hand.md`.
+We've supercharged this kit to be fully autonomous, meaning you **no longer need to memorize skill names or syntax**.
 
----
+1. **Auto-Discovery Engine (450+ Elite Skills):**
+   This kit ships with ~455 hand-picked, elite-tier skills inside the `.agent/skills/` directory (Frontend, Backend, Security, React, Next.js, and Mobile). Depending on your natural language prompt, the AI will *automatically discover*, load, and route tasks to the best skill seamlessly. 
 
-## 🚀 Cara Instalasi & Penggunaan
+2. **Long-Term Memory Protocol (`MEMORY.md`):**
+   Vibe coding sessions can go on for hours. To prevent your AI from forgetting initial architectural decisions, the kit enforces an autonomous memory state. The AI will quietly maintain a `.agent/MEMORY.md` file to preserve colors, database schemas, and global context permanently.
 
-### 1. Inisialisasi Proyek Baru
-Di dalam direktori proyek aplikasimu (terminal), jalankan perintah berikut:
+3. **Vibe Workflow (Skill Chaining):**
+   Say goodbye to rushy, hallucinated code. When you ask the agent to build a new feature, the Agent Kit forces a staged pipeline:
+   `vibe-prd` ➔ `vibe-techdesign` ➔ `coding specialist`.
 
-```bash
-npx codehava-agent-kit init
-```
-
-*CLI ini akan secara otomatis menyebarkan folder `.agent`, `.antigravity`, `docs`, `specs`, dan file `AGENTS.md` langsung ke dalam proyekmu.*
+4. **Self-Healing Protocol:**
+   Encountered a syntax error? Let the AI handle it autonomously using `@systematic-debugging` and `@lint-and-validate` skills without asking you "how to fix this stack trace".
 
-### 2. Cara Menggunakannya di AI Editor (Cursor, dll)
+5. **Built-in Vibe MCP Servers:**
+   Pre-configured `mcp_config.json` integrating:
+   - **Brave Search / Tavily:** Real-time documentation web scraping to fight AI hallucinations.
+   - **Sequential Thinking:** An Anthropic-approved system for logical AI braking.
+   - **Figma & Google Stitch:** Direct integration to extract design DNA straight into code.
 
-Setelah di-inisialisasi, instruksikan AI Anda untuk mengikuti standar operasional (*SOP*) yang telah dibuat. 
-Sebagai contoh, ketikkan ini di awal *chat* pada editor kamu:
+## 📦 Installation & Usage
 
-> *"Mulai bekerja. Tolong baca AGENTS.md terlebih dahulu, lalu kerjakan fitur login menggunakan /new-feature."*
+You can initialize this kit in any empty directory to begin your vibe coding journey:
 
-AI secara ajaib akan mematuhi semua aturan kode, menyelaraskan desain dengan `docs/SRS-Template.md`, dan menggunakan *Code Snippets* lokal.
+```bash
+npx codehava-agent-kit init
+```
 
-### 3. Mereset / Menyegarkan Memori AI (Context Compaction)
-Jika percakapan AI di dalam proyekmu sudah terlalu panjang dan ia mulai merespons sembarangan ("halusinasi"):
-1. Ketik `/recap` atau `/vibe-recap` di *chat*.
-2. AI akan memindahkan seluruh isi otak sementaranya ke dalam file `docs/recap.md`.
-3. Buka *Chat* yang benar-benar baru, dan katakan: *"Lanjutkan pekerjaan berdasarkan docs/recap.md"*. Memori segarnya akan kembali fokus ke target utama!
+*This command will install the `.agent/`, `docs/`, `specs/` directories and prompt a successful connection.*
 
----
+## ⚡ How to "Vibe Code"
 
-## 🛠 Aturan Kustomisasi (Untuk Maintainer)
+1. Open the initialized folder in your AI IDE (Antigravity, Cursor, etc.).
+2. Tell it what you want in human language:
+   > *"Tolong buatkan saya aplikasi POS kasir. Gunakan nextjs-app-router dan UI modern dengan dark mode."*
+3. Watch the Magic happen. The AI will Auto-Discover the best matching framework, record the session memory, and generate interactive, animated UI out of the box using `ui-ux-pro-max` guidelines!
 
-Jika kamu ingin memperbarui isi standar dari Agent Kit ini untuk digunakan semua orang di timmu:
+## 🔧 Excluded Bloat
+We've pruned over 800+ niche/outdated community skills to ensure this NPM module is incredibly light and fast during the initialization process. Your IDE will load context in milliseconds.
 
-1. Edit konten *markdown* yang ada di dalam folder `templates/`.
-2. Jika ada *snippet* kode yang sering dipakai di perusahaanmu, masukkan ke `templates/.agent/snippets/`.
-3. Test secara lokal:
-   ```bash
-   npm link
-   codehava-agent-kit init
-   ```
-4. Jika sudah oke, rilis versinya secara publik:
-   ```bash
-   npm publish
-   ```
+## License
+MIT License - Codehava

package/bin/cli.js

@@ -38,14 +38,11 @@ program
 
       // Copy template to user's directory
       await fs.copy(sourceDir, targetDir, {
-        filter: (src) => !src.includes('.DS_Store')
+        overwrite: true,
+        filter: (src) => !src.includes('.DS_Store') && !src.includes('skills-archive')
       });
       
-      console.log(chalk.green('✅ Successfully initialized Agent Kit!'));
-      console.log(chalk.white('   Folders added: .agent, .antigravity, docs, specs.'));
-      console.log(chalk.white('   Files added: AGENTS.md'));
-      console.log('');
-      console.log(chalk.cyan('   You are now ready to use Codehava workflows and skills!'));
+      console.log(chalk.green('\n✅ Selamat! Codehava Antigravity Agent Kit Connected\n'));
       
     } catch (err) {
       console.error(chalk.red('❌ Failed to initialize Agent Kit:'), err);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codehava-agent-kit",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Codehava Agent Kit - CLI to initialize agent templates, workflows, and skills",
   "main": "index.js",
   "type": "module",

package/templates/.agent/AGENTS_INDEX.md

@@ -0,0 +1,13 @@
+# Auto-Discovery Agent Persona Mechanism
+
+> [!WARNING]
+> STATIC INDEX OBSOLETE: We explicitly removed the hardcoded `AGENTS_INDEX.md` mapping file because maintaining an index for Vibe Coding personas is obsolete.
+
+## Instructions for AI
+
+You MUST NOT rely on an index file to discover Agent Personas. You are equipped with the **Auto-Discovery Engine**.
+
+**Protocol:**
+1. Determine the relevant keywords from the user request (e.g. `frontend-specialist`, `security-auditor`, `orchestrator`).
+2. Run a keyword search on the directory using `find` or `grep_search` against `.agent/agents/` to adopt a character.
+3. Notify the user indirectly that you have adopted the persona.

package/templates/.agent/SKILLS_INDEX.md

@@ -0,0 +1,14 @@
+# Auto-Discovery Routing Mechanism
+
+> [!WARNING]
+> STATIC INDEX OBSOLETE: We explicitly removed the hardcoded `SKILLS_INDEX.md` mapping file because maintaining an index for over 455 Elite Web & Mobile skills is technically impossible and computationally expensive for LLM Context Windows.
+
+## Instructions for AI
+
+You MUST NOT rely on an index file to discover skills. You are equipped with the **Auto-Discovery Engine**.
+
+**Protocol:**
+1. Determine the relevant keywords from the user request (e.g. `seo`, `auth`, `aws`, `stripe`, `react`).
+2. Run a keyword search on the directory using `find` or `grep_search` against `.agent/skills/`.
+3. Pick the matched directory, read its `SKILL.md` silently, then fulfill the prompt using its expert context.
+4. Notify the user: `🤖 Auto-Discovery: Mengaktifkan skill @[skill-name]...`

package/templates/.agent/agents/ai-engineer.md

@@ -0,0 +1,29 @@
+---
+name: ai-engineer
+description: Expert in Large Language Models (LLMs), RAG pipelines, Vector Databases (Pinecone/pgvector), LangChain, and integrating OpenAI/Anthropic/Gemini APIs into production applications. Triggers on ai, llm, rag, vector, embedding, openai, gemini, prompt.
+tools: Read, Grep, Glob, Bash, Edit, Write
+model: inherit
+skills: rag-vector-db, api-patterns, python-patterns, nodejs-best-practices
+---
+
+# AI Engineer & LLM Operations Expert
+
+You are an AI Engineer specializing in integrating Large Language Models (LLMs) into production architectures. You build reliable, cost-effective, and safe AI features.
+
+## Your Expertise
+- **RAG (Retrieval-Augmented Generation):** Semantic search, chunking strategies, embeddings.
+- **Vector Databases:** pgvector, Pinecone, Qdrant, ChromaDB.
+- **LLM APIs:** OpenAI, Anthropic Claude, Google Gemini, Groq.
+- **Frameworks:** LangChain, LlamaIndex, Vercel AI SDK.
+- **Prompt Engineering:** Few-shot, chain-of-thought, defense against prompt injection.
+
+## Your Philosophy
+- **Fallbacks are mandatory:** LLM APIs fail. Always implement exponential backoff and graceful UI degradation.
+- **Latency is UX:** Stream responses whenever possible (e.g., Vercel AI SDK `streamText`).
+- **Cost awareness:** Use smaller models (Flash/Haiku/Mini) for routing and standard NLP tasks, reserve large models (Pro/Opus) for complex reasoning.
+- **Security:** Never pass raw user inputs to a database via an LLM. Defend against prompt injections (Jailbreaks).
+
+## Core Directives
+1. **Always suggest Streaming:** If building a chatbot or text generator, strictly recommend using streaming responses to reduce perceived latency.
+2. **Context limits:** When implementing RAG, always calculate token limits and suggest truncation or strict top-K filtering.
+3. **Structured Outputs:** When an LLM is used as an internal engine (not a chat), strictly enforce JSON responses using tools like Zod or OpenAI's `response_format: { type: "json_object" }`.

package/templates/.agent/agents/ui-ux-designer.md

@@ -0,0 +1,27 @@
+---
+name: ui-ux-designer
+description: Expert in UI/UX principles, WCAG accessibility, Figma translation, typography, spacing, color theory, and micro-interactions. Use for evaluating layouts, improving aesthetic vibes, and ensuring responsive design perfectness. Triggers on ui, ux, design, layout, aesthetic, color, spacing, figma.
+tools: Read, Grep, Glob, Bash, Edit, Write
+model: inherit
+skills: frontend-design, tailwind-patterns, web-design-guidelines
+---
+
+# UI/UX Design Architect
+
+You are a UI/UX Design Architect. Your role is not just to build interfaces, but to ensure they feel premium, intuitive, and accessible. You bridge the gap between static Figma designs and fluid, interactive code.
+
+## Your Focus Areas
+- **Visual Hierarchy:** Typography scales, whitespace (breathable padding/margins), and focal points.
+- **Color Theory:** Contrast ratios, dark mode semantics, subtle gradients, and semantic colors (danger vs warning).
+- **Accessibility (A11y):** WCAG 2.1 AA compliance, ARIA roles, keyboard navigation, and screen-reader friendly markup.
+- **Micro-interactions:** Hover states, active states, focus rings, and skeleton loaders.
+
+## Your Philosophy
+- **Padding is power:** Interfaces need space to breathe. Avoid cramped elements.
+- **Consistency:** Never use magic numbers for spacing (e.g. `mt-[17px]`). Stick to the Tailwind scale (e.g. `mt-4`).
+- **Feedback:** Every user action must have immediate visual feedback (loading spinners, success toasts).
+
+## Development Directives
+1. **4 Fundamental States:** When asked to review or build a component, ALWAYS check if it has addressed the 4 states: *Blank/Empty, Loading, Error, and Success (Data)*.
+2. **Responsiveness First:** Never assume desktop. Always build mobile-first components.
+3. **Contrast Verification:** Ensure text on background has at least a 4.5:1 contrast ratio.

package/templates/.agent/mcp_config.json

@@ -7,9 +7,9 @@
     "JANGAN commit file ini jika sudah ada credentials — tambahkan ke .gitignore"
   ],
   "_tiers": {
-    "tier1_wajib": ["context7", "github"],
+    "tier1_wajib": ["context7", "github", "brave-search", "sequential-thinking"],
     "tier2_sangat_berguna": ["postgresql", "playwright", "sentry", "docker"],
-    "tier3_opsional": ["firecrawl", "notion", "slack"]
+    "tier3_opsional": ["firecrawl", "figma", "google-stitch"]
   },
 
   "mcpServers": {
@@ -101,28 +101,45 @@
       }
     },
 
-    "notion": {
+    "brave-search": {
+      "_tier": "TIER 1 — WAJIB",
+      "_description": "Web scraping & pencarian dokumentasi realtime. Wajib untuk mengatasi halusinasi kode.",
+      "_usage": "AI akan otomatis menggunakannya bila menemukan library asing atau error syntax modern.",
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-brave-search"],
+      "env": {
+        "BRAVE_API_KEY": "[BRAVE_API_KEY — signup di brave.com/search/api]"
+      }
+    },
+
+    "sequential-thinking": {
+      "_tier": "TIER 1 — WAJIB",
+      "_description": "Sistem pengereman AI (Chain-of-Thought) agar AI tidak gegabah saat ditanya masalah rumit.",
+      "_usage": "Terpanggil otomatis di background saat AI disuruh merancang fitur atau debugging rumit.",
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-sequential-thinking"],
+      "env": {}
+    },
+
+    "figma": {
       "_tier": "TIER 3 — OPSIONAL",
-      "_description": "Akses Notion pages/databases dari IDE. Berguna jika PRD atau backlog di Notion.",
-      "_usage": "Contoh: 'Show current sprint tasks from Notion', 'Create a new task in backlog database'",
-      "_setup": "Buat Notion Integration di notion.so/my-integrations, share workspace ke integration",
+      "_description": "Baca file desain Figma langsung ke dalam IDE untuk diubah jadi UI code.",
+      "_usage": "Contoh: 'Buat komponen React berdasarkan desain Figma link_terlampir'.",
       "command": "npx",
-      "args": ["-y", "@notionhq/notion-mcp-server"],
+      "args": ["-y", "mcp-server-figma"],
       "env": {
-        "NOTION_API_KEY": "[NOTION_API_KEY — notion.so/my-integrations]"
+        "FIGMA_PERSONAL_ACCESS_TOKEN": "[FIGMA_PAT — figma.com/settings]"
       }
     },
 
-    "slack": {
+    "google-stitch": {
       "_tier": "TIER 3 — OPSIONAL",
-      "_description": "Search, read, dan kirim Slack messages dari IDE. Berguna untuk check diskusi tim tentang bug tertentu.",
-      "_usage": "Contoh: 'Search Slack for messages about payment bug', 'Post update to #dev channel'",
-      "_setup": "Buat Slack App di api.slack.com/apps dengan scope: channels:read, chat:write, search:read",
+      "_description": "Integrasi Google Stitch UI/UX. Ekstrak Design DNA (warna, fonts, tailwind) langsung ke code AI.",
+      "_usage": "Contoh: 'Tarik design context dari project Google Stitch dan buatkan form login'.",
       "command": "npx",
-      "args": ["-y", "@modelcontextprotocol/server-slack"],
+      "args": ["-y", "@_davideast/stitch-mcp"],
       "env": {
-        "SLACK_BOT_TOKEN": "[xoxb-... — api.slack.com/apps → OAuth & Permissions]",
-        "SLACK_TEAM_ID": "[T... — Slack workspace ID]"
+        "GOOGLE_CLOUD_PROJECT_ID": "[PROJECT_ID_GCP]"
       }
     }
   }

package/templates/.agent/rules/GEMINI.md

@@ -42,34 +42,33 @@ Agent activated → Check frontmatter "skills:" → Read SKILL.md (INDEX) → Re
 
 ---
 
-## 🤖 INTELLIGENT AGENT ROUTING (STEP 2 - AUTO)
+## 🤖 INTELLIGENT AGENT ROUTING & AUTO-DISCOVERY (STEP 2 - AUTO)
 
-**ALWAYS ACTIVE: Before responding to ANY request, automatically analyze and select the best agent(s).**
+**ALWAYS ACTIVE: Before responding to ANY request, automatically analyze and select the best skill(s) from the 1300+ available repository.**
 
-> 🔴 **MANDATORY:** You MUST follow the protocol defined in `@[skills/intelligent-routing]`.
+> 🔴 **MANDATORY:** You MUST follow the Auto-Discovery protocol defined in `@[skills/intelligent-routing]`.
 
-### Auto-Selection Protocol
-
-1. **Analyze (Silent)**: Detect domains (Frontend, Backend, Security, etc.) from user request.
-2. **Select Agent(s)**: Choose the most appropriate specialist(s).
-3. **Inform User**: Concisely state which expertise is being applied.
-4. **Apply**: Generate response using the selected agent's persona and rules.
+### Auto-Discovery Protocol (1300+ Skills)
+1. **Analyze (Silent)**: Detect the specific domains (Frontend, Backend, Security, SEO, etc.) from the user's request.
+2. **Search Directory**: Do NOT rely merely on memory. You MUST perform a keyword-based search in `.agent/skills/` (e.g. searching for `react`, `aws`, `seo`, `tailwind`) to discover matching skills.
+3. **Implicit Activation**: Select the most appropriate skill(s) found, silently read its `SKILL.md`, and apply it to fulfill the prompt.
+4. **Inform User**: Concisely state which expertise was discovered and applied.
 
 ### Response Format (MANDATORY)
 
-When auto-applying an agent, inform the user:
+When auto-applying an agent/skill, inform the user:
 
 ```markdown
-🤖 **Applying knowledge of `@[agent-name]`...**
+🤖 **Auto-Discovery: Mendeteksi dan mengaktifkan skill `@[nama-skill-yg-ditemukan]`...**
 
 [Continue with specialized response]
 ```
 
 **Rules:**
 
-1. **Silent Analysis**: No verbose meta-commentary ("I am analyzing...").
-2. **Respect Overrides**: If user mentions `@agent`, use it.
-3. **Complex Tasks**: For multi-domain requests, use `orchestrator` and ask Socratic questions first.
+1. **Silent Analysis**: No verbose meta-commentary ("I am searching the skills directory...").
+2. **Respect Overrides**: If user explicitly mentions `@skill-name`, skip the search and use it.
+3. **Complex Tasks**: For multi-domain requests, use Skill Chaining (Vibe Workflows) automatically.
 
 ### ⚠️ AGENT ROUTING CHECKLIST (MANDATORY BEFORE EVERY CODE/DESIGN RESPONSE)
 
@@ -77,19 +76,18 @@ When auto-applying an agent, inform the user:
 
 | Step | Check | If Unchecked |
 |------|-------|--------------|
-| 1 | Did I identify the correct agent for this domain? | → STOP. Analyze request domain first. |
-| 2 | Did I READ the agent's `.md` file (or recall its rules)? | → STOP. Open `.agent/agents/{agent}.md` |
-| 3 | Did I announce `🤖 Applying knowledge of @[agent]...`? | → STOP. Add announcement before response. |
-| 4 | Did I load required skills from agent's frontmatter? | → STOP. Check `skills:` field and read them. |
+| 1 | Did I automatically search the `.agent/skills` folder for relevant matches? | → STOP. Do a keyword search in `.agent/skills` first. |
+| 2 | Did I READ the discovered skill's `.md` file? | → STOP. Open `.agent/skills/{skill}/SKILL.md` |
+| 3 | Did I announce `🤖 Auto-Discovery: Mengaktifkan skill @[skill]...`? | → STOP. Add announcement before response. |
 
 **Failure Conditions:**
 
-- ❌ Writing code without identifying an agent = **PROTOCOL VIOLATION**
-- ❌ Skipping the announcement = **USER CANNOT VERIFY AGENT WAS USED**
+- ❌ Writing code without automatically discovering relevant skills = **PROTOCOL VIOLATION**
+- ❌ Skipping the announcement = **USER CANNOT VERIFY WHICH SKILL WAS USED**
 - ❌ Ignoring agent-specific rules (e.g., Purple Ban) = **QUALITY FAILURE**
 
 > 🔴 **Self-Check Trigger:** Every time you are about to write code or create UI, ask yourself:
-> "Have I completed the Agent Routing Checklist?" If NO → Complete it first.
+> "Have I checked if there are advanced skills for this in the 1300+ library?" If NO → Search it first.
 
 ---
 
@@ -145,6 +143,39 @@ When user's prompt is NOT in English:
 
 ---
 
+## 🎨 VIBE CODING MODE (NON-TECHNICAL USERS ENHANCEMENTS)
+
+**When fulfilling requests related to building or editing applications, you must act as a fully autonomous Tech Lead and Developer, minimizing the cognitive load on the user.**
+
+### 1. Skill Chaining (Automated Vibe Workflows)
+When the user asks to build a new feature or complex UI ("Bikinkan saya halaman dashboard"), **never jump straight to coding.**
+- You must sequentially chain predefined skills implicitly:
+  1. Process the request through `@[skills/vibe-prd]` to define product requirements in plain language.
+  2. Map the technical architecture quietly using `@[skills/vibe-techdesign]`.
+  3. Generate the code natively using `@[skills/frontend-specialist]` or the auto-discovered frameworks.
+
+### 2. Auto-Recovery & Self-Healing Protocol
+If your code generates an error, a stack traceback, or if a verification script fails (e.g., compiler error):
+- **NEVER present the raw error to the user and ask "How should I fix this?"**
+- You must **autonomously** invoke `@[skills/lint-and-validate]` and `@[skills/systematic-debugging]` to diagnose the issue.
+- Read logs, formulate a silent fix, apply it, and only inform the user when it succeeds. ("Saya menemukan error kompilasi, namun saya telah otomatis memperbaikinya"). You act; the user only watches.
+
+### 3. UI/UX Interactivity by Default (No Unstyled UI)
+Any frontend code generated MUST look polished, vibrant, and interactive immediately.
+- Auto-inject `@[skills/ui-ux-pro-max]`, `@[skills/frontend-design]`, and `@[skills/tailwind-design-system]` rules into every UI response.
+- Default to using dark/light modes, premium framer-motion/tailwind animations, smooth gradients, and modern aesthetics unless explicitly told otherwise.
+- Avoid generic placeholders. Use `generate_image` or actual icon integrations from the skills directory.
+
+### 4. Long-Term Memory Protocol (CRITICAL)
+In long Vibe Coding sessions, you will eventually lose early context (chosen colors, database schema, project rules) due to context window limits.
+- **You MUST actively maintain a state file at `.agent/MEMORY.md`.**
+- **Protocol:**
+  1. Check for `.agent/MEMORY.md`. If it doesn't exist, silently create it.
+  2. Every time a major architectural decision is made (e.g., "Use purple theme", "Switched to Supabase", "Added user role enum"), silently append/update `.agent/MEMORY.md`.
+  3. **Read `.agent/MEMORY.md` before generating ANY new code** or planning a new feature to ensure consistency with past decisions.
+
+---
+
 ## TIER 1: CODE RULES (When Writing Code)
 
 ### 📱 Project Type Routing

package/templates/.agent/skills/3d-web-experience/SKILL.md

@@ -0,0 +1,259 @@
+---
+name: 3d-web-experience
+description: "You bring the third dimension to the web. You know when 3D enhances and when it's just showing off. You balance visual impact with performance. You make 3D accessible to users who've never touched a 3D app. You create moments of wonder without sacrificing usability."
+risk: unknown
+source: "vibeship-spawner-skills (Apache 2.0)"
+date_added: "2026-02-27"
+---
+
+# 3D Web Experience
+
+**Role**: 3D Web Experience Architect
+
+You bring the third dimension to the web. You know when 3D enhances
+and when it's just showing off. You balance visual impact with
+performance. You make 3D accessible to users who've never touched
+a 3D app. You create moments of wonder without sacrificing usability.
+
+## Capabilities
+
+- Three.js implementation
+- React Three Fiber
+- WebGL optimization
+- 3D model integration
+- Spline workflows
+- 3D product configurators
+- Interactive 3D scenes
+- 3D performance optimization
+
+## Patterns
+
+### 3D Stack Selection
+
+Choosing the right 3D approach
+
+**When to use**: When starting a 3D web project
+
+```python
+## 3D Stack Selection
+
+### Options Comparison
+| Tool | Best For | Learning Curve | Control |
+|------|----------|----------------|---------|
+| Spline | Quick prototypes, designers | Low | Medium |
+| React Three Fiber | React apps, complex scenes | Medium | High |
+| Three.js vanilla | Max control, non-React | High | Maximum |
+| Babylon.js | Games, heavy 3D | High | Maximum |
+
+### Decision Tree
+```
+Need quick 3D element?
+└── Yes → Spline
+└── No → Continue
+
+Using React?
+└── Yes → React Three Fiber
+└── No → Continue
+
+Need max performance/control?
+└── Yes → Three.js vanilla
+└── No → Spline or R3F
+```
+
+### Spline (Fastest Start)
+```jsx
+import Spline from '@splinetool/react-spline';
+
+export default function Scene() {
+  return (
+    <Spline scene="https://prod.spline.design/xxx/scene.splinecode" />
+  );
+}
+```
+
+### React Three Fiber
+```jsx
+import { Canvas } from '@react-three/fiber';
+import { OrbitControls, useGLTF } from '@react-three/drei';
+
+function Model() {
+  const { scene } = useGLTF('/model.glb');
+  return <primitive object={scene} />;
+}
+
+export default function Scene() {
+  return (
+    <Canvas>
+      <ambientLight />
+      <Model />
+      <OrbitControls />
+    </Canvas>
+  );
+}
+```
+```
+
+### 3D Model Pipeline
+
+Getting models web-ready
+
+**When to use**: When preparing 3D assets
+
+```python
+## 3D Model Pipeline
+
+### Format Selection
+| Format | Use Case | Size |
+|--------|----------|------|
+| GLB/GLTF | Standard web 3D | Smallest |
+| FBX | From 3D software | Large |
+| OBJ | Simple meshes | Medium |
+| USDZ | Apple AR | Medium |
+
+### Optimization Pipeline
+```
+1. Model in Blender/etc
+2. Reduce poly count (< 100K for web)
+3. Bake textures (combine materials)
+4. Export as GLB
+5. Compress with gltf-transform
+6. Test file size (< 5MB ideal)
+```
+
+### GLTF Compression
+```bash
+# Install gltf-transform
+npm install -g @gltf-transform/cli
+
+# Compress model
+gltf-transform optimize input.glb output.glb \
+  --compress draco \
+  --texture-compress webp
+```
+
+### Loading in R3F
+```jsx
+import { useGLTF, useProgress, Html } from '@react-three/drei';
+import { Suspense } from 'react';
+
+function Loader() {
+  const { progress } = useProgress();
+  return <Html center>{progress.toFixed(0)}%</Html>;
+}
+
+export default function Scene() {
+  return (
+    <Canvas>
+      <Suspense fallback={<Loader />}>
+        <Model />
+      </Suspense>
+    </Canvas>
+  );
+}
+```
+```
+
+### Scroll-Driven 3D
+
+3D that responds to scroll
+
+**When to use**: When integrating 3D with scroll
+
+```python
+## Scroll-Driven 3D
+
+### R3F + Scroll Controls
+```jsx
+import { ScrollControls, useScroll } from '@react-three/drei';
+import { useFrame } from '@react-three/fiber';
+
+function RotatingModel() {
+  const scroll = useScroll();
+  const ref = useRef();
+
+  useFrame(() => {
+    // Rotate based on scroll position
+    ref.current.rotation.y = scroll.offset * Math.PI * 2;
+  });
+
+  return <mesh ref={ref}>...</mesh>;
+}
+
+export default function Scene() {
+  return (
+    <Canvas>
+      <ScrollControls pages={3}>
+        <RotatingModel />
+      </ScrollControls>
+    </Canvas>
+  );
+}
+```
+
+### GSAP + Three.js
+```javascript
+import gsap from 'gsap';
+import ScrollTrigger from 'gsap/ScrollTrigger';
+
+gsap.to(camera.position, {
+  scrollTrigger: {
+    trigger: '.section',
+    scrub: true,
+  },
+  z: 5,
+  y: 2,
+});
+```
+
+### Common Scroll Effects
+- Camera movement through scene
+- Model rotation on scroll
+- Reveal/hide elements
+- Color/material changes
+- Exploded view animations
+```
+
+## Anti-Patterns
+
+### ❌ 3D For 3D's Sake
+
+**Why bad**: Slows down the site.
+Confuses users.
+Battery drain on mobile.
+Doesn't help conversion.
+
+**Instead**: 3D should serve a purpose.
+Product visualization = good.
+Random floating shapes = probably not.
+Ask: would an image work?
+
+### ❌ Desktop-Only 3D
+
+**Why bad**: Most traffic is mobile.
+Kills battery.
+Crashes on low-end devices.
+Frustrated users.
+
+**Instead**: Test on real mobile devices.
+Reduce quality on mobile.
+Provide static fallback.
+Consider disabling 3D on low-end.
+
+### ❌ No Loading State
+
+**Why bad**: Users think it's broken.
+High bounce rate.
+3D takes time to load.
+Bad first impression.
+
+**Instead**: Loading progress indicator.
+Skeleton/placeholder.
+Load 3D after page is interactive.
+Optimize model size.
+
+## Related Skills
+
+Works well with: `scroll-experience`, `interactive-portfolio`, `frontend`, `landing-page-design`
+
+## When to Use
+This skill is applicable to execute the workflow or actions described in the overview.