메뉴
完整的網站開發指南，涵蓋 UI/UX 設計、React/Vue/Next.js 前端框架、Laravel/Node.js 後端、Coding Style 與互動式選擇精靈
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
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 暴衝
SOC 직업 분류 기준
| 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 題）