antigravity-ide 4.2.0 → 4.2.1

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

@@ -0,0 +1,93 @@
+export const metadata = {
+  title: "Example: Production Deployment | Antigravity Kit",
+  description: "Learn how to strictly and safely deploy applications using the /deploy workflow.",
+};
+
+import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip } from '@/components/mdx'
+
+# Production Deployment
+
+Ship with confidence using the safety-first `/deploy` workflow.
+
+## Overview
+
+The `/deploy` command is an **Audit & Release Conductor**.
+It forces your code to pass a rigorous health check before deployment.
+
+<Callout type="info" title="It stops you from deploying if:">
+  - Security vulnerabilities are found
+  - Linting errors exist
+  - TypeScript types are invalid
+  - Critical tests fail
+</Callout>
+
+## The Process
+
+<StepList>
+  <Step number={1} title="Execute Command">
+    When your code is ready, trigger the deployment pipeline.
+
+    ```bash
+    /deploy
+    ```
+  </Step>
+  <Step number={2} title="Pre-Flight Checklist">
+    The agent automatically audits your project health.
+
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+      <div className="bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg p-3">
+        <h4 className="text-sm font-semibold mb-1">🛡️ Security</h4>
+        <p className="text-xs text-zinc-500 dark:text-zinc-400 m-0">Scans for vulnerabilities & secrets</p>
+      </div>
+      <div className="bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg p-3">
+        <h4 className="text-sm font-semibold mb-1">📋 Quality</h4>
+        <p className="text-xs text-zinc-500 dark:text-zinc-400 m-0">Enforces Linting & Type Safety</p>
+      </div>
+    </div>
+  </Step>
+  <Step number={3} title="Release">
+    If checks pass, it builds and pushes to your platform (Vercel, Docker, etc).
+  </Step>
+</StepList>
+
+## Example Session
+
+<Terminal>
+  <TerminalLine type="user">/deploy</TerminalLine>
+
+  <TerminalBlock>
+    <TerminalLine type="agent">**Running Pre-Flight Checks...**</TerminalLine>
+    <div className="space-y-1 mt-2">
+      <div>🔄 Security Scan... <span className="text-green-400">PASSED</span></div>
+      <div>🔄 Lint Check... <span className="text-green-400">PASSED</span></div>
+      <div>🔄 Type Validation... <span className="text-green-400">PASSED</span></div>
+    </div>
+    <br/>
+    <span className="text-green-400">✅ All checks passed!</span>
+    Deploying to Vercel...
+  </TerminalBlock>
+
+  <TerminalBlock highlight>
+    <TerminalLine type="agent">**🚀 Deployment Complete!**</TerminalLine>
+    <div className="space-y-1 mt-2">
+      <div>🌐 URL: <span className="text-blue-400">https://my-app.vercel.app</span></div>
+      <div>💚 Health Check: <span className="text-green-400">OK</span></div>
+    </div>
+  </TerminalBlock>
+</Terminal>
+
+## Pro Tips
+
+<ProTips>
+  <Tip title="Check First">
+    Run `/deploy check` to dry-run validations without deploying.
+  </Tip>
+  <Tip title="Rollback Safety">
+    Use `/deploy rollback` to instantly revert to the last stable version.
+  </Tip>
+</ProTips>
+
+## Next Steps
+
+- Try `/deploy check` to run pre-flight checks
+- Learn about [Multi-Agent Orchestration](/docs/guide/examples/orchestration)

package/web/src/app/docs/guide/examples/new-feature/page.mdx

