AG KIT

Antigravity-first agent engineering kit with rules, skills, specialist agents, workflows, persistent memory, MCP guidance, orchestration, and a native safety hook.

- or -

CA: Gjpatn3d24dCRhUng7F37K6xJba4R8SDBC18xs1Apump

AG Kit - Web Application

Next.js documentation and dashboard portal for AG Kit — AI Agent templates with Skills, Agents, and Workflows.

- Workspace skills: - Workspace MCP: - Native `PreToolUse` hooks: - Plugin installation: and --- ### Overview (`.agents/scripts/README.md`) # AG Kit Runtime Scripts ## Entry points ### `validate_kit.py` Self-validates the `.agents/` package. It checks JSON, strict SemVer frontmatter, workflow/agent/skill references, manifest and lock synchronization, generated dependency docs, memory contracts, local Markdown links, Python syntax, referenced script paths, and documented inventory counts. ```bash python .agents/scripts/validate_kit.py python .agents/scripts/validate_kit.py --json ``` ### `generate_manifest.py` Builds deterministic `manifest.json` and `manifest.lock.json` files from component frontmatter. Use `--check` in CI to fail on registry drift. ```bash python .agents/scripts/generate_manifest.py python .agents/scripts/generate_manifest.py --check ``` ### `dependency_graph.py` Builds `DEPENDENCY_GRAPH.md` from workflow and agent dependencies. Use `--check` to verify that the generated graph is current. ```bash python .agents/scripts/dependency_graph.py python .agents/scripts/dependency_graph.py --check ``` ### `checklist.py` Runs the fast project validation path. URL checks are automatically skipped when `--url` is not supplied. ```bash python .agents/scripts/checklist.py . python .agents/scripts/checklist.py . --url http://localhost:3000 python .agents/scripts/checklist.py . --report .agents/reports/checklist.json ``` ### `verify_all.py` Runs the broad release suite. `--no-runtime` excludes Lighthouse and Playwright; `--no-e2e` excludes Playwright only. ```bash python .agents/scripts/verify_all.py . --no-runtime python .agents/scripts/verify_all.py . --url http://localhost:3000 --report verification.json ``` ### `session_manager.py` Prints project type, package metadata, feature hints, and file counts. ```bash python .agents/scripts/session_manager.py status . ``` ### `auto_preview.py` Starts, stops, or inspects a detected local preview server. ```bash python .agents/scripts/auto_preview.py start 3000 python .agents/scripts/auto_preview.py status python .agents/scripts/auto_preview.py stop ``` ## Runtime prerequisites Most scripts use only the Python standard library. Optional checks require the corresponding project tools: - Lighthouse: `npm install lighthouse` - Playwright: `pip install playwright && playwright install chromium` - Node lint/test commands: project package manager and configured scripts - Python lint/test commands: project-configured tools such as Ruff, MyPy, or pytest Missing URL-based tools produce a failed runtime check rather than a false pass. Missing non-applicable build outputs are reported as skipped/pass with an explanatory message. ## Exit-code contract - `0`: check passed or was not applicable - `1`: findings met the configured failure threshold - `2`: invalid command usage or missing input path The master runners use subprocess exit codes as the source of truth and can emit a full JSON report with commands, durations, stdout, stderr, and status. ## Regression tests Toolkit scripts include regression tests for self-validation, component SemVer, manifest/lock integrity, dependency graph synchronization, memory contracts, security scanning, dependency and bundle analysis, and toolkit-root discovery. ```bash python -m unittest discover -s .agents/scripts/tests -v ``` --- ### Web Src App Docs Antigravity Content.En (`web/src/app/docs/antigravity/content.en.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, FeatureGrid, Feature } from '@/components/mdx' # Antigravity Runtime Integration Google Antigravity is AG Kit's production runtime. Beyond rules, skills, and workflows, the kit ships a native integration layer inside `.agents/`. ## The runtime layer ## Tool safety hook `hooks.json` registers a native `PreToolUse` gate for `run_command`. It is deliberately narrow — it blocks high-confidence destructive patterns only: - Unix root-filesystem deletion (`rm -rf /` and equivalents) - Filesystem formatting and raw-disk overwrite (`mkfs`, writing to `/dev/sdX`) - Windows drive formatting and forced root deletion Normal project cleanup (deleting `dist/`, `node_modules/`) passes through. The hook does not replace Antigravity permissions, workspace trust, sandboxing, or human approval. It is a last-resort tripwire, not a security boundary. ## MCP synchronization `.agents/mcp_config.json` is the workspace source for MCP servers. The sync helper applies it explicitly — it refuses placeholder credentials, preserves conflicting entries by default, and backs up the target before writing: ## Antigravity Doctor The Doctor checks discovery, MCP, hooks, orchestration, plugin packaging, and release readiness — read-only: {`[PASS] discovery [PASS] mcp [PASS] hooks [PASS] orchestration [PASS] plugin [PASS] validation [PASS] Antigravity contract is ready.`} ## Plugin bundle For teams who prefer a packaged install, the plugin builder produces a local Antigravity plugin bundle with a deterministic SHA-256 content inventory: Everything on this page is validated in CI: the Doctor, hook regression tests, and plugin inventory run on every push. --- ### Web Src App Docs Antigravity Content.Vi (`web/src/app/docs/antigravity/content.vi.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, FeatureGrid, Feature } from '@/components/mdx' # Tích hợp Runtime Antigravity Google Antigravity là runtime production của AG Kit. Ngoài rules, skills và workflows, kit đi kèm lớp tích hợp native bên trong `.agents/`. ## Lớp runtime ## Hook an toàn công cụ `hooks.json` đăng ký cổng `PreToolUse` native cho `run_command`. Nó cố tình hẹp — chỉ chặn các mẫu phá hủy có độ tin cậy cao: - Xóa root filesystem Unix (`rm -rf /` và tương đương) - Format filesystem và ghi đè raw-disk (`mkfs`, ghi vào `/dev/sdX`) - Format ổ đĩa Windows và xóa root cưỡng bức Dọn dẹp dự án bình thường (xóa `dist/`, `node_modules/`) vẫn đi qua bình thường. Hook không thay thế quyền của Antigravity, workspace trust, sandbox, hay phê duyệt của con người. Nó là dây bẫy cuối cùng, không phải ranh giới bảo mật. ## Đồng bộ MCP `.agents/mcp_config.json` là nguồn cấu hình MCP của workspace. Trình đồng bộ áp dụng nó một cách tường minh — từ chối credential giữ chỗ, giữ nguyên mục xung đột theo mặc định, và sao lưu đích trước khi ghi: ## Antigravity Doctor Doctor kiểm tra discovery, MCP, hooks, orchestration, đóng gói plugin và mức sẵn sàng phát hành — chỉ đọc: {`[PASS] discovery [PASS] mcp [PASS] hooks [PASS] orchestration [PASS] plugin [PASS] validation [PASS] Antigravity contract is ready.`} ## Gói plugin Với đội muốn cài dạng đóng gói, trình build plugin tạo bundle plugin Antigravity cục bộ với inventory nội dung SHA-256 xác định: Mọi thứ trên trang này được kiểm chứng trong CI: Doctor, test hồi quy hook, và plugin inventory chạy trên mỗi lần push. --- ### Web Src App Docs Updates Content.En (`web/src/app/docs/updates/content.en.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, FeatureGrid, Feature } from '@/components/mdx' # Managed Updates & Rollback AG Kit installs `.agents/` as a **managed tree**: every kit file is tracked in a manifest with SHA-256 hashes, so updates know exactly what is yours and what is the kit's. ## How the managed tree works Files you add or modify are **not** kit-managed, so the default `merge` strategy preserves them. Only files whose hash matches the manifest are updated in place. ## Updating safely ```bash ag-kit update --dry-run ``` Shows adds, changes, preserved local files, and conflicts — without touching anything. ```bash ag-kit update ``` A backup is created first. Local changes are preserved; conflicting files are kept and incoming copies are stored under `.agents/.ag-kit/conflicts/` for review. Each run writes a report with the run ID, strategy, and per-file actions. Use `--conflict-report ` to write it to a custom path. Want a pristine upstream tree instead? Use `ag-kit update --strategy replace`. A backup is still created first. ## Rolling back {`? Restore backup 2026-07-26T16-03-21? (y/N) y Restored backup 2026-07-26T16-03-21 Pre-rollback backup: .agents/.ag-kit/backups/...`} - Defaults to the newest backup; pick one with `--backup `. - The current tree is backed up before restoring (disable with `--no-keep-current`). - Preview with `--dry-run`. Backups live inside your project under `.agents/.ag-kit/`. Deleting that folder removes your rollback points. --- ### Web Src App Docs Updates Content.Vi (`web/src/app/docs/updates/content.vi.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, FeatureGrid, Feature } from '@/components/mdx' # Cập nhật được quản lý & Rollback AG Kit cài `.agents/` dưới dạng **cây được quản lý**: mọi file của kit được theo dõi trong manifest với hash SHA-256, nên khi cập nhật hệ thống biết chính xác file nào của bạn, file nào của kit. ## Cây được quản lý hoạt động thế nào File bạn thêm hoặc sửa **không** thuộc quản lý của kit, nên chiến lược mặc định `merge` sẽ giữ nguyên chúng. Chỉ những file có hash khớp manifest mới được cập nhật. ## Cập nhật an toàn ```bash ag-kit update --dry-run ``` Hiển thị file thêm, thay đổi, file cục bộ được giữ, và xung đột — không đụng gì cả. ```bash ag-kit update ``` Bản sao lưu được tạo trước. Thay đổi cục bộ được giữ; file xung đột giữ nguyên và bản mới được lưu tại `.agents/.ag-kit/conflicts/` để xem xét. Mỗi lần chạy ghi báo cáo với run ID, chiến lược, và hành động từng file. Dùng `--conflict-report ` để ghi vào đường dẫn tùy chỉnh. Muốn cây gốc từ upstream? Dùng `ag-kit update --strategy replace`. Bản sao lưu vẫn được tạo trước. ## Rollback {`? Restore backup 2026-07-26T16-03-21? (y/N) y Restored backup 2026-07-26T16-03-21 Pre-rollback backup: .agents/.ag-kit/backups/...`} - Mặc định dùng bản sao lưu mới nhất; chọn bản khác với `--backup `. - Cây hiện tại được sao lưu trước khi khôi phục (tắt bằng `--no-keep-current`). - Xem trước với `--dry-run`. Bản sao lưu nằm trong dự án tại `.agents/.ag-kit/`. Xóa thư mục này sẽ mất các điểm rollback. --- ### Web Src App Docs Guide Examples Brainstorm Content.En (`web/src/app/docs/guide/examples/brainstorm/content.en.mdx`) 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. ## The Process Tell the agent what you want to explore. Be specific about constraints. ```bash /brainstorm authentication system for my SaaS app ``` The agent presents 3+ approaches with pros, cons, and effort levels. Choose an option, then use `/enhance` or `/create` to implement. ## Example Session /brainstorm state management for complex form **Exploring Options...**

