webdev-skills

完整的網站開發指南，涵蓋 UI/UX 設計、React/Vue/Next.js 前端框架、Laravel/Node.js 後端、Coding Style 與互動式選擇精靈

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 暴衝

Tailwind、Bootstrap、SCSS、Vanilla CSS 方案指南

Schema 設計、ORM 與 Migration 指南

Web 部署（Vercel、Netlify、Docker、GitHub Actions CI）

React、Vue、Next.js、Nuxt.js、Vanilla JS 前端框架指南

Git、Testing、Deploy 與效能優化指南

表單體系（React Hook Form + Zod、TanStack Form、server actions、檔案上傳）

Web 多語系（next-intl、vue-i18n、react-intl）；含路由策略、SEO hreflang、訊息結構

設計推理與生成邏輯（reasoning + design-system-gen）路由表

Web 可觀測性（Sentry 錯誤追蹤、web-vitals RUM、結構化 logging）

Web 效能與 Core Web Vitals 優化（LCP/INP/CLS、Lighthouse、bundle）。不含一般框架寫法

斷點、Mobile-First 與多裝置適配指南

驗證、授權與 OWASP 安全檢查清單

技術 SEO（meta、OG、JSON-LD schema、sitemap、robots、canonical）。不含內容/關鍵字研究

狀態管理選型（Zustand / TanStack Query / Pinia / Redux Toolkit）。不含資料層 ORM

Web 測試體系（Playwright E2E、Vitest 單元、視覺回歸、axe-core a11y）。不含後端單元測試

Button、Form、Card、Nav、Modal 等 UI 元件模板

Landing、Dashboard、Auth 等頁面佈局模板

色彩、排版、間距、Accessibility 與 55+ 設計風格指南

透過問答引導選擇技術棧、設計風格和 Coding Style