@@ -0,0 +1,102 @@
+export const metadata = {
+  title: "Example: Add a New Feature | Antigravity Kit",
+  description: "Step-by-step guide on adding new features to an existing application using Antigravity Kit workflows.",
+};
+
+import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip } from '@/components/mdx'
+
+# Add a New Feature
+
+Learn how to safely add complex features to an existing codebase using the `/enhance` workflow.
+
+## Overview
+
+The `/enhance` workflow is your day-to-day tool for iterative development.
+Unlike `/create` which builds from scratch, `/enhance` focuses on surgically adding functionality without breaking existing code.
+
+<Callout type="info">
+  **Scenario:** Adding a "Dashboard Analytics" feature to an existing SaaS application.
+</Callout>
+
+## The Process
+
+<StepList>
+  <Step number={1} title="Feature Planning">
+    Describe your feature requirements clearly.
+
+    ```bash
+    /enhance Add an analytics dashboard for user activity
+    Requirements:
+    - Track daily active users and page views
+    - Visual charts using Recharts
+    - API endpoint to aggregate data
+    ```
+  </Step>
+  <Step number={2} title="Component Implementation">
+    Specialists implement the full vertical slice.
+
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mt-4">
+      <div className="bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg p-3 text-center">
+        <div className="text-xs font-semibold">Database</div>
+      </div>
+      <div className="bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg p-3 text-center">
+        <div className="text-xs font-semibold">Backend</div>
+      </div>
+      <div className="bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg p-3 text-center">
+        <div className="text-xs font-semibold">Frontend</div>
+      </div>
+      <div className="bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg p-3 text-center">
+        <div className="text-xs font-semibold">Testing</div>
+      </div>
+    </div>
+  </Step>
+  <Step number={3} title="Verify Integration">
+    Run `final checks` to validate bundle size, accessibility, and tests.
+  </Step>
+</StepList>
+
+## Example Session
+
+<Terminal>
+  <TerminalLine type="user">/enhance add dark mode toggle</TerminalLine>
+
+  <TerminalBlock>
+    <TerminalLine type="agent">**Analyzing codebase...**</TerminalLine>
+    <div className="text-xs mt-2">
+      Found: Tailwind CSS with no dark mode config<br/>
+      Plan: Update tailwind.config, add ThemeProvider, create toggle component
+    </div>
+  </TerminalBlock>
+
+  <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-purple-500 animate-pulse"></span>
+      <span><strong>Frontend:</strong> Creating ThemeToggle...</span>
+    </div>
+    <div className="flex items-center gap-2">
+      <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
+      <span><strong>Testing:</strong> Adding theme tests...</span>
+    </div>
+  </div>
+
+  <TerminalBlock highlight>
+    <TerminalLine type="agent">**✅ Feature Added!**</TerminalLine>
+    <span className="text-zinc-400">Run `/preview start` to test.</span>
+  </TerminalBlock>
+</Terminal>
+
+## Pro Tips
+
+<ProTips>
+  <Tip title="Check Dependencies">
+    Use `checklist.py` to prevent bundle bloat from new libraries.
+  </Tip>
+  <Tip title="Keep It Modular">
+    Isolate new components to minimize side effects on existing code.
+  </Tip>
+</ProTips>
+
+## Next Steps
+
+- Try `/enhance` in your project
+- See [Test Generation](/docs/guide/examples/test) for coverage

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