Option A: React Hook Form + Zod

✅ Minimal re-renders, great DX

❌ Learning curve

📊 Effort: Low

Option B: Zustand

✅ Full control, persists across routes

❌ More boilerplate

📊 Effort: Medium

**💡 Recommendation: Option A** For 20+ fields, RHF minimizes re-renders. ## Pro Tips Mention constraints: "I need SSR support", "Must work offline". "Tell me more about Option B's scalability" before deciding. ## Next Steps - Try `/brainstorm` for your next architecture decision - After deciding, use [Add New Feature](/docs/guide/examples/new-feature) to implement --- ### Web Src App Docs Guide Examples Brainstorm Content.Ja (`web/src/app/docs/guide/examples/brainstorm/content.ja.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature } from '@/components/mdx' # 構造化ブレインストーミング `/brainstorm` ワークフローで、コードを書く前に複数のアプローチを検討しましょう。 ## 概要 `/brainstorm` コマンドは**構造化されたアイデア出しモード**を起動します。いきなりコードに飛びつくのではなく、エージェントが少なくとも 3 種類の異なるアプローチを検討し、それぞれの長所と短所を分析して、納得のいく意思決定を後押しします。 ## プロセス何を検討したいかをエージェントに伝えます。制約条件は具体的に。 ```bash /brainstorm authentication system for my SaaS app ``` エージェントが 3 つ以上のアプローチを、長所・短所・工数の目安とともに提示します。 1 つを選び、`/enhance` または `/create` で実装します。 ## セッション例 /brainstorm state management for complex form **選択肢を検討中……**

選択肢 A: React Hook Form + Zod

✅ 再レンダリングが最小限、開発体験が優秀

❌ 学習コストがある

📊 工数: 低

選択肢 B: Zustand

✅ 完全に制御可能、ルート間で状態を保持

❌ ボイラープレートが増える

📊 工数: 中

**💡 おすすめ: 選択肢 A** 20 個以上のフィールドなら、RHF は再レンダリングを最小限に抑えます。 ## 実践のヒント制約条件を明示しましょう。「SSR 対応が必要」「オフラインで動く必要がある」など。決める前に「選択肢 B のスケーラビリティについて詳しく教えて」と聞いてみましょう。 ## 次のステップ - 次のアーキテクチャ判断で `/brainstorm` を試してみましょう - 決めたら、[新機能の追加](/docs/guide/examples/new-feature)で実装しましょう --- ### Web Src App Docs Guide Examples Brainstorm Content.Vi (`web/src/app/docs/guide/examples/brainstorm/content.vi.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature } from '@/components/mdx' # Động não có cấu trúc Khám phá nhiều hướng tiếp cận trước khi viết code với quy trình `/brainstorm`. ## Tổng quan Lệnh `/brainstorm` kích hoạt một **chế độ phát ý tưởng có cấu trúc**. Thay vì lao thẳng vào code, tác tử khám phá ít nhất 3 hướng tiếp cận khác nhau, phân tích ưu nhược điểm và giúp bạn ra quyết định sáng suốt. ## Quy trình Cho tác tử biết bạn muốn khám phá gì. Hãy nêu rõ các ràng buộc. ```bash /brainstorm authentication system for my SaaS app ``` Tác tử trình bày 3+ hướng tiếp cận kèm ưu điểm, nhược điểm và mức công sức. Chọn một phương án, rồi dùng `/enhance` hoặc `/create` để triển khai. ## Phiên làm việc ví dụ /brainstorm state management for complex form **Đang khám phá các phương án...**

Phương án A: React Hook Form + Zod

✅ Ít re-render, DX tuyệt vời

❌ Có đường cong học tập

📊 Công sức: Thấp

Phương án B: Zustand

✅ Toàn quyền kiểm soát, giữ trạng thái qua các route

❌ Nhiều code khuôn mẫu hơn

📊 Công sức: Trung bình

**💡 Đề xuất: Phương án A** Với 20+ trường, RHF giảm thiểu re-render. ## Mẹo hay Nêu các ràng buộc: "Tôi cần hỗ trợ SSR", "Phải hoạt động ngoại tuyến". "Cho tôi biết thêm về khả năng mở rộng của Phương án B" trước khi quyết định. ## Bước tiếp theo - Thử `/brainstorm` cho quyết định kiến trúc tiếp theo của bạn - Sau khi quyết định, dùng [Thêm tính năng mới](/docs/guide/examples/new-feature) để triển khai --- ### Web Src App Docs Guide Examples Brainstorm Content.Zh (`web/src/app/docs/guide/examples/brainstorm/content.zh.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature } from '@/components/mdx' # 结构化头脑风暴使用 `/brainstorm` 工作流，在动手写代码之前先探索多种方案。 ## 概述 `/brainstorm` 命令会启动一种**结构化的构思模式**。与其直接动手写代码，智能体会探索至少 3 种不同的方案，分析各自的优缺点，帮助你做出明智的决策。 ## 流程告诉智能体你想探索什么。把约束条件说清楚。 ```bash /brainstorm authentication system for my SaaS app ``` 智能体会给出 3 个以上的方案，并附上优点、缺点和工作量评估。选定一个方案，然后用 `/enhance` 或 `/create` 来实现。 ## 示例会话 /brainstorm state management for complex form **正在探索方案……**

方案 A：React Hook Form + Zod

✅ 重渲染极少，开发体验出色

❌ 有一定学习曲线

📊 工作量：低

方案 B：Zustand

✅ 完全可控，跨路由保持状态

❌ 样板代码更多

📊 工作量：中

