antigravity-ide 4.2.0 → 4.2.1

package/setup.js

@@ -8,7 +8,8 @@ const chalk = require('chalk');
 const gradient = require('gradient-string');
 const boxen = require('boxen');
 const prompts = require('prompts');
-const packageJson = require('./package.json');
+
+const MANIFEST = require('./cli/manifest.js');
 
 const GLOBAL_DIR = path.join(os.homedir(), '.antigravity');
 const SOURCE_DIR = path.join(__dirname, '.agent');
@@ -31,25 +32,11 @@ async function setup() {
     
     console.log(gradient.rainbow.multiline(branding));
     console.log(gradient.atlas('━'.repeat(60)));
-    console.log(chalk.gray(`  Antigravity IDE • Global Setup Wizard • v${packageJson.version}`));
+    console.log(chalk.gray(`  Google Antigravity • Global Setup Wizard • v4.2.1`));
     console.log(chalk.gray('  Developed with 💡 by Dokhacgiakhoa'));
     console.log(gradient.atlas('━'.repeat(60)) + '\n');
     console.log(chalk.bold.hex('#00ffee')('🚀 Antigravity Global Setup Starting...\n'));
 
-    // 0. Check for Python (Required for Advanced Skills)
-    let hasPython = false;
-    try {
-        execSync('python --version', { stdio: 'ignore' });
-        hasPython = true;
-    } catch (e) {
-        try {
-            execSync('python3 --version', { stdio: 'ignore' });
-            hasPython = true;
-        } catch (e2) {}
-    }
-
-    // Silent check - we will warn later if they select Advanced Mode
-
     // Interactive Prompts
     const response = await prompts([
         {
@@ -64,60 +51,18 @@ async function setup() {
         },
         {
             type: 'select',
-            name: 'engineMode',
-            message: (prev, values) => values.lang === 'vi' ? 'Chọn Chế độ Động cơ:' : 'Select Engine Mode:',
+            name: 'operationMode',
+            message: (prev, values) => values.lang === 'vi' ? 'Chọn Chế độ Vận hành (Mode):' : 'Select Operation Mode:',
             choices: (prev, values) => values.lang === 'vi' ? [
-                { title: '⚡ Standard (Node.js) - Gọn nhẹ [Mặc định]', value: 'standard' },
-                { title: '🧠 Advanced (Python) - Chuyên sâu AI & Data', value: 'advanced' }
+                { title: '⚡ INSTANT (MVP) - Khởi tạo Thần tốc, Đa năng', value: 'instant' },
+                { title: '🏢 STANDARD (Pro) - Quy trình Chuẩn chuyên nghiệp', value: 'standard' },
+                { title: '🏭 CREATIVE (Elite) - Sức mạnh tối đa, Chuyên biệt hóa', value: 'creative' }
             ] : [
-                { title: '⚡ Standard (Node.js) - Lightweight [Default]', value: 'standard' },
-                { title: '🧠 Advanced (Python) - Deep AI & Data', value: 'advanced' }
-            ],
-            initial: 0
-        },
-        {
-            type: 'text',
-            name: 'agentName',
-            message: (prev, values) => values.lang === 'vi' ? 'Đặt tên định danh cho AI Agent của bạn:' : 'Name your AI Agent:',
-            validate: value => value.length < 2 ? 'Minimum 2 chars' : true
-        },
-        {
-            type: 'select',
-            name: 'projectScale',
-            message: (prev, values) => values.lang === 'vi' ? 'Chọn Quy mô Dự án (Project Scale):' : 'Select Project Scale:',
-            choices: (prev, values) => values.lang === 'vi' ? [
-                { title: '⚡ Instant (Tức thời) - Cá nhân & Nhanh gọn', value: 'instant' },
-                { title: '🎨 Creative (Sáng tạo) - Full AI Suite [Mặc định]', value: 'creative' },
-                { title: '🏢 SME / Enterprise (Doanh nghiệp) - Bảo mật & Chuẩn hóa', value: 'sme' }
-            ] : [
-                { title: '⚡ Instant - Personal & Fast', value: 'instant' },
-                { title: '🎨 Creative - Full AI Suite [Default]', value: 'creative' },
-                { title: '🏢 SME / Enterprise - Security & Standard', value: 'sme' }
+                { title: '⚡ INSTANT (MVP) - Ultra Fast, Multi-tasking', value: 'instant' },
+                { title: '🏢 STANDARD (Pro) - Professional Standard Flow', value: 'standard' },
+                { title: '🏭 CREATIVE (Elite) - Maximum Power, Micro-Specialization', value: 'creative' }
             ],
             initial: 1
-        },
-        {
-            type: 'select',
-            name: 'industryDomain',
-            message: (prev, values) => values.lang === 'vi' ? 'Chọn Lĩnh vực dự án (Industry):' : 'Select Industry Domain:',
-            choices: (prev, values) => values.lang === 'vi' ? [
-                { title: '💰 Finance (Tài chính - Fintech)', value: 'finance' },
-                { title: '🎓 Education (Giáo dục - EdTech)', value: 'education' },
-                { title: '🍔 F&B / Restaurant (Nhà hàng)', value: 'fnb' },
-                { title: '👤 Personal / Portfolio (Cá nhân)', value: 'personal' },
-                { title: '🏥 Healthcare (Y tế - HealthTech)', value: 'healthcare' },
-                { title: '🚚 Logistics (Vận tải)', value: 'logistics' },
-                { title: '🔮 Other (Khác - Web/App cơ bản)', value: 'other' }
-            ] : [
-                { title: '💰 Finance (Fintech)', value: 'finance' },
-                { title: '🎓 Education (EdTech)', value: 'education' },
-                { title: '🍔 F&B / Restaurant', value: 'fnb' },
-                { title: '👤 Personal / Portfolio', value: 'personal' },
-                { title: '🏥 Healthcare (HealthTech)', value: 'healthcare' },
-                { title: '🚚 Logistics', value: 'logistics' },
-                { title: '🔮 Other (General Web/App)', value: 'other' }
-            ],
-            initial: 6
         }
     ], {
         onCancel: () => {
@@ -126,20 +71,23 @@ async function setup() {
         }
     });
 
-    const { lang, engineMode, agentName, projectScale, industryDomain } = response;
+    const { lang, operationMode } = response;
+
+    // Use default values for hidden configs
+    const engineMode = operationMode === 'creative' ? 'advanced' : 'standard';
+    const agentName = 'Antigravity';
+    const projectScale = operationMode;
 
     console.log(chalk.green(`\n📍 Configuration Saved:`));
     console.log(chalk.cyan(`   Language: ${lang === 'vi' ? 'Tiếng Việt' : 'English'}`));
-    console.log(chalk.cyan(`   Agent Name: ${chalk.bold.yellow(agentName)}`));
-    console.log(chalk.cyan(`   Engine: ${engineMode.toUpperCase()}`));
-    console.log(chalk.cyan(`   Scale: ${projectScale.toUpperCase()}`));
-    console.log(chalk.cyan(`   Industry: ${industryDomain ? industryDomain.toUpperCase() : 'OTHER'}\n`));
+    console.log(chalk.cyan(`   Mode: ${operationMode.toUpperCase()}`));
+    console.log(chalk.cyan(`   Engine: ${engineMode.toUpperCase()} (Auto-configured)\n`));
 
     // Save config
     if (!fs.existsSync(GLOBAL_DIR)) {
         fs.mkdirSync(GLOBAL_DIR, { recursive: true });
     }
-    fs.writeFileSync(path.join(GLOBAL_DIR, '.config.json'), JSON.stringify({ lang, engineMode, agentName, projectScale, industryDomain }, null, 2));
+    fs.writeFileSync(path.join(GLOBAL_DIR, '.config.json'), JSON.stringify({ lang, engineMode, agentName, projectScale, operationMode }, null, 2));
 
     // 5. Smart Dependency Check (Post-Selection)
     if (engineMode === 'advanced' && !hasPython) {
@@ -192,31 +140,6 @@ async function setup() {
         const src = path.join(SOURCE_DIR, folder);
         const dest = path.join(GLOBAL_DIR, folder);
 
-        // Special handling for 'skills' bundling
-        if (folder === 'skills') {
-            const bundlePath = path.join(__dirname, 'assets', 'skills-bundle.json');
-            if (fs.existsSync(bundlePath)) {
-                console.log('📦 Hydrating Skills from Bundle...');
-                try {
-                    const bundle = JSON.parse(fs.readFileSync(bundlePath, 'utf-8'));
-                    if (!fs.existsSync(dest)) fs.mkdirSync(dest, { recursive: true });
-                    
-                    let count = 0;
-                    Object.entries(bundle).forEach(([relPath, content]) => {
-                        const fullPath = path.join(dest, relPath);
-                        const dir = path.dirname(fullPath);
-                        if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
-                        fs.writeFileSync(fullPath, content);
-                        count++;
-                    });
-                    console.log(`✅ Hydrated ${count} skills from bundle.`);
-                    return; // Skip normal copy for skills if bundle used
-                } catch (e) {
-                    console.error('❌ Failed to hydrate bundle, falling back to copy:', e.message);
-                }
-            }
-        }
-
         if (fs.existsSync(src)) {
             // ALWAYS sync full content to Global (Central Repository)
             // This ensures Global always has the latest & greatest version of everything.
@@ -231,47 +154,91 @@ async function setup() {
     });
     console.log('✅ Global Cache is up-to-date (Full Enterprise Mode).');
 
-    // 7. Initialize Workspace (Apply Scale Logic to Local Project)
-    // Only copy specific rules to current directory based on Scale
-    console.log(`\n📂 Initializing Workspace (Scale: ${projectScale.toUpperCase()})...`);
+    // 7. Initialize Workspace (Apply Manifest Logic to Local Project)
+    console.log(`\n📂 Initializing Workspace (Mode: ${operationMode.toUpperCase()})...`);
     
     const localAgentDir = path.join(process.cwd(), '.agent');
-    const localRulesDir = path.join(localAgentDir, 'rules');
-
-    // Create local .agent struct if not exists
-    if (!fs.existsSync(localRulesDir)) fs.mkdirSync(localRulesDir, { recursive: true });
-
-    // Define rules for each scale
-    const rulesToApply = {
-        'instant': ['GEMINI.md', 'security.md', 'debug.md'], // Minimal
-        'personal': ['GEMINI.md', 'security.md', 'debug.md'], // Legacy fallback
-        'creative': null, // All Rules (Full Power)
-        'sme': ['GEMINI.md', 'security.md', 'frontend.md', 'backend.md', 'debug.md', 'business.md', 'compliance.md', 'architecture-review.md'],
-        'enterprise': null // All Rules
-    };
-
-    const targetRules = rulesToApply[projectScale];
-
-    if (targetRules) {
-        // Copy specific files from GLOBAL to LOCAL
-        targetRules.forEach(file => {
-            const globalFile = path.join(GLOBAL_DIR, 'rules', file);
-            const localFile = path.join(localRulesDir, file);
-            if (fs.existsSync(globalFile)) {
-                 fs.copyFileSync(globalFile, localFile);
-            }
-        });
-        console.log(`✅ Applied ${targetRules.length} rules to Workspace.`);
-    } else {
-        // Enterprise: Copy ALL rules from Global to Local
-         const globalRulesDir = path.join(GLOBAL_DIR, 'rules');
-         if (fs.existsSync(globalRulesDir)) {
-             fs.readdirSync(globalRulesDir).forEach(file => {
-                 fs.copyFileSync(path.join(globalRulesDir, file), path.join(localRulesDir, file));
-             });
-         }
-         console.log(`✅ Applied Full Enterprise rules to Workspace.`);
-    }
+    const localRulesDir = path.join(localAgentDir, 'rules'); // Keep this definition as it's used later
+    
+    ['rules', 'agents', 'workflows', 'skills', '.shared', 'core', 'scripts'].forEach(folder => {
+        const globalFolder = path.join(GLOBAL_DIR, folder);
+        const localFolder = path.join(localAgentDir, folder);
+        
+        if (!fs.existsSync(localFolder)) fs.mkdirSync(localFolder, { recursive: true });
+
+        const manifestKey = folder.startsWith('.') ? folder.slice(1) : folder;
+        const whitelist = modeConfig[manifestKey];
+
+        if (fs.existsSync(globalFolder)) {
+            fs.readdirSync(globalFolder).forEach(file => {
+                // Suffix handling (e.g., orchestrator.eco.md)
+                const isEcoVariant = file.includes('.eco.md') || file.includes('.instant.md'); // Backward compatibility for filenames
+                const isUltraVariant = file.includes('.ultra.md') || file.includes('.creative.md');
+                const isProVariant = !isEcoVariant && !isUltraVariant;
+
+                let targetFileName = file;
+                let shouldCopy = false;
+
+                if (whitelist === '*') {
+                    // Ultra Mode: Copy everything, but prefer ultra variants
+                    if (isUltraVariant) {
+                        targetFileName = file.replace('.ultra.md', '.md').replace('.creative.md', '.md');
+                        shouldCopy = true;
+                    } else if (isProVariant) {
+                        const ultraVariant = file.replace('.md', '.ultra.md');
+                        const creativeVariant = file.replace('.md', '.creative.md');
+                        if (!fs.existsSync(path.join(globalFolder, ultraVariant)) && !fs.existsSync(path.join(globalFolder, creativeVariant))) {
+                            shouldCopy = true;
+                        }
+                    }
+                } else {
+                    // Eco or Pro Mode: Only copy from whitelist
+                    const baseName = file.replace('.eco.md', '.md').replace('.instant.md', '.md')
+                                         .replace('.ultra.md', '.md').replace('.creative.md', '.md');
+                    
+                    if (whitelist.includes(baseName)) {
+                        if (operationMode === 'eco') {
+                            if (isEcoVariant) {
+                                targetFileName = baseName;
+                                shouldCopy = true;
+                            } else if (isProVariant) {
+                                const ecoVariant = file.replace('.md', '.eco.md');
+                                const instantVariant = file.replace('.md', '.instant.md');
+                                if (!fs.existsSync(path.join(globalFolder, ecoVariant)) && !fs.existsSync(path.join(globalFolder, instantVariant))) {
+                                    shouldCopy = true;
+                                }
+                            }
+                        } else if (operationMode === 'pro') {
+                            if (isProVariant) {
+                                shouldCopy = true;
+                            }
+                        }
+                    }
+                }
+
+                if (shouldCopy) {
+                    const srcPath = path.join(globalFolder, file);
+                    const destPath = path.join(localFolder, targetFileName);
+
+                    if (fs.lstatSync(srcPath).isDirectory()) {
+                        // For skills (directories), we use recursive copy
+                        if (os.platform() === 'win32') {
+                            try {
+                                execSync(`robocopy "${srcPath}" "${destPath}" /E /NFL /NDL /NJH /NJS /nc /ns /np /XO`, { stdio: 'inherit' });
+                            } catch (e) {}
+                        } else {
+                            execSync(`mkdir -p "${destPath}" && cp -R "${srcPath}/"* "${destPath}/"`, { stdio: 'inherit' });
+                        }
+                    } else {
+                        // For files
+                        fs.copyFileSync(srcPath, destPath);
+                    }
+                }
+            });
+        }
+    });
+
+    console.log(`✅ Applied ${operationMode.toUpperCase()} resources to Workspace.`);
 
     // 8. Inject Config into Workspace Rules (Agent Name & Domain)
     const geminiRulePath = path.join(localRulesDir, 'GEMINI.md');
@@ -288,10 +255,10 @@ async function setup() {
 
         // Inject Industry Domain
         if (industryDomain) {
-            content = content.replace(
-                /Lĩnh vực hoạt động\*\*: GENERAL \(Mặc định\)/g, 
-                `Lĩnh vực hoạt động**: ${industryDomain.toUpperCase()}`
-            );
+            const domainBlock = `- **Lĩnh vực hoạt động**: ${industryDomain.toUpperCase()}\n  - Hệ thống sẽ ưu tiên các pattern và best practice thuộc lĩnh vực này.`;
+            
+            // Insert before 'Giá trị cốt lõi' bullet point
+            content = content.replace(/(- \*\*Giá trị cốt lõi)/, `${domainBlock}\n$1`);
         }
 
         fs.writeFileSync(geminiRulePath, content);
@@ -302,18 +269,18 @@ async function setup() {
     localizeWorkflows(lang);
 
     // FINAL SUMMARY (Premium Style)
-    console.log('\n' + gradient.pastel.multiline(lang === 'vi' ? '📦 Đang cấu hình môi trường Antigravity IDE' : '📦 Configuring Antigravity IDE Environment'));
+    console.log('\n' + gradient.pastel.multiline('📦 Configuring Google Antigravity Environment'));
     console.log(gradient.atlas('━'.repeat(60)));
     
-    console.log(chalk.green('√') + (lang === 'vi' ? ' Đồng bộ Global Rules (Chuẩn Enterprise)' : ' Global Rules Synced (Enterprise Standard)'));
-    console.log(chalk.green('√') + (lang === 'vi' ? ' Đã bản địa hóa Workflows' : ' Workflows Localized'));
-    console.log(chalk.green('√') + (lang === 'vi' ? ` Cấu hình Workspace (Chế độ ${projectScale.toUpperCase()})` : ` Workspace Configured (${projectScale.toUpperCase()} Mode)`));
-    console.log(chalk.green('√') + (lang === 'vi' ? ' Đã nạp Context (Định danh & Lĩnh vực)' : ' Context Injected (Identity & Domain)'));
+    console.log(chalk.green('√') + ' Global Rules Synced (Enterprise Standard)');
+    console.log(chalk.green('√') + ' Workflows Localized');
+    console.log(chalk.green('√') + ` Workspace Configured (${projectScale.toUpperCase()} Mode)`);
+    console.log(chalk.green('√') + ' Context Injected (Identity & Domain)');
     
-    console.log(gradient.rainbow(lang === 'vi' ? '\n✓ THÀNH CÔNG! Hệ thống đã sẵn sàng' : '\n✓ SUCCESS! System Ready'));
+    console.log(gradient.rainbow('\n✓ SUCCESS! System Ready'));
     console.log(gradient.atlas('━'.repeat(60)));
 
-    console.log(chalk.bold.yellow(lang === 'vi' ? '\n🤖 Kích hoạt AI Agent (Bước tiếp theo):' : '\n🤖 Activate AI Agent (Next Steps):'));
+    console.log(chalk.bold.yellow('\n🤖 Kích hoạt AI Agent (Next Steps):'));
     if (lang === 'vi') {
         console.log(`   1. Mở dự án:     ${chalk.cyan('cd <your-project>')}`);
         console.log(`   2. Mở Chat:      ${chalk.cyan('(Sử dụng AI Panel của IDE)')}`);

package/web/src/app/docs/guide/examples/brainstorm/page.mdx

@@ -0,0 +1,91 @@
+export const metadata = {
+  title: "Example: Structured Brainstorming | Antigravity Kit",
+  description: "Learn how to use the /brainstorm workflow to explore multiple options before committing to an implementation.",
+};
+
+import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature } from '@/components/mdx'
+
+# Structured Brainstorming
+
+Explore multiple approaches before writing code with the `/brainstorm` workflow.
+
+## Overview
+
+The `/brainstorm` command activates a **structured ideation mode**.
+Instead of jumping straight to code, the agent explores at least 3 different approaches,
+analyzes pros and cons, and helps you make an informed decision.
+
+<FeatureGrid>
+  <Feature title="No Code" description="Ideas only" />
+  <Feature title="3+ Options" description="Always compare" />
+  <Feature title="Pros/Cons" description="Honest tradeoffs" />
+  <Feature title="You Decide" description="Final choice" />
+</FeatureGrid>
+
+## The Process
+
+<StepList>
+  <Step number={1} title="Describe Your Challenge">
+    Tell the agent what you want to explore. Be specific about constraints.
+
+    ```bash
+    /brainstorm authentication system for my SaaS app
+    ```
+  </Step>
+  <Step number={2} title="Review Options">
+    The agent presents 3+ approaches with pros, cons, and effort levels.
+  </Step>
+  <Step number={3} title="Make Decision">
+    Choose an option, then use `/enhance` or `/create` to implement.
+  </Step>
+</StepList>
+
+## Example Session
+
+<Terminal>
+  <TerminalLine type="user">/brainstorm state management for complex form</TerminalLine>
+
+  <TerminalBlock>
+    <TerminalLine type="agent">**Exploring Options...**</TerminalLine>
+  </TerminalBlock>
+
+  <div className="space-y-4 pl-8 mb-4">
+    <div className="border-t border-zinc-800 pt-3">
+      <strong className="text-purple-400">Option A: React Hook Form + Zod</strong>
+      <div className="text-xs mt-1 space-y-1">
+        <div className="text-green-400">✅ Minimal re-renders, great DX</div>
+        <div className="text-red-400">❌ Learning curve</div>
+        <div className="text-yellow-400">📊 Effort: Low</div>
+      </div>
+    </div>
+    <div className="border-t border-zinc-800 pt-3">
+      <strong className="text-purple-400">Option B: Zustand</strong>
+      <div className="text-xs mt-1 space-y-1">
+        <div className="text-green-400">✅ Full control, persists across routes</div>
+        <div className="text-red-400">❌ More boilerplate</div>
+        <div className="text-yellow-400">📊 Effort: Medium</div>
+      </div>
+    </div>
+  </div>
+
+  <TerminalBlock highlight>
+    <TerminalLine type="agent">**💡 Recommendation: Option A**</TerminalLine>
+    For 20+ fields, RHF minimizes re-renders.
+  </TerminalBlock>
+</Terminal>
+
+## Pro Tips
+
+<ProTips>
+  <Tip title="Provide Context">
+    Mention constraints: "I need SSR support", "Must work offline".
+  </Tip>
+  <Tip title="Ask Follow-ups">
+    "Tell me more about Option B's scalability" before deciding.
+  </Tip>
+</ProTips>
+
+## Next Steps
+
+- Try `/brainstorm` for your next architecture decision
+- After deciding, use [Add New Feature](/docs/guide/examples/new-feature) to implement

package/web/src/app/docs/guide/examples/create/page.mdx

@@ -0,0 +1,84 @@
+export const metadata = {
+  title: "Example: Create New Application | Antigravity Kit",
+  description: "Learn how to use the /create workflow to build new applications from scratch with AI-powered wizards.",
+};
+
+import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip } from '@/components/mdx'
+
+# Create New Application
+
+Build complete applications from scratch with the `/create` wizard.
+
+## Overview
+
+The `/create` command is your **application creation wizard**.
+It guides you through an interactive dialogue, understands your requirements,
+plans the architecture, and orchestrates specialist agents to build your app.
+
+<Callout type="info">
+  **From idea to running app:** Just describe what you want, and the wizard handles tech stack, file structure, database schema, and implementation.
+</Callout>
+
+## The Process
+
+<StepList>
+  <Step number={1} title="Describe Your App">
+    Tell the wizard what you want to build. It will ask clarifying questions if needed.
+
+    ```bash
+    /create e-commerce site with product listing and cart
+    ```
+  </Step>
+  <Step number={2} title="Review Plan">
+    The `project-planner` agent creates a detailed plan. Approve to proceed.
+  </Step>
+  <Step number={3} title="Agents Build">
+    Specialist agents work in parallel: database-architect, backend, frontend.
+  </Step>
+</StepList>
+
+## Example Session
+
+<Terminal>
+  <TerminalLine type="user">/create todo app with dark mode</TerminalLine>
+
+  <TerminalBlock>
+    <TerminalLine type="agent">**Analyzing request...**</TerminalLine>
+    Tech Stack: Next.js + Tailwind + Zustand
+    <span className="text-yellow-300">Proceed? (Y/N)</span>
+  </TerminalBlock>
+
+  <TerminalLine type="user">Y</TerminalLine>
+
+  <div className="space-y-2 pl-8 mb-4">
+    <div className="flex items-center gap-2">
+      <span className="w-2 h-2 rounded-full bg-blue-500 animate-pulse"></span>
+      <span><strong>Backend:</strong> Creating store...</span>
+    </div>
+    <div className="flex items-center gap-2">
+      <span className="w-2 h-2 rounded-full bg-pink-500 animate-pulse"></span>
+      <span><strong>Frontend:</strong> Building components...</span>
+    </div>
+  </div>
+
+  <TerminalBlock highlight>
+    <TerminalLine type="agent">**🚀 App Created!**</TerminalLine>
+    Preview: <span className="text-blue-400">http://localhost:3000</span>
+  </TerminalBlock>
+</Terminal>
+
+## Pro Tips
+
+<ProTips>
+  <Tip title="Be Specific">
+    "E-commerce with Stripe" beats "online store".
+  </Tip>
+  <Tip title="Start Simple">
+    Create MVP first, use `/enhance` to iterate.
+  </Tip>
+</ProTips>
+
+## Next Steps
+
+- Run `/create` followed by your app idea
+- Use [Add New Feature](/docs/guide/examples/new-feature) to extend

package/web/src/app/docs/guide/examples/debugging/page.mdx

@@ -0,0 +1,83 @@
+export const metadata = {
+  title: "Example: Systematic Debugging | Antigravity Kit",
+  description: "Learn how to solve complex issues using the /debug workflow's 4-phase investigation protocol.",
+};
+
+import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip } from '@/components/mdx'
+
+# Systematic Debugging
+
+Solve complex issues using the rigorous `/debug` workflow.
+
+## Overview
+
+The `/debug` workflow enforces a **4-phase investigation protocol** (Discovery, Hypothesis, Verification, Resolution). It prevents guess-driven development by requiring evidence before code changes.
+
+<Callout type="info" title="When to use:">
+  - "The login button does nothing"
+  - "API returns 500 error intermittently"
+  - "App crashes on mobile only"
+</Callout>
+
+## The Process
+
+<StepList>
+  <Step number={1} title="Discovery">
+    Gathers facts: Error logs, user reports, reproduction steps.
+
+    ```bash
+    /debug Login returns 403 even with correct credentials
+    ```
+  </Step>
+  <Step number={2} title="Hypothesis">
+    Formulates potential causes prioritized by likelihood.
+  </Step>
+  <Step number={3} title="Verification">
+    Systematically tests each hypothesis using scripts or logs.
+  </Step>
+  <Step number={4} title="Resolution">
+    Implements the fix and adds a regression test.
+  </Step>
+</StepList>
+
+## Example Session
+
+<Terminal>
+  <TerminalLine type="user">/debug Form submission fails silently</TerminalLine>
+
+  <TerminalBlock>
+    <TerminalLine type="agent">**Phase 1: Discovery**</TerminalLine>
+    Reading `CheckoutForm.tsx`... Found `handleSubmit`.
+    <span className="text-red-400">ERROR: Cannot read properties of undefined</span>
+  </TerminalBlock>
+
+  <TerminalBlock>
+    <TerminalLine type="agent">**Phase 2: Hypothesis**</TerminalLine>
+    <div className="text-xs mt-1">
+      1. `emailRef.current` is null on mount<br/>
+      2. Event handler not bound correctly
+    </div>
+  </TerminalBlock>
+
+  <TerminalBlock highlight>
+    <TerminalLine type="agent">**Phase 4: Resolution**</TerminalLine>
+    Fix applied: Added null check to `emailRef`.
+    <span className="text-green-400">✅ Test passed: Form submits successfully.</span>
+  </TerminalBlock>
+</Terminal>
+
+## Pro Tips
+
+<ProTips>
+  <Tip title="Provide Context">
+    Paste the exact error message or stack trace for faster discovery.
+  </Tip>
+  <Tip title="Trust, Verify">
+    Ask the agent to run the reproduction case again to confirm it's solved.
+  </Tip>
+</ProTips>
+
+## Next Steps
+
+- Try `/debug` on an existing bug
+- See [Deployment](/docs/guide/examples/deployment) to ship your fix