@@ -0,0 +1,99 @@
+export const metadata = {
+  title: "Example: Multi-Agent Orchestration | Antigravity Kit",
+  description: "Learn how to coordinate multiple specialist agents for complex projects using the /orchestrate workflow.",
+};
+
+import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature } from '@/components/mdx'
+
+# Multi-Agent Orchestration
+
+Build entire SaaS platforms by coordinating specialist agents with the `/orchestrate` workflow.
+
+## Overview
+
+Most AI interactions are 1-on-1. The `orchestrator` agent changes this by acting as a **Project Manager**.
+It breaks down a large request (e.g., "Build a SaaS MVP") into tasks and assigns them to the best specialist for the job.
+
+<FeatureGrid>
+  <Feature title="Backend" description="API & DB Architect" />
+  <Feature title="Frontend" description="UI/UX Specialist" />
+  <Feature title="Security" description="Safety Auditor" />
+  <Feature title="QA" description="Test Engineer" />
+</FeatureGrid>
+
+## The Process
+
+<StepList>
+  <Step number={1} title="Project Brief">
+    Describe the high-level goal. The orchestrator will interview you to clarify requirements.
+
+    ```bash
+    /orchestrate Build a "Course Platform" MVP with:
+    - User Authentication (NextAuth)
+    - Stripe Payments
+    - Video Hosting (Mux)
+    - Dashboard for Instructors
+    ```
+  </Step>
+  <Step number={2} title="Phase 1: Planning">
+    The `project-planner` agent creates a detailed roadmap (`PLAN.md`).
+
+    <div className="bg-zinc-50 dark:bg-zinc-900 p-3 rounded-lg text-xs font-mono border-l-2 border-blue-500 mt-2">
+      ...<br/>
+      ### 2.1 Database Schema<br/>
+      - Users (id, email, role)<br/>
+      - Courses (id, title, price)<br/>
+      ...
+    </div>
+  </Step>
+  <Step number={3} title="Phase 2: Execution">
+    Agents work in parallel. The Orchestrator monitors progress and unblocks dependencies.
+  </Step>
+</StepList>
+
+## Example Session
+
+<Terminal>
+  <TerminalLine type="user">/orchestrate Build E-commerce MVP</TerminalLine>
+
+  <TerminalBlock>
+    <TerminalLine type="agent">**Activating Squad...**</TerminalLine>
+    Assigning tasks based on `PLAN.md`:
+  </TerminalBlock>
+
+  <div className="space-y-3 pl-8">
+    <div className="flex items-center gap-2">
+      <span className="w-2 h-2 rounded-full bg-yellow-500 animate-pulse"></span>
+      <span><strong>Backend-Specialist:</strong> Configuring Prisma Schema...</span>
+    </div>
+    <div className="flex items-center gap-2">
+      <span className="w-2 h-2 rounded-full bg-blue-500 animate-pulse"></span>
+      <span><strong>Frontend-Specialist:</strong> Building ProductCard component...</span>
+    </div>
+    <div className="flex items-center gap-2">
+      <span className="w-2 h-2 rounded-full bg-purple-500 animate-pulse"></span>
+      <span><strong>Security-Auditor:</strong> Reviewing auth flow...</span>
+    </div>
+  </div>
+
+  <TerminalBlock highlight>
+    <TerminalLine type="agent">**✅ Project Complete!**</TerminalLine>
+    All tasks finished. Run `npm run dev` to start.
+  </TerminalBlock>
+</Terminal>
+
+## Pro Tips
+
+<ProTips>
+  <Tip title="Start Small">
+    Don't try to build Facebook in one go. Orchestrate an MVP first, then use `/enhance` to iterate.
+  </Tip>
+  <Tip title="Define Auth">
+    Always specify how users log in (e.g., "Use NextAuth with Google"). It's a key architectural decision.
+  </Tip>
+</ProTips>
+
+## Next Steps
+
+- Learn about [Systematic Debugging](/docs/guide/examples/debugging) to maintain your complex app
+- See [Deployment](/docs/guide/examples/deployment) to ship your MVP

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

@@ -0,0 +1,76 @@
+export const metadata = {
+  title: "Example: Project Planning | Antigravity Kit",
+  description: "Learn how to use the /plan workflow to create detailed project plans before implementation.",
+};
+
+import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip } from '@/components/mdx'
+
+# Project Planning
+
+Create detailed implementation plans before writing code with the `/plan` workflow.
+
+## Overview
+
+The `/plan` command activates **planning-only mode**.
+It uses the `project-planner` agent to create a detailed plan file without writing any code.
+
+<Callout type="info">
+  **Critical Rule:** NO CODE is written during planning. Only `PLAN.md` is created.
+</Callout>
+
+## The Process
+
+<StepList>
+  <Step number={1} title="Describe Your Project">
+    Tell the planner what you want to build.
+
+    ```bash
+    /plan e-commerce site with cart and checkout
+    ```
+  </Step>
+  <Step number={2} title="Socratic Questions">
+    The planner asks clarifying questions before creating the plan.
+  </Step>
+  <Step number={3} title="Plan Generated">
+    Creates `docs/PLAN-{slug}.md` with tasks and agent assignments.
+  </Step>
+</StepList>
+
+## Example Session
+
+<Terminal>
+  <TerminalLine type="user">/plan SaaS dashboard with analytics</TerminalLine>
+
+  <TerminalBlock>
+    <TerminalLine type="agent">**Clarifying Questions:**</TerminalLine>
+    <div className="text-yellow-300 text-xs mt-2">
+      1. What metrics? (users, revenue?)<br/>
+      2. Real-time or daily?<br/>
+      3. Charting library?
+    </div>
+  </TerminalBlock>
+
+  <TerminalLine type="user">Users + revenue, real-time, Recharts</TerminalLine>
+
+  <TerminalBlock highlight>
+    <TerminalLine type="agent">**✅ Plan Created!**</TerminalLine>
+    `docs/PLAN-saas-dashboard.md`<br/>
+    <span className="text-zinc-400">Run `/create` to implement.</span>
+  </TerminalBlock>
+</Terminal>
+
+## Pro Tips
+
+<ProTips>
+  <Tip title="Answer Thoroughly">
+    The more context you provide, the better the plan.
+  </Tip>
+  <Tip title="Edit the Plan">
+    Modify the generated plan before implementation.
+  </Tip>
+</ProTips>
+
+## Next Steps
+
+- Run `/plan` for your next major feature
+- After planning, use [Create Application](/docs/guide/examples/create) to implement

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