**💡 推荐：方案 A** 对于 20 个以上的字段，RHF 能把重渲染降到最低。 ## 实用技巧说明约束条件："我需要支持 SSR"、"必须能离线使用"。在决定之前，先问"详细讲讲方案 B 的可扩展性"。 ## 后续步骤 - 在你的下一个架构决策中试试 `/brainstorm` - 决定之后，用[添加新功能](/docs/guide/examples/new-feature)来实现 --- ### Web Src App Docs Guide Examples Create Content.En (`web/src/app/docs/guide/examples/create/content.en.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, StatusList, StatusItem } 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. **From idea to running app:** Just describe what you want, and the wizard handles tech stack, file structure, database schema, and implementation. ## The Process 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 ``` The `project-planner` agent creates a detailed plan. Approve to proceed. Specialist agents work in parallel: database-architect, backend, frontend. ## Example Session /create todo app with dark mode **Analyzing request...** Tech Stack: Next.js + Tailwind + Zustand Proceed? (Y/N) Y Creating store... Building components... **🚀 App Created!** Preview: http://localhost:3000 ## Pro Tips "E-commerce with Stripe" beats "online store". Create MVP first, use `/enhance` to iterate. ## Next Steps - Run `/create` followed by your app idea - Use [Add New Feature](/docs/guide/examples/new-feature) to extend --- ### Web Src App Docs Guide Examples Create Content.Ja (`web/src/app/docs/guide/examples/create/content.ja.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, StatusList, StatusItem } from '@/components/mdx' # 新しいアプリの作成 `/create` ウィザードで、完全なアプリケーションをゼロから構築しましょう。 ## 概要 `/create` コマンドはあなたの**アプリケーション作成ウィザード**です。対話形式のやり取りを通じて案内し、要件を理解し、アーキテクチャを計画して、各専門エージェントを編成しアプリを構築します。 **アイデアから動くアプリへ：** 作りたいものを説明するだけで、ウィザードが技術スタック、ファイル構成、データベーススキーマ、実装まで面倒を見ます。 ## プロセス何を作りたいかをウィザードに伝えます。必要に応じて確認の質問をします。 ```bash /create e-commerce site with product listing and cart ``` `project-planner` エージェントが詳細な計画を作成します。承認すると先へ進みます。専門エージェントが並行して作業します：database-architect、backend、frontend。 ## セッション例 /create todo app with dark mode **リクエストを分析中……** Tech Stack: Next.js + Tailwind + Zustand 続行しますか？(Y/N) Y store を作成中…… コンポーネントを構築中…… **🚀 アプリを作成しました！** Preview: http://localhost:3000 ## 実践のヒント「E-commerce with Stripe」は「online store」に勝ります。まず MVP を作り、`/enhance` で反復しましょう。 ## 次のステップ - `/create` の後にアプリのアイデアを続けて実行しましょう - [新機能の追加](/docs/guide/examples/new-feature)で拡張しましょう --- ### Web Src App Docs Guide Examples Create Content.Vi (`web/src/app/docs/guide/examples/create/content.vi.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, StatusList, StatusItem } from '@/components/mdx' # Tạo ứng dụng mới Xây dựng ứng dụng hoàn chỉnh từ đầu với trình hướng dẫn `/create`. ## Tổng quan Lệnh `/create` là **trình hướng dẫn tạo ứng dụng** của bạn. Nó dẫn dắt bạn qua một cuộc hội thoại tương tác, hiểu yêu cầu của bạn, lập kế hoạch kiến trúc và điều phối các tác tử chuyên biệt để dựng ứng dụng. **Từ ý tưởng đến ứng dụng chạy được:** Chỉ cần mô tả điều bạn muốn, trình hướng dẫn sẽ lo phần tech stack, cấu trúc file, lược đồ cơ sở dữ liệu và triển khai. ## Quy trình Cho trình hướng dẫn biết bạn muốn xây gì. Nó sẽ hỏi để làm rõ nếu cần. ```bash /create e-commerce site with product listing and cart ``` Tác tử `project-planner` tạo một kế hoạch chi tiết. Phê duyệt để tiếp tục. Các tác tử chuyên biệt làm việc song song: database-architect, backend, frontend. ## Phiên làm việc ví dụ /create todo app with dark mode **Đang phân tích yêu cầu...** Tech Stack: Next.js + Tailwind + Zustand Tiếp tục? (Y/N) Y Đang tạo store... Đang dựng component... **🚀 Đã tạo ứng dụng!** Preview: http://localhost:3000 ## Mẹo hay "E-commerce với Stripe" tốt hơn "cửa hàng trực tuyến". Tạo MVP trước, dùng `/enhance` để lặp. ## Bước tiếp theo - Chạy `/create` kèm theo ý tưởng ứng dụng của bạn - Dùng [Thêm tính năng mới](/docs/guide/examples/new-feature) để mở rộng --- ### Web Src App Docs Guide Examples Create Content.Zh (`web/src/app/docs/guide/examples/create/content.zh.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, StatusList, StatusItem } from '@/components/mdx' # 创建新应用使用 `/create` 向导从零构建完整的应用。 ## 概述 `/create` 命令是你的**应用创建向导**。它会通过一段交互式对话引导你，理解你的需求，规划架构，并编排各个专家智能体来构建你的应用。 **从想法到可运行的应用：** 只需描述你想要什么，向导会负责技术栈、文件结构、数据库模式和具体实现。 ## 流程告诉向导你想构建什么。如有需要，它会提出澄清性的问题。 ```bash /create e-commerce site with product listing and cart ``` `project-planner` 智能体会生成一份详细的计划。批准后即可继续。专家智能体并行工作：database-architect、backend、frontend。 ## 示例会话 /create todo app with dark mode **正在分析请求……** Tech Stack: Next.js + Tailwind + Zustand 继续？(Y/N) Y 正在创建 store…… 正在构建组件…… **🚀 应用已创建！** Preview: http://localhost:3000 ## 实用技巧 "E-commerce with Stripe" 胜过 "online store"。先创建 MVP，再用 `/enhance` 迭代。 ## 后续步骤 - 运行 `/create` 并附上你的应用想法 - 用[添加新功能](/docs/guide/examples/new-feature)来扩展 --- ### Web Src App Docs Guide Examples Debugging Content.En (`web/src/app/docs/guide/examples/debugging/content.en.mdx`) 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. - "The login button does nothing" - "API returns 500 error intermittently" - "App crashes on mobile only" ## The Process Gathers facts: Error logs, user reports, reproduction steps. ```bash /debug Login returns 403 even with correct credentials ``` Formulates potential causes prioritized by likelihood. Systematically tests each hypothesis using scripts or logs. Implements the fix and adds a regression test. ## Example Session /debug Form submission fails silently **Phase 1: Discovery** Reading `CheckoutForm.tsx`... Found `handleSubmit`. ERROR: Cannot read properties of undefined **Phase 2: Hypothesis**

1. `emailRef.current` is null on mount
2. Event handler not bound correctly

**Phase 4: Resolution** Fix applied: Added null check to `emailRef`. ✅ Test passed: Form submits successfully. ## Pro Tips Paste the exact error message or stack trace for faster discovery. Ask the agent to run the reproduction case again to confirm it's solved. ## Next Steps - Try `/debug` on an existing bug - See [Deployment](/docs/guide/examples/deployment) to ship your fix --- ### Web Src App Docs Guide Examples Debugging Content.Ja (`web/src/app/docs/guide/examples/debugging/content.ja.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip } from '@/components/mdx' # 体系的なデバッグ厳密な `/debug` ワークフローで、複雑な問題を解決しましょう。 ## 概要 `/debug` ワークフローは**4 段階の調査プロトコル**（発見、仮説、検証、解決）を徹底させます。コードを変更する前に証拠を求めることで、当て推量に頼った開発を防ぎます。 - 「ログインボタンを押しても何も起きない」 - 「API がときどき 500 エラーを返す」 - 「スマホでだけアプリがクラッシュする」 ## プロセス事実を集めます：エラーログ、ユーザー報告、再現手順。 ```bash /debug Login returns 403 even with correct credentials ``` 考えられる原因を、可能性の高い順に並べて立てます。スクリプトやログを使い、各仮説を体系的に検証します。修正を適用し、回帰テストを追加します。 ## セッション例 /debug Form submission fails silently **フェーズ 1：発見** `CheckoutForm.tsx` を読み込み中…… `handleSubmit` を発見。 ERROR: Cannot read properties of undefined **フェーズ 2：仮説**

