Menu
完整的網站開發指南，涵蓋 UI/UX 設計、React/Vue/Next.js 前端框架、Laravel/Node.js 後端、Coding Style 與互動式選擇精靈
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
| id | webdev_skills |
| name | webdev_skills |
| description | 完整的網站開發指南，涵蓋 UI/UX 設計、React/Vue/Next.js 前端框架、Laravel/Node.js 後端、Coding Style 與互動式選擇精靈 |
適用於任何 AI 工具的完整網站開發指南
📂 路徑說明： 本文件中所有路徑皆相對於此 SKILL.md 所在目錄。讀取子檔案時，請以此目錄為基準解析路徑。每個 Phase 僅讀取當前需要的檔案（最多 3 個），避免一次載入過多內容。
🎯 載入路徑表（Token 優化）： 任務 → 最小檔案集對照請見 _shared/load-paths.md。不要為了「以防萬一」全載資料夾。優先級制度與通用反模式分別見 _shared/priority-legend.md 與 _shared/anti-patterns.md。
啟動指令：
幫我建立一個網站
AI 行為： 收到此指令後，將自動啟動下方的 標準作業程序 (SOP)。
➡️ 詳細工作流程參考
所有設計必須遵守 去 AI 感設計指南：
觸發條件： 僅在用戶明確要求「建立網站」、「Build Website」、「新專案」或類似建立全新網站的意圖時，才執行完整 SOP Phase 1-4。對於局部修改（如修改元件、調整樣式、修 Bug 等），直接應用相關設計原則即可，不需執行完整流程。
互動協議 (Protocol)： 當觸發完整 SOP 時，建議遵守以下執行順序。
💡 建議: 在寫任何 Code 之前，先完成此步驟以確保設計決策正確。
logic/reasoning.md 的規則。🛑 Constraint: 必須建立單一真理來源 (Source of Truth)。
logic/design-system-gen.md。styles/design-system/MASTER.md。npx create-next-app).tailwind.config.js) 連結至 MASTER.md 的變數。tpl/page/SKILL.md 的結構進行開發。ui/no-ai-feel.md 對照，確保設計「有人味」。如果你希望能逐一步驟微調，或需要更細粒度的控制，可以使用互動精靈：
| 精靈 | 說明 | 指令 |
|---|---|---|
| 🔧 技術棧精靈 | 選擇前後端框架 | 幫我選擇技術棧 |
| 🎨 風格精靈 | 選擇設計風格 | 幫我選擇設計風格 |
| 📝 Coding Style 精靈 | 選擇程式碼規範 | 幫我選擇 coding style |
告訴我你的需求，例如：
用 React + Tailwind 建立一個電商網站用 Laravel 建立 REST API| 類別 | 內容 |
|---|---|
| 推理引擎 | 設計決策、反模式過濾 |
| 設計系統生成 | Master/Page 覆寫機制 |
| 類別 | 內容 |
|---|---|
| UI 設計 | 色彩、排版、間距、55+ 設計風格 |
| 響應式設計 | 斷點、行動優先、多裝置適配 |
| 類別 | 內容 |
|---|---|
| 前端框架 | React、Vue、Next.js、Nuxt.js、Vanilla |
| CSS 架構 | Tailwind、Bootstrap、SCSS、Vanilla |
| 類別 | 內容 |
|---|---|
| 後端框架 | Laravel、Node.js、Django、FastAPI |
| API 設計 | REST、GraphQL、版本控制 |
| 資料庫 | Schema 設計、ORM、遷移 |
| 安全性 | 驗證、授權、安全檢查清單 |
| 類別 | 內容 |
|---|---|
| 效能 / Core Web Vitals | LCP/INP/CLS、Lighthouse、Bundle |
| 測試體系 | Playwright、Vitest、視覺回歸、axe-core |
| 技術 SEO | Meta/OG、JSON-LD、sitemap、canonical |
| 元件組合模式 | Compound、asChild、Headless |
| 多語系 i18n | next-intl、vue-i18n、react-intl |
| 部署 / DevOps | Vercel、Netlify、Docker、GitHub Actions |
| 可觀測性 | Sentry、Web Vitals RUM、結構化 logging |
| 類別 | 內容 |
|---|---|
| 狀態管理 | Zustand、TanStack Query、Redux Toolkit、Pinia |
| 表單體系 | RHF + Zod、TanStack Form、server actions、檔案上傳 |
| 認證授權 | Auth.js、Clerk、JWT/Cookie、RBAC/ABAC |
| 動畫 | Framer Motion、GSAP、View Transitions |
| 類別 | 內容 |
|---|---|
| 開發流程 | Git、測試、部署、效能優化 |
| 檢查清單 | 上線、Lighthouse、a11y、SEO、安全審計 |
| Coding Style | JS、TS、PHP、Python、CSS 規範 |
| 類別 | 內容 |
|---|---|
| 元件模板 | 按鈕、表單、卡片、導航、Modal |
| 頁面模板 | Landing、Dashboard、認證頁 |
開始新專案前，建議先建立需求規格書：
➡️ 需求規格書模板
不同的 AI 編程助手載入方式不同：
| AI 工具 | 載入方式 |
|---|---|
| Cursor | @.agent/skills/webdev/SKILL.md |
| Windsurf | @.agent/skills/webdev/SKILL.md |
| Copilot | #file:.agent/skills/webdev/SKILL.md |
| Claude | Projects 上傳或貼上內容 |
| ChatGPT | 建立 GPT 或貼上內容 |
➡️ 完整 AI 工具使用指南
本 Skill 庫為「整合包」，若要加深特定能力，可額外安裝下列業界可信 Skills：
| Skill | 來源 | 補強能力 |
|---|---|---|
frontend-design | Anthropic 官方 | 設計理念與大膽美學承諾 |
webapp-testing / playwright | Anthropic 官方 | E2E 自動化（與本庫 test/ 互補） |
vercel-labs/react-best-practices | Vercel | 57 條效能規則（與 fe/react-rules.critical.md 互補） |
vercel-labs/web-design-guidelines | Vercel | 100+ a11y/UX 稽核 |
addyosmani/web-quality-skills | Addy Osmani | Lighthouse + CWV 自動化 |
bitjaru/styleseed | 社群 | shadcn 品牌 token 預設（Toss/Stripe/Linear/...） |
安裝方式參考各官方 repo。本庫已透過載入路徑表確保不會與這些 Skills 重複觸發。
workflows/build-website.md 升級為 15 階段（含測試、效能、SEO、部署、監控）wizard/tech.md 升級為 15 題（新增測試、部署、效能目標 3 題）Web 動畫（Framer Motion、GSAP、View Transitions API、Lottie）。CSS 動畫見 ui/no-ai-feel.md
REST API 與 GraphQL 設計規範指南
認證授權（Auth.js、Clerk、JWT/Cookie 安全、RBAC/ABAC）。不含 OAuth provider 細節
Laravel、Node.js、Django、FastAPI 後端框架指南
JavaScript、TypeScript、PHP、Python、CSS 代碼規範
元件組合模式（Compound Component、Slot Props、Headless UI）。取代 boolean prop 暴衝