@@ -0,0 +1,77 @@
+export const metadata = {
+  title: "Example: Preview Management | Antigravity Kit",
+  description: "Learn how to use the /preview workflow to manage your local development server.",
+};
+
+import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature } from '@/components/mdx'
+
+# Preview Management
+
+Manage your local development server with the `/preview` workflow.
+
+## Overview
+
+The `/preview` command manages your local development server.
+Start, stop, restart, or check the status with simple commands.
+
+<FeatureGrid>
+  <Feature title="start" description="Launch server" />
+  <Feature title="stop" description="Kill server" />
+  <Feature title="restart" description="Reload" />
+  <Feature title="check" description="Health" />
+</FeatureGrid>
+
+## The Process
+
+<StepList>
+  <Step number={1} title="Start Server">
+    ```bash
+    /preview start
+    ```
+  </Step>
+  <Step number={2} title="Check Status">
+    ```bash
+    /preview
+    ```
+  </Step>
+  <Step number={3} title="Stop Server">
+    ```bash
+    /preview stop
+    ```
+  </Step>
+</StepList>
+
+## Example Session
+
+<Terminal>
+  <TerminalLine type="user">/preview start</TerminalLine>
+
+  <TerminalBlock>
+    <TerminalLine type="agent">**🚀 Starting preview...**</TerminalLine>
+    <div className="text-xs mt-2">
+      Port: 3000<br/>
+      Type: Next.js
+    </div>
+  </TerminalBlock>
+
+  <TerminalBlock highlight>
+    <TerminalLine type="agent">**✅ Preview ready!**</TerminalLine>
+    URL: <span className="text-blue-400">http://localhost:3000</span>
+  </TerminalBlock>
+</Terminal>
+
+## Pro Tips
+
+<ProTips>
+  <Tip title="Auto-detection">
+    Automatically detects Next.js, Vite, etc.
+  </Tip>
+  <Tip title="Port Conflict">
+    Suggests alternatives if port 3000 is busy.
+  </Tip>
+</ProTips>
+
+## Next Steps
+
+- Run `/preview start` to launch your dev server
+- See [Deployment](/docs/guide/examples/deployment) to go live

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