1. `emailRef.current` が mount 時に null
2. イベントハンドラが正しくバインドされていない

**フェーズ 4：解決** 修正を適用：`emailRef` に null チェックを追加しました。 ✅ Test passed: Form submits successfully. ## 実践のヒント正確なエラーメッセージやスタックトレースを貼ると、発見フェーズが速くなります。エージェントに再現ケースをもう一度実行させ、本当に解決したか確認しましょう。 ## 次のステップ - 既存のバグで `/debug` を試してみましょう - 修正を出荷するには[デプロイ](/docs/guide/examples/deployment)を参照しましょう --- ### Web Src App Docs Guide Examples Debugging Content.Vi (`web/src/app/docs/guide/examples/debugging/content.vi.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip } from '@/components/mdx' # Gỡ lỗi có hệ thống Giải quyết các vấn đề phức tạp với quy trình `/debug` chặt chẽ. ## Tổng quan Quy trình `/debug` áp dụng một **giao thức điều tra 4 giai đoạn** (Khám phá, Giả thuyết, Kiểm chứng, Khắc phục). Nó ngăn lối phát triển dựa trên phỏng đoán bằng cách yêu cầu có bằng chứng trước khi thay đổi code. - "Nút đăng nhập không làm gì cả" - "API trả về lỗi 500 lúc được lúc không" - "Ứng dụng chỉ crash trên điện thoại" ## Quy trình Thu thập dữ kiện: log lỗi, báo cáo người dùng, các bước tái hiện. ```bash /debug Login returns 403 even with correct credentials ``` Đặt ra các nguyên nhân tiềm năng, sắp xếp theo khả năng xảy ra. Kiểm tra từng giả thuyết một cách có hệ thống bằng script hoặc log. Áp dụng bản sửa và thêm một test hồi quy. ## Phiên làm việc ví dụ /debug Form submission fails silently **Giai đoạn 1: Khám phá** Đang đọc `CheckoutForm.tsx`... Tìm thấy `handleSubmit`. ERROR: Cannot read properties of undefined **Giai đoạn 2: Giả thuyết**

1. `emailRef.current` là null khi mount
2. Trình xử lý sự kiện chưa được gắn đúng

**Giai đoạn 4: Khắc phục** Đã áp dụng bản sửa: Thêm kiểm tra null cho `emailRef`. ✅ Test passed: Form submits successfully. ## Mẹo hay Dán chính xác thông báo lỗi hoặc stack trace để khám phá nhanh hơn. Yêu cầu tác tử chạy lại trường hợp tái hiện để xác nhận đã xử lý xong. ## Bước tiếp theo - Thử `/debug` với một lỗi có sẵn - Xem [Triển khai](/docs/guide/examples/deployment) để phát hành bản sửa của bạn --- ### Web Src App Docs Guide Examples Debugging Content.Zh (`web/src/app/docs/guide/examples/debugging/content.zh.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip } from '@/components/mdx' # 系统化调试使用严谨的 `/debug` 工作流解决复杂问题。 ## 概述 `/debug` 工作流强制执行一套**四阶段调查协议**（发现、假设、验证、解决）。它要求在改动代码之前先拿出证据，从而避免靠猜测驱动的开发。 - "登录按钮点了没反应" - "API 时不时返回 500 错误" - "应用只在手机上崩溃" ## 流程收集事实：错误日志、用户反馈、复现步骤。 ```bash /debug Login returns 403 even with correct credentials ``` 提出可能的原因，并按可能性高低排序。用脚本或日志系统化地逐一检验每个假设。应用修复，并添加一个回归测试。 ## 示例会话 /debug Form submission fails silently **阶段 1：发现** 正在读取 `CheckoutForm.tsx`…… 找到了 `handleSubmit`。 ERROR: Cannot read properties of undefined **阶段 2：假设**

1. `emailRef.current` 在 mount 时为 null
2. 事件处理器绑定不正确

**阶段 4：解决** 已应用修复：为 `emailRef` 添加了 null 检查。 ✅ Test passed: Form submits successfully. ## 实用技巧粘贴确切的错误信息或堆栈跟踪，能让发现阶段更快。让智能体再次运行复现用例，以确认问题确实解决了。 ## 后续步骤 - 在一个现有的 bug 上试试 `/debug` - 查看[部署](/docs/guide/examples/deployment)以发布你的修复 --- ### Web Src App Docs Guide Examples Deployment Content.En (`web/src/app/docs/guide/examples/deployment/content.en.mdx`) 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. - Security vulnerabilities are found - Linting errors exist - TypeScript types are invalid - Critical tests fail ## The Process When your code is ready, trigger the deployment pipeline. ```bash /deploy ``` The agent automatically audits your project health.

🛡️ Security

Scans for vulnerabilities & secrets

📋 Quality

Enforces Linting & Type Safety

If checks pass, it builds and pushes to your platform (Vercel, Docker, etc). ## Example Session /deploy **Running Pre-Flight Checks...**

🔄 Security Scan... PASSED

🔄 Lint Check... PASSED

🔄 Type Validation... PASSED

✅ All checks passed! Deploying to Vercel... **🚀 Deployment Complete!**

🌐 URL: https://my-app.vercel.app

💚 Health Check: OK

## Pro Tips Run `/deploy check` to dry-run validations without deploying. Use `/deploy rollback` to instantly revert to the last stable version. ## Next Steps - Try `/deploy check` to run pre-flight checks - Learn about [Multi-Agent Orchestration](/docs/guide/examples/orchestration) --- ### Web Src App Docs Guide Examples Deployment Content.Ja (`web/src/app/docs/guide/examples/deployment/content.ja.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip } from '@/components/mdx' # 本番環境へのデプロイ安全第一の `/deploy` ワークフローで、自信を持ってリリースしましょう。 ## 概要 `/deploy` コマンドは**監査とリリースの指揮官**です。デプロイ前に、コードへ厳格なヘルスチェックを強制的に通過させます。 - セキュリティの脆弱性が見つかった - linting エラーがある - TypeScript の型が不正 - 重要なテストが失敗した ## プロセスコードの準備ができたら、デプロイパイプラインを起動します。 ```bash /deploy ``` エージェントがプロジェクトの健全性を自動で監査します。

🛡️ セキュリティ

脆弱性とシークレットをスキャン

📋 品質

Linting と型安全性を強制

チェックを通過すると、ビルドしてあなたのプラットフォーム（Vercel、Docker など）へプッシュします。 ## セッション例 /deploy **出発前チェックを実行中……**

🔄 セキュリティスキャン…… PASSED

🔄 Lint チェック…… PASSED

🔄 型の検証…… PASSED

✅ すべてのチェックを通過しました！ Vercel へデプロイ中…… **🚀 デプロイ完了！**

🌐 URL: https://my-app.vercel.app

💚 ヘルスチェック: OK

## 実践のヒント実際にはデプロイせず、`/deploy check` で検証をドライランしましょう。 `/deploy rollback` で、直前の安定版へ即座に戻せます。 ## 次のステップ - `/deploy check` を試して出発前チェックを実行しましょう - [マルチエージェントのオーケストレーション](/docs/guide/examples/orchestration)について学びましょう --- ### Web Src App Docs Guide Examples Deployment Content.Vi (`web/src/app/docs/guide/examples/deployment/content.vi.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip } from '@/components/mdx' # Triển khai production Phát hành tự tin với quy trình `/deploy` đặt an toàn lên hàng đầu. ## Tổng quan Lệnh `/deploy` là một **Nhạc trưởng Kiểm toán & Phát hành**. Nó buộc code của bạn phải vượt qua một kiểm tra sức khỏe nghiêm ngặt trước khi triển khai. - Phát hiện lỗ hổng bảo mật - Tồn tại lỗi linting - Kiểu TypeScript không hợp lệ - Test quan trọng thất bại ## Quy trình Khi code đã sẵn sàng, kích hoạt pipeline triển khai. ```bash /deploy ``` Tác tử tự động kiểm toán sức khỏe dự án của bạn.

🛡️ Bảo mật

Quét lỗ hổng & secret

📋 Chất lượng

Áp dụng Linting & An toàn kiểu

Nếu các kiểm tra vượt qua, nó build và đẩy lên nền tảng của bạn (Vercel, Docker, v.v). ## Phiên làm việc ví dụ /deploy **Đang chạy kiểm tra trước khi bay...**

🔄 Quét bảo mật... PASSED

