with one click
app-builder
主要應用程式建構協調器。從自然語言請求建立全端應用。判定專案類型、選擇技術堆疊、協調代理。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Menu
主要應用程式建構協調器。從自然語言請求建立全端應用。判定專案類型、選擇技術堆疊、協調代理。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
使用 Claude API / Anthropic SDK 建構、除錯和最佳化應用程式。使用此技能建構的應用程式應包含提示快取 (prompt caching)。也處理在 Claude 模型版本之間遷移現有 Claude API 程式碼(4.5 → 4.6,4.6 → 4.7,替換已退役模型)。觸發時機:程式碼匯入 anthropic/@anthropic-ai/sdk;使用者要求使用 Claude API、Anthropic SDKs 或 Managed Agents (/v1/agents, /v1/sessions, /v1/environments);使用者在檔案中新增/修改/調整 Claude 功能(快取、思考、壓縮、工具使用、批次、檔案、引用、記憶)或模型(Opus/Sonnet/Haiku);關於 Anthropic SDK 專案中提示快取/快取命中率的問題。不觸發:檔案匯入 `openai`/其他提供者 SDK,檔案名稱類似 `*-openai.py`/`*-generic.py`,與提供者無關的程式碼,一般程式設計/機器學習。
當編寫呼叫 Gemini API 的程式碼時請使用此技能,用於文字生成、多輪對話、多模態理解、影像生成、串流回應、背景研究任務、函式呼叫、結構化輸出,或從舊的 generateContent API 遷移。此技能涵蓋 Interactions API,這是在 Python 與 TypeScript 中使用 Gemini 模型與代理的建議方式。
Tailwind CSS v4 原則。CSS 優先配置、容器查詢、現代模式、設計 token 架構。
處理使用 Gemini Live API 的即時、雙向串流應用程式時使用此技能。涵蓋基於 WebSocket 的音訊/視訊/文字串流、語音活動偵測 (VAD)、原生音訊功能、函式呼叫、會話管理、用戶端身分驗證的臨時權杖,以及所有 Live API 設定選項。涵蓋的 SDK - google-genai (Python)、@google/genai (JavaScript/TypeScript)。
Python 開發原則與決策。框架選擇、非同步模式、型別提示、專案結構。教你思考而非複製。
自動代理選擇與智慧任務路由。分析使用者請求並自動選擇最佳專家代理,無需使用者明確提及。
| name | app-builder |
| description | 主要應用程式建構協調器。從自然語言請求建立全端應用。判定專案類型、選擇技術堆疊、協調代理。 |
| allowed-tools | Read, Write, Edit, Glob, Grep, Bash, Agent |
分析使用者的請求、決定技術堆疊、規劃結構並協調代理。
僅閱讀與請求相關的檔案! 查看內容地圖,找到你需要的。
| 檔案 | 描述 | 何時閱讀 |
|---|---|---|
project-detection.md | 關鍵字矩陣、專案類型偵測 | 開始新專案 |
tech-stack.md | 2026 預設堆疊、替代方案 | 選擇技術 |
agent-coordination.md | 代理管線、執行順序 | 協調多代理工作 |
scaffolding.md | 目錄結構、核心檔案 | 建立專案結構 |
feature-building.md | 功能分析、錯誤處理 | 為現有專案新增功能 |
templates/SKILL.md | 專案範本 | 搭建新專案骨架 |
新專案的快速啟動骨架。僅閱讀匹配的範本!
| 範本 | 技術堆疊 | 適用時機 |
|---|---|---|
| nextjs-fullstack | Next.js + Prisma | 全端 Web 應用 |
| nextjs-saas | Next.js + Stripe | SaaS 產品 |
| nextjs-static | Next.js + Framer | 著陸頁 |
| nuxt-app | Nuxt 3 + Pinia | Vue 全端應用 |
| express-api | Express + JWT | REST API |
| python-fastapi | FastAPI | Python API |
| react-native-app | Expo + Zustand | 行動應用 |
| flutter-app | Flutter + Riverpod | 跨平台行動 |
| electron-desktop | Electron + React | 桌面應用 |
| chrome-extension | Chrome MV3 | 瀏覽器擴充 |
| cli-tool | Node.js + Commander | CLI 應用 |
| monorepo-turborepo | Turborepo + pnpm | Monorepo |
| 代理 | 角色 |
|---|---|
project-planner | 任務分解、依賴圖 |
frontend-specialist | UI 元件、頁面 |
backend-specialist | API、業務邏輯 |
database-architect | Schema、遷移 |
devops-engineer | 部署、預覽 |
使用者:「做一個有照片分享和按讚的 Instagram 複製品」
App Builder 流程:
1. 專案類型:社群媒體應用
2. 技術堆疊:Next.js + Prisma + Cloudinary + Clerk
3. 建立計畫:
├─ 資料庫 schema(users、posts、likes、follows)
├─ API 路由(12 個端點)
├─ 頁面(feed、profile、upload)
└─ 元件(PostCard、Feed、LikeButton)
4. 協調代理
5. 報告進度
6. 啟動預覽