@@ -0,0 +1,78 @@
+export const metadata = {
+  title: "Example: Project Status | Antigravity Kit",
+  description: "Learn how to use the /status workflow to view your project and agent status at a glance.",
+};
+
+import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature } from '@/components/mdx'
+
+# Project Status
+
+Get a complete overview of your project with the `/status` workflow.
+
+## Overview
+
+The `/status` command gives you a **complete dashboard view** of your project.
+See project info, tech stack, completed features, agent activity, and preview status.
+
+<FeatureGrid>
+  <Feature title="Project" description="Info & Stack" />
+  <Feature title="Agents" description="Status Board" />
+  <Feature title="Files" description="Statistics" />
+  <Feature title="Preview" description="Health Check" />
+</FeatureGrid>
+
+## The Process
+
+<StepList>
+  <Step number={1} title="Run Command">
+    Simply run the command to see your project dashboard.
+
+    ```bash
+    /status
+    ```
+  </Step>
+</StepList>
+
+## Example Session
+
+<Terminal>
+  <TerminalLine type="user">/status</TerminalLine>
+
+  <TerminalBlock>
+    <div className="text-yellow-400 mb-2">=== Project Status ===</div>
+    <div className="space-y-1 mb-4">
+      <div>📁 Project: my-ecommerce</div>
+      <div>🏷️ Type: nextjs-ecommerce</div>
+      <div>📄 Files: 73 created, 12 modified</div>
+    </div>
+
+    <div className="text-yellow-400 mb-2">=== Agent Status ===</div>
+    <div className="space-y-1 mb-4">
+      <div><span className="text-green-400">✅</span> database-architect → Completed</div>
+      <div><span className="text-green-400">✅</span> backend-specialist → Completed</div>
+      <div><span className="text-blue-400">🔄</span> frontend-specialist → 60%</div>
+    </div>
+
+    <div className="text-yellow-400 mb-2">=== Preview ===</div>
+    <div className="space-y-1">
+      <div>🌐 URL: <span className="text-blue-400">http://localhost:3000</span></div>
+      <div>💚 Health: <span className="text-green-400">OK</span></div>
+    </div>
+  </TerminalBlock>
+</Terminal>
+
+## Pro Tips
+
+<ProTips>
+  <Tip title="Before Deploy">
+    Check status to ensure all agents completed.
+  </Tip>
+  <Tip title="Track Progress">
+    Monitor multi-agent orchestration in real-time.
+  </Tip>
+</ProTips>
+
+## Next Steps
+
+- Run `/status` to check project state
+- See [Deployment](/docs/guide/examples/deployment) when ready to ship

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

@@ -0,0 +1,80 @@
+export const metadata = {
+  title: "Example: Test Generation & Execution | Antigravity Kit",
+  description: "Learn how to use the /test workflow to generate and run tests for your code.",
+};
+
+import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature } from '@/components/mdx'
+
+# Test Generation & Execution
+
+Generate and run tests with the `/test` workflow.
+
+## Overview
+
+The `/test` command handles **test generation and execution**.
+Analyze code, create test suites, run tests, or check coverage.
+
+<FeatureGrid>
+  <Feature title="run" description="Execute tests" />
+  <Feature title="generate" description="Create tests" />
+  <Feature title="coverage" description="Report" />
+  <Feature title="watch" description="Live mode" />
+</FeatureGrid>
+
+## The Process
+
+<StepList>
+  <Step number={1} title="Run All Tests">
+    ```bash
+    /test
+    ```
+  </Step>
+  <Step number={2} title="Generate Tests for File">
+    ```bash
+    /test src/auth.ts
+    ```
+  </Step>
+  <Step number={3} title="Check Coverage">
+    ```bash
+    /test coverage
+    ```
+  </Step>
+</StepList>
+
+## Example Session
+
+<Terminal>
+  <TerminalLine type="user">/test src/services/auth.ts</TerminalLine>
+
+  <TerminalBlock>
+    <TerminalLine type="agent">**Analyzing auth.ts...**</TerminalLine>
+    <div className="text-xs mt-2">
+      Found 4 functions: login, register, verifyToken, resetPassword
+    </div>
+  </TerminalBlock>
+
+  <TerminalBlock highlight>
+    <TerminalLine type="agent">**✅ Tests Generated!**</TerminalLine>
+    <div className="text-xs mt-2">
+      Created: `tests/auth.test.ts`<br/>
+      Test cases: 12<br/>
+      Coverage: 95%
+    </div>
+  </TerminalBlock>
+</Terminal>
+
+## Pro Tips
+
+<ProTips>
+  <Tip title="Test Behavior">
+    Focus on what functions do, not implementation.
+  </Tip>
+  <Tip title="Edge Cases">
+    Always test errors, empty inputs, boundaries.
+  </Tip>
+</ProTips>
+
+## Next Steps
+
+- Run `/test` to execute your test suite
+- See [Deployment](/docs/guide/examples/deployment) which runs tests automatically