🔄 Kiểm tra Lint... PASSED

🔄 Xác thực kiểu... PASSED

✅ Tất cả kiểm tra đã qua! Đang triển khai lên Vercel... **🚀 Triển khai hoàn tất!**

🌐 URL: https://my-app.vercel.app

💚 Kiểm tra sức khỏe: OK

## Mẹo hay Chạy `/deploy check` để chạy thử các xác thực mà không triển khai. Dùng `/deploy rollback` để lập tức quay về phiên bản ổn định gần nhất. ## Bước tiếp theo - Thử `/deploy check` để chạy các kiểm tra trước khi bay - Tìm hiểu về [Điều phối đa tác tử](/docs/guide/examples/orchestration) --- ### Web Src App Docs Guide Examples Deployment Content.Zh (`web/src/app/docs/guide/examples/deployment/content.zh.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip } from '@/components/mdx' # 生产环境部署使用安全优先的 `/deploy` 工作流，从容发布。 ## 概述 `/deploy` 命令是一位**审计与发布指挥官**。它会强制你的代码在部署前通过一轮严格的健康检查。 - 发现安全漏洞 - 存在 linting 错误 - TypeScript 类型不合法 - 关键测试失败 ## 流程当代码准备就绪时，触发部署流水线。 ```bash /deploy ``` 智能体会自动审计你的项目健康状况。

🛡️ 安全

扫描漏洞与密钥

📋 质量

强制 Linting 与类型安全

如果检查通过，它会构建并推送到你的平台（Vercel、Docker 等）。 ## 示例会话 /deploy **正在运行起飞前检查……**

🔄 安全扫描…… PASSED

🔄 Lint 检查…… PASSED

🔄 类型校验…… PASSED

✅ 所有检查均已通过！正在部署到 Vercel…… **🚀 部署完成！**

🌐 URL: https://my-app.vercel.app

💚 健康检查: OK

## 实用技巧运行 `/deploy check` 进行试运行校验，而不实际部署。使用 `/deploy rollback` 即刻回退到上一个稳定版本。 ## 后续步骤 - 试试 `/deploy check` 来运行起飞前检查 - 了解[多智能体编排](/docs/guide/examples/orchestration) --- ### Web Src App Docs Guide Examples New Feature Content.En (`web/src/app/docs/guide/examples/new-feature/content.en.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature, StatusList, StatusItem } 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. **Scenario:** Adding a "Dashboard Analytics" feature to an existing SaaS application. ## The Process 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 ``` Specialists implement the full vertical slice. Run `final checks` to validate bundle size, accessibility, and tests. ## Example Session /enhance add dark mode toggle **Analyzing codebase...**

Found: Tailwind CSS with no dark mode config
Plan: Update tailwind.config, add ThemeProvider, create toggle component

Creating ThemeToggle... Adding theme tests... **✅ Feature Added!** Run `/preview start` to test. ## Pro Tips Use `checklist.py` to prevent bundle bloat from new libraries. Isolate new components to minimize side effects on existing code. ## Next Steps - Try `/enhance` in your project - See [Test Generation](/docs/guide/examples/test) for coverage --- ### Web Src App Docs Guide Examples New Feature Content.Ja (`web/src/app/docs/guide/examples/new-feature/content.ja.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature, StatusList, StatusItem } from '@/components/mdx' # 新機能の追加 `/enhance` ワークフローで、既存のコードベースに複雑な機能を安全に追加する方法を学びましょう。 ## 概要 `/enhance` ワークフローは、日々の反復開発に使うツールです。ゼロから構築する `/create` とは違い、`/enhance` は既存コードを壊さずに、外科手術のように機能を追加することに集中します。 **シナリオ：** 既存の SaaS アプリに「ダッシュボード分析」機能を追加します。 ## プロセス機能の要件を明確に説明します。 ```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 ``` 専門エージェントが垂直スライス全体を実装します。 `final checks` を実行して、バンドルサイズ、アクセシビリティ、テストを検証します。 ## セッション例 /enhance add dark mode toggle **コードベースを分析中……**

発見：Tailwind CSS に dark mode の設定がありません
計画：tailwind.config を更新し、ThemeProvider を追加し、toggle コンポーネントを作成

ThemeToggle を作成中…… テーマのテストを追加中…… **✅ 機能を追加しました！** `/preview start` を実行してテストしましょう。 ## 実践のヒント `checklist.py` を使って、新しいライブラリによるバンドルの肥大化を防ぎましょう。新しいコンポーネントを隔離し、既存コードへの副作用を最小限に抑えましょう。 ## 次のステップ - あなたのプロジェクトで `/enhance` を試してみましょう - カバレッジについては[テスト生成](/docs/guide/examples/test)を参照しましょう --- ### Web Src App Docs Guide Examples New Feature Content.Vi (`web/src/app/docs/guide/examples/new-feature/content.vi.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature, StatusList, StatusItem } from '@/components/mdx' # Thêm tính năng mới Tìm hiểu cách thêm các tính năng phức tạp vào codebase có sẵn một cách an toàn với quy trình `/enhance`. ## Tổng quan Quy trình `/enhance` là công cụ hằng ngày cho việc phát triển lặp. Khác với `/create` (dựng từ đầu), `/enhance` tập trung thêm chức năng một cách phẫu thuật mà không phá vỡ code hiện có. **Tình huống:** Thêm tính năng "Dashboard Analytics" vào một ứng dụng SaaS có sẵn. ## Quy trình Mô tả yêu cầu tính năng của bạn thật rõ ràng. ```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 ``` Các chuyên gia triển khai trọn vẹn lát cắt dọc (vertical slice). Chạy `final checks` để xác thực kích thước bundle, khả năng truy cập và kiểm thử. ## Phiên làm việc ví dụ /enhance add dark mode toggle **Đang phân tích codebase...**

Phát hiện: Tailwind CSS chưa cấu hình dark mode
Kế hoạch: Cập nhật tailwind.config, thêm ThemeProvider, tạo component toggle

Đang tạo ThemeToggle... Đang thêm test cho theme... **✅ Đã thêm tính năng!** Chạy `/preview start` để kiểm thử. ## Mẹo hay Dùng `checklist.py` để tránh bundle phình to vì thư viện mới. Cô lập component mới để giảm thiểu ảnh hưởng phụ lên code hiện có. ## Bước tiếp theo - Thử `/enhance` trong dự án của bạn - Xem [Sinh kiểm thử](/docs/guide/examples/test) để biết về độ phủ --- ### Web Src App Docs Guide Examples New Feature Content.Zh (`web/src/app/docs/guide/examples/new-feature/content.zh.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature, StatusList, StatusItem } from '@/components/mdx' # 添加新功能学习如何使用 `/enhance` 工作流，安全地为现有代码库添加复杂功能。 ## 概述 `/enhance` 工作流是你日常迭代开发的工具。与从零构建的 `/create` 不同，`/enhance` 专注于像做手术一样精准地添加功能，而不破坏现有代码。 **场景：** 为一个现有的 SaaS 应用添加"仪表盘分析"功能。 ## 流程清晰地描述你的功能需求。 ```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 ``` 专家智能体会实现完整的垂直切片。运行 `final checks` 来校验打包体积、无障碍性和测试。 ## 示例会话 /enhance add dark mode toggle **正在分析代码库……**

发现：Tailwind CSS 尚未配置 dark mode
计划：更新 tailwind.config，添加 ThemeProvider，创建 toggle 组件

正在创建 ThemeToggle…… 正在添加主题测试…… **✅ 功能已添加！** 运行 `/preview start` 来测试。 ## 实用技巧使用 `checklist.py` 来防止新库导致打包体积膨胀。隔离新组件，把对现有代码的副作用降到最低。 ## 后续步骤 - 在你的项目中试试 `/enhance` - 查看[测试生成](/docs/guide/examples/test)以了解覆盖率 --- ### Web Src App Docs Guide Examples Orchestration Content.En (`web/src/app/docs/guide/examples/orchestration/content.en.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature, StatusList, StatusItem } 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. ## The Process 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 ``` The `project-planner` agent creates a detailed roadmap (`{task-slug}.md` in the project root).

...
### 2.1 Database Schema
- Users (id, email, role)
- Courses (id, title, price)
...

Agents work in parallel. The Orchestrator monitors progress and unblocks dependencies. ## Example Session /orchestrate Build E-commerce MVP **Activating Squad...** Assigning tasks based on the `{task-slug}.md` plan: Configuring Prisma Schema... Building ProductCard component... Reviewing auth flow... **✅ Project Complete!** All tasks finished. Run `npm run dev` to start. ## Pro Tips Don't try to build Facebook in one go. Orchestrate an MVP first, then use `/enhance` to iterate. Always specify how users log in (e.g., "Use NextAuth with GitHub"). It's a key architectural decision. ## 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 --- ### Web Src App Docs Guide Examples Orchestration Content.Ja (`web/src/app/docs/guide/examples/orchestration/content.ja.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature, StatusList, StatusItem } from '@/components/mdx' # マルチエージェントのオーケストレーション `/orchestrate` ワークフローで専門エージェントを連携させ、SaaS プラットフォーム全体を構築しましょう。 ## 概要ほとんどの AI とのやり取りは 1 対 1 です。`orchestrator` エージェントは**プロジェクトマネージャー**として振る舞うことで、これを変えます。大きなリクエスト（例：「SaaS の MVP を作る」）をタスクに分解し、その仕事に最適な専門家へ割り当てます。 ## プロセス高レベルの目標を説明します。orchestrator がヒアリングして要件を明確にします。 ```bash /orchestrate Build a "Course Platform" MVP with: - User Authentication (NextAuth) - Stripe Payments - Video Hosting (Mux) - Dashboard for Instructors ``` `project-planner` エージェントが詳細なロードマップ（プロジェクトルートの `{task-slug}.md`）を作成します。

...
### 2.1 Database Schema
- Users (id, email, role)
- Courses (id, title, price)
...

各エージェントが並行して作業します。Orchestrator は進捗を監視し、依存関係のブロックを解消します。 ## セッション例 /orchestrate Build E-commerce MVP **チームを起動中……** `{task-slug}.md` の計画に基づいてタスクを割り当て： Prisma Schema を設定中…… ProductCard コンポーネントを構築中…… 認証フローをレビュー中…… **✅ プロジェクト完了！** すべてのタスクが完了しました。`npm run dev` を実行して起動しましょう。 ## 実践のヒント一度に Facebook を作ろうとしないこと。まず MVP をオーケストレーションし、それから `/enhance` で反復しましょう。ユーザーがどうログインするかを必ず指定しましょう（例：「NextAuth と GitHub を使う」）。これは重要なアーキテクチャ上の判断です。 ## 次のステップ - 複雑なアプリを維持するために[体系的なデバッグ](/docs/guide/examples/debugging)について学びましょう - MVP を出荷するには[デプロイ](/docs/guide/examples/deployment)を参照しましょう --- ### Web Src App Docs Guide Examples Orchestration Content.Vi (`web/src/app/docs/guide/examples/orchestration/content.vi.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature, StatusList, StatusItem } from '@/components/mdx' # Điều phối đa tác tử Xây dựng cả nền tảng SaaS bằng cách điều phối các tác tử chuyên biệt với quy trình `/orchestrate`. ## Tổng quan Hầu hết tương tác với AI đều là 1-đối-1. Tác tử `orchestrator` thay đổi điều này bằng cách đóng vai trò **Quản lý dự án**. Nó phân rã một yêu cầu lớn (ví dụ "Xây dựng SaaS MVP") thành các tác vụ và giao cho chuyên gia phù hợp nhất với từng việc. ## Quy trình Mô tả mục tiêu tổng thể. Orchestrator sẽ phỏng vấn bạn để làm rõ yêu cầu. ```bash /orchestrate Build a "Course Platform" MVP with: - User Authentication (NextAuth) - Stripe Payments - Video Hosting (Mux) - Dashboard for Instructors ``` Tác tử `project-planner` tạo lộ trình chi tiết (`{task-slug}.md` ở thư mục gốc dự án).

...
### 2.1 Database Schema
- Users (id, email, role)
- Courses (id, title, price)
...

Các tác tử làm việc song song. Orchestrator theo dõi tiến độ và gỡ các phụ thuộc bị nghẽn. ## Phiên làm việc ví dụ /orchestrate Build E-commerce MVP **Đang kích hoạt đội ngũ...** Giao tác vụ dựa trên kế hoạch `{task-slug}.md`: Đang cấu hình Prisma Schema... Đang dựng component ProductCard... Đang rà soát luồng xác thực... **✅ Dự án hoàn tất!** Mọi tác vụ đã xong. Chạy `npm run dev` để bắt đầu. ## Mẹo hay Đừng cố xây Facebook trong một lần. Hãy điều phối một MVP trước, rồi dùng `/enhance` để lặp. Luôn nêu rõ người dùng đăng nhập thế nào (ví dụ "Dùng NextAuth với GitHub"). Đây là quyết định kiến trúc then chốt. ## Bước tiếp theo - Tìm hiểu [Gỡ lỗi có hệ thống](/docs/guide/examples/debugging) để duy trì ứng dụng phức tạp - Xem [Triển khai](/docs/guide/examples/deployment) để phát hành MVP của bạn --- ### Web Src App Docs Guide Examples Orchestration Content.Zh (`web/src/app/docs/guide/examples/orchestration/content.zh.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature, StatusList, StatusItem } from '@/components/mdx' # 多智能体编排使用 `/orchestrate` 工作流，通过协调多个专家智能体来构建整个 SaaS 平台。 ## 概述大多数 AI 交互都是一对一的。`orchestrator` 智能体改变了这一点，它扮演**项目经理**的角色。它会把一个庞大的需求（例如"构建一个 SaaS MVP"）拆解成多个任务，并分派给最擅长该任务的专家。 ## 流程描述高层目标。orchestrator 会通过提问来澄清需求。 ```bash /orchestrate Build a "Course Platform" MVP with: - User Authentication (NextAuth) - Stripe Payments - Video Hosting (Mux) - Dashboard for Instructors ``` `project-planner` 智能体会生成一份详细的路线图（项目根目录下的 `{task-slug}.md`）。

...
### 2.1 Database Schema
- Users (id, email, role)
- Courses (id, title, price)
...

各智能体并行工作。Orchestrator 监控进度并疏通被阻塞的依赖。 ## 示例会话 /orchestrate Build E-commerce MVP **正在激活小队……** 依据 `{task-slug}.md` 计划分派任务：正在配置 Prisma Schema…… 正在构建 ProductCard 组件…… 正在审查认证流程…… **✅ 项目完成！** 所有任务已完成。运行 `npm run dev` 即可启动。 ## 实用技巧别想着一口气造出一个 Facebook。先编排一个 MVP，再用 `/enhance` 迭代。务必说明用户如何登录（例如"使用 NextAuth 配合 GitHub"）。这是一项关键的架构决策。 ## 后续步骤 - 了解[系统化调试](/docs/guide/examples/debugging)，以维护你的复杂应用 - 查看[部署](/docs/guide/examples/deployment)以发布你的 MVP --- ### Web Src App Docs Guide Examples Plan Content.En (`web/src/app/docs/guide/examples/plan/content.en.mdx`) 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. **Critical Rule:** NO CODE is written during planning. Only the `{task-slug}.md` plan file (in the project root) is created. ## The Process Tell the planner what you want to build. ```bash /plan e-commerce site with cart and checkout ``` The planner asks clarifying questions before creating the plan. Creates `{task-slug}.md` in the project root with tasks and agent assignments. ## Example Session /plan SaaS dashboard with analytics **Clarifying Questions:**

1. What metrics? (users, revenue?)
2. Real-time or daily?
3. Charting library?

Users + revenue, real-time, Recharts **✅ Plan Created!** `saas-dashboard.md`
Run `/create` to implement. ## Pro Tips The more context you provide, the better the plan. Modify the generated plan before implementation. ## Next Steps - Run `/plan` for your next major feature - After planning, use [Create Application](/docs/guide/examples/create) to implement --- ### Web Src App Docs Guide Examples Plan Content.Ja (`web/src/app/docs/guide/examples/plan/content.ja.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip } from '@/components/mdx' # プロジェクトの計画 `/plan` ワークフローで、コードを書く前に詳細な実装計画を作成しましょう。 ## 概要 `/plan` コマンドは**計画専用モード**を起動します。 `project-planner` エージェントを使い、コードを一切書かずに詳細な計画ファイルを作成します。 **重要なルール：** 計画中はコードを一切書きません。作成されるのは `{task-slug}.md` 計画ファイル（プロジェクトルート内）だけです。 ## プロセス何を作りたいかを planner に伝えます。 ```bash /plan e-commerce site with cart and checkout ``` planner は計画を作成する前に、確認のための質問をします。プロジェクトルートに `{task-slug}.md` を作成し、各タスクとエージェントの割り当てを含めます。 ## セッション例 /plan SaaS dashboard with analytics **確認のための質問：**

1. どの指標が必要ですか？（ユーザー、収益？）
2. リアルタイムですか、それとも日次ですか？
3. チャートライブラリは？

Users + revenue, real-time, Recharts **✅ 計画を作成しました！** `saas-dashboard.md`
`/create` を実行して実装しましょう。 ## 実践のヒント提供するコンテキストが多いほど、計画はよくなります。実装の前に、生成された計画を修正しましょう。 ## 次のステップ - 次の大きな機能で `/plan` を実行しましょう - 計画の後は、[アプリの作成](/docs/guide/examples/create)で実装しましょう --- ### Web Src App Docs Guide Examples Plan Content.Vi (`web/src/app/docs/guide/examples/plan/content.vi.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip } from '@/components/mdx' # Lập kế hoạch dự án Tạo các kế hoạch triển khai chi tiết trước khi viết code với quy trình `/plan`. ## Tổng quan Lệnh `/plan` kích hoạt **chế độ chỉ lập kế hoạch**. Nó dùng tác tử `project-planner` để tạo một file kế hoạch chi tiết mà không viết bất kỳ dòng code nào. **Quy tắc then chốt:** KHÔNG viết CODE trong lúc lập kế hoạch. Chỉ tạo file kế hoạch `{task-slug}.md` (ở thư mục gốc dự án). ## Quy trình Cho planner biết bạn muốn xây gì. ```bash /plan e-commerce site with cart and checkout ``` Planner đặt các câu hỏi làm rõ trước khi tạo kế hoạch. Tạo `{task-slug}.md` ở thư mục gốc dự án kèm các tác vụ và phân công tác tử. ## Phiên làm việc ví dụ /plan SaaS dashboard with analytics **Câu hỏi làm rõ:**

1. Các chỉ số nào? (người dùng, doanh thu?)
2. Thời gian thực hay theo ngày?
3. Thư viện biểu đồ?

Users + revenue, real-time, Recharts **✅ Đã tạo kế hoạch!** `saas-dashboard.md`
Chạy `/create` để triển khai. ## Mẹo hay Bạn cung cấp càng nhiều ngữ cảnh, kế hoạch càng tốt. Sửa kế hoạch đã tạo trước khi triển khai. ## Bước tiếp theo - Chạy `/plan` cho tính năng lớn tiếp theo của bạn - Sau khi lập kế hoạch, dùng [Tạo ứng dụng](/docs/guide/examples/create) để triển khai --- ### Web Src App Docs Guide Examples Plan Content.Zh (`web/src/app/docs/guide/examples/plan/content.zh.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip } from '@/components/mdx' # 项目规划使用 `/plan` 工作流，在写代码之前先制定详细的实现计划。 ## 概述 `/plan` 命令会启动**仅规划模式**。它使用 `project-planner` 智能体创建一份详细的计划文件，而不写任何代码。 **关键规则：** 规划期间绝不写代码。只会创建 `{task-slug}.md` 计划文件（位于项目根目录）。 ## 流程告诉 planner 你想构建什么。 ```bash /plan e-commerce site with cart and checkout ``` planner 会在生成计划之前提出澄清性的问题。在项目根目录创建 `{task-slug}.md`，包含各项任务和智能体分工。 ## 示例会话 /plan SaaS dashboard with analytics **澄清性问题：**

1. 需要哪些指标？（用户、收入？）
2. 实时还是按天？
3. 用哪个图表库？

Users + revenue, real-time, Recharts **✅ 计划已创建！** `saas-dashboard.md`
运行 `/create` 来实现。 ## 实用技巧你提供的上下文越多，计划就越好。在实现之前修改生成好的计划。 ## 后续步骤 - 为你下一个重要功能运行 `/plan` - 规划之后，用[创建应用](/docs/guide/examples/create)来实现 --- ### Web Src App Docs Guide Examples Preview Content.En (`web/src/app/docs/guide/examples/preview/content.en.mdx`) 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. ## The Process ```bash /preview start ``` ```bash /preview ``` ```bash /preview stop ``` ## Example Session /preview start **🚀 Starting preview...**

Port: 3000
Type: Next.js

**✅ Preview ready!** URL: http://localhost:3000 ## Pro Tips Automatically detects Next.js, Vite, etc. Suggests alternatives if port 3000 is busy. ## Next Steps - Run `/preview start` to launch your dev server - See [Deployment](/docs/guide/examples/deployment) to go live --- ### Web Src App Docs Guide Examples Preview Content.Ja (`web/src/app/docs/guide/examples/preview/content.ja.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature } from '@/components/mdx' # プレビューの管理 `/preview` ワークフローで、ローカル開発サーバーを管理しましょう。 ## 概要 `/preview` コマンドはローカル開発サーバーを管理します。シンプルなコマンドで、起動、停止、再起動、状態の確認ができます。 ## プロセス ```bash /preview start ``` ```bash /preview ``` ```bash /preview stop ``` ## セッション例 /preview start **🚀 preview を起動中……**

ポート: 3000
タイプ: Next.js

**✅ Preview の準備ができました！** URL: http://localhost:3000 ## 実践のヒント Next.js、Vite などを自動で識別します。 3000 番ポートが使用中の場合は、代わりのポートを提案します。 ## 次のステップ - `/preview start` を実行して開発サーバーを起動しましょう - 公開するには[デプロイ](/docs/guide/examples/deployment)を参照しましょう --- ### Web Src App Docs Guide Examples Preview Content.Vi (`web/src/app/docs/guide/examples/preview/content.vi.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature } from '@/components/mdx' # Quản lý preview Quản lý máy chủ phát triển cục bộ của bạn với quy trình `/preview`. ## Tổng quan Lệnh `/preview` quản lý máy chủ phát triển cục bộ của bạn. Khởi động, dừng, khởi động lại hoặc kiểm tra trạng thái bằng các lệnh đơn giản. ## Quy trình ```bash /preview start ``` ```bash /preview ``` ```bash /preview stop ``` ## Phiên làm việc ví dụ /preview start **🚀 Đang khởi động preview...**

Cổng: 3000
Loại: Next.js

**✅ Preview sẵn sàng!** URL: http://localhost:3000 ## Mẹo hay Tự động nhận diện Next.js, Vite, v.v. Gợi ý phương án thay thế nếu cổng 3000 đang bận. ## Bước tiếp theo - Chạy `/preview start` để khởi động máy chủ phát triển của bạn - Xem [Triển khai](/docs/guide/examples/deployment) để đưa lên môi trường thật --- ### Web Src App Docs Guide Examples Preview Content.Zh (`web/src/app/docs/guide/examples/preview/content.zh.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature } from '@/components/mdx' # 预览管理使用 `/preview` 工作流管理你的本地开发服务器。 ## 概述 `/preview` 命令负责管理你的本地开发服务器。用简单的命令即可启动、停止、重启或查看状态。 ## 流程 ```bash /preview start ``` ```bash /preview ``` ```bash /preview stop ``` ## 示例会话 /preview start **🚀 正在启动 preview……**

端口: 3000
类型: Next.js

**✅ Preview 已就绪！** URL: http://localhost:3000 ## 实用技巧自动识别 Next.js、Vite 等。当 3000 端口被占用时，会建议替代端口。 ## 后续步骤 - 运行 `/preview start` 来启动你的开发服务器 - 查看[部署](/docs/guide/examples/deployment)以上线 --- ### Web Src App Docs Guide Examples Status Content.En (`web/src/app/docs/guide/examples/status/content.en.mdx`) 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. ## The Process Simply run the command to see your project dashboard. ```bash /status ``` ## Example Session /status

=== Project Status ===

📁 Project: my-ecommerce

🏷️ Type: nextjs-ecommerce

📄 Files: 73 created, 12 modified

=== Agent Status ===

✅ database-architect → Completed

✅ backend-specialist → Completed

🔄 frontend-specialist → 60%

=== Preview ===

🌐 URL: http://localhost:3000

💚 Health: OK

## Pro Tips Check status to ensure all agents completed. Monitor multi-agent orchestration in real-time. ## Next Steps - Run `/status` to check project state - See [Deployment](/docs/guide/examples/deployment) when ready to ship --- ### Web Src App Docs Guide Examples Status Content.Ja (`web/src/app/docs/guide/examples/status/content.ja.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature } from '@/components/mdx' # プロジェクトの状態 `/status` ワークフローで、プロジェクトの全体像を把握しましょう。 ## 概要 `/status` コマンドは、プロジェクトの**完全なダッシュボードビュー**を提供します。プロジェクト情報、技術スタック、完了した機能、エージェントの活動、プレビューの状態を確認できます。 ## プロセスコマンドを実行するだけで、プロジェクトのダッシュボードが表示されます。 ```bash /status ``` ## セッション例 /status

=== Project Status ===

📁 プロジェクト: my-ecommerce

🏷️ タイプ: nextjs-ecommerce

📄 ファイル: 73 件作成、12 件変更

=== Agent Status ===

✅ database-architect → 完了

✅ backend-specialist → 完了

🔄 frontend-specialist → 60%

=== Preview ===

🌐 URL: http://localhost:3000

💚 健康状態: OK

## 実践のヒント状態を確認し、すべてのエージェントが完了したことを確かめましょう。マルチエージェントのオーケストレーションをリアルタイムで監視しましょう。 ## 次のステップ - `/status` を実行してプロジェクトの状態を確認しましょう - 出荷の準備ができたら[デプロイ](/docs/guide/examples/deployment)を参照しましょう --- ### Web Src App Docs Guide Examples Status Content.Vi (`web/src/app/docs/guide/examples/status/content.vi.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature } from '@/components/mdx' # Trạng thái dự án Có cái nhìn tổng quan đầy đủ về dự án của bạn với quy trình `/status`. ## Tổng quan Lệnh `/status` cho bạn một **góc nhìn dashboard đầy đủ** về dự án. Xem thông tin dự án, tech stack, các tính năng đã xong, hoạt động của tác tử và trạng thái preview. ## Quy trình Chỉ cần chạy lệnh để xem dashboard dự án của bạn. ```bash /status ``` ## Phiên làm việc ví dụ /status

=== Project Status ===

📁 Dự án: my-ecommerce

🏷️ Loại: nextjs-ecommerce

📄 Tệp tin: 73 đã tạo, 12 đã sửa

=== Agent Status ===

✅ database-architect → Hoàn tất

✅ backend-specialist → Hoàn tất

🔄 frontend-specialist → 60%

=== Preview ===

🌐 URL: http://localhost:3000

💚 Sức khỏe: OK

## Mẹo hay Kiểm tra trạng thái để chắc chắn mọi tác tử đã hoàn tất. Giám sát điều phối đa tác tử theo thời gian thực. ## Bước tiếp theo - Chạy `/status` để kiểm tra trạng thái dự án - Xem [Triển khai](/docs/guide/examples/deployment) khi sẵn sàng phát hành --- ### Web Src App Docs Guide Examples Status Content.Zh (`web/src/app/docs/guide/examples/status/content.zh.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature } from '@/components/mdx' # 项目状态使用 `/status` 工作流，全面掌握你项目的整体情况。 ## 概述 `/status` 命令为你提供项目的**完整仪表盘视图**。查看项目信息、技术栈、已完成的功能、智能体活动以及预览状态。 ## 流程只需运行命令即可查看你的项目仪表盘。 ```bash /status ``` ## 示例会话 /status

=== Project Status ===

📁 项目: my-ecommerce

🏷️ 类型: nextjs-ecommerce

📄 文件: 已创建 73 个，已修改 12 个

=== Agent Status ===

✅ database-architect → 已完成

✅ backend-specialist → 已完成

🔄 frontend-specialist → 60%

=== Preview ===

🌐 URL: http://localhost:3000

💚 健康状况: OK

## 实用技巧查看状态，确保所有智能体都已完成。实时监控多智能体编排。 ## 后续步骤 - 运行 `/status` 来查看项目状态 - 准备好发布时，查看[部署](/docs/guide/examples/deployment) --- ### Web Src App Docs Guide Examples Test Content.En (`web/src/app/docs/guide/examples/test/content.en.mdx`) 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. ## The Process ```bash /test ``` ```bash /test src/auth.ts ``` ```bash /test coverage ``` ## Example Session /test src/services/auth.ts **Analyzing auth.ts...**

Found 4 functions: login, register, verifyToken, resetPassword

**✅ Tests Generated!**

Created: `tests/auth.test.ts`
Test cases: 12
Coverage: 95%

## Pro Tips Focus on what functions do, not implementation. Always test errors, empty inputs, boundaries. ## Next Steps - Run `/test` to execute your test suite - See [Deployment](/docs/guide/examples/deployment) which runs tests automatically --- ### Web Src App Docs Guide Examples Test Content.Ja (`web/src/app/docs/guide/examples/test/content.ja.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature } from '@/components/mdx' # テストの生成と実行 `/test` ワークフローで、テストを生成して実行しましょう。 ## 概要 `/test` コマンドは**テストの生成と実行**を担います。コードを分析し、テストスイートを作成し、テストを実行したり、カバレッジを確認したりします。 ## プロセス ```bash /test ``` ```bash /test src/auth.ts ``` ```bash /test coverage ``` ## セッション例 /test src/services/auth.ts **auth.ts を分析中……**

4 つの関数を発見：login、register、verifyToken、resetPassword

**✅ テストを生成しました！**

作成: `tests/auth.test.ts`
テストケース: 12
カバレッジ: 95%

## 実践のヒント実装ではなく、関数が何をするかに注目しましょう。エラー、空の入力、境界を常にテストしましょう。 ## 次のステップ - `/test` を実行してテストスイートを動かしましょう - テストを自動で実行する[デプロイ](/docs/guide/examples/deployment)を参照しましょう --- ### Web Src App Docs Guide Examples Test Content.Vi (`web/src/app/docs/guide/examples/test/content.vi.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature } from '@/components/mdx' # Sinh và chạy kiểm thử Sinh và chạy test với quy trình `/test`. ## Tổng quan Lệnh `/test` lo việc **sinh và chạy kiểm thử**. Phân tích code, tạo bộ test, chạy test hoặc kiểm tra độ phủ. ## Quy trình ```bash /test ``` ```bash /test src/auth.ts ``` ```bash /test coverage ``` ## Phiên làm việc ví dụ /test src/services/auth.ts **Đang phân tích auth.ts...**

Tìm thấy 4 hàm: login, register, verifyToken, resetPassword

**✅ Đã sinh test!**

Đã tạo: `tests/auth.test.ts`
Số ca kiểm thử: 12
Độ phủ: 95%

## Mẹo hay Tập trung vào việc hàm làm gì, không phải cách triển khai. Luôn kiểm thử lỗi, đầu vào rỗng, các giới hạn. ## Bước tiếp theo - Chạy `/test` để thực thi bộ kiểm thử của bạn - Xem [Triển khai](/docs/guide/examples/deployment) vốn tự động chạy test --- ### Web Src App Docs Guide Examples Test Content.Zh (`web/src/app/docs/guide/examples/test/content.zh.mdx`) import { Callout, StepList, Step, Terminal, TerminalLine, TerminalBlock, ProTips, Tip, FeatureGrid, Feature } from '@/components/mdx' # 测试生成与执行使用 `/test` 工作流生成并运行测试。 ## 概述 `/test` 命令负责**测试的生成与执行**。分析代码、创建测试套件、运行测试或检查覆盖率。 ## 流程 ```bash /test ``` ```bash /test src/auth.ts ``` ```bash /test coverage ``` ## 示例会话 /test src/services/auth.ts **正在分析 auth.ts……**

找到 4 个函数：login、register、verifyToken、resetPassword

**✅ 测试已生成！**

已创建: `tests/auth.test.ts`
测试用例: 12
覆盖率: 95%

## 实用技巧关注函数做什么，而非它如何实现。始终测试错误、空输入和各种边界。 ## 后续步骤 - 运行 `/test` 来执行你的测试套件 - 查看[部署](/docs/guide/examples/deployment)，它会自动运行测试 --- --- METRICS --- - Files Extracted: 50 - Estimated Token Budget: ~32462 tokens - Canonical Reference: https://codewiki.google/github.com/vudovn/antigravity-kit