使用現代 React、Tailwind CSS 和 shadcn/ui 建立生產級前端介面。五種模式：鷹架專案、建立元件、配置主題和設計令牌、重構樣式和審核程式碼庫。編碼 React 19 伺服器元件（依賴框架）、TailwindCSS v4 CSS-first 配置、帶有 Radix 原語的 shadcn/ui、現代 CSS（容器查詢、:has()、視圖轉換、滾動驅動動畫）、Monaspace 排版和 Vite 6 的最佳實踐。取代前端設計技能。在建置、樣式化、主題化或改進任何前端專案時使用。不適用於後端 API、資料庫設計、DevOps、測試框架、狀態管理庫、路由或完整的 SSR 框架設定。
透過命令列快速安裝 frontend-designer AI 技能到你的開發環境
來源：wyattowalsh/agents。
Build production-grade frontend interfaces with modern React, TailwindCSS v4, and shadcn/ui. Five modes from project scaffolding to codebase audit.
Input: $ARGUMENTS — mode keyword + target, natural language UI description, or file path.
| server component | React component rendered on the server; default in Next.js/Remix App Router | "SSR component" | | client component | React component with "use client" directive; runs in the browser | "CSR component" | | design token | CSS custom property holding a design decision (color, spacing, font) | "CSS variable" (too generic) |
使用現代 React、Tailwind CSS 和 shadcn/ui 建立生產級前端介面。五種模式：鷹架專案、建立元件、配置主題和設計令牌、重構樣式和審核程式碼庫。編碼 React 19 伺服器元件（依賴框架）、TailwindCSS v4 CSS-first 配置、帶有 Radix 原語的 shadcn/ui、現代 CSS（容器查詢、:has()、視圖轉換、滾動驅動動畫）、Monaspace 排版和 Vite 6 的最佳實踐。取代前端設計技能。在建置、樣式化、主題化或改進任何前端專案時使用。不適用於後端 API、資料庫設計、DevOps、測試框架、狀態管理庫、路由或完整的 SSR 框架設定。 來源：wyattowalsh/agents。
為搜尋與 AI 引用準備的穩定欄位與指令。
npx skills add https://github.com/wyattowalsh/agents --skill frontend-designer使用現代 React、Tailwind CSS 和 shadcn/ui 建立生產級前端介面。五種模式：鷹架專案、建立元件、配置主題和設計令牌、重構樣式和審核程式碼庫。編碼 React 19 伺服器元件（依賴框架）、TailwindCSS v4 CSS-first 配置、帶有 Radix 原語的 shadcn/ui、現代 CSS（容器查詢、:has()、視圖轉換、滾動驅動動畫）、Monaspace 排版和 Vite 6 的最佳實踐。取代前端設計技能。在建置、樣式化、主題化或改進任何前端專案時使用。不適用於後端 API、資料庫設計、DevOps、測試框架、狀態管理庫、路由或完整的 SSR 框架設定。 來源：wyattowalsh/agents。
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/wyattowalsh/agents --skill frontend-designer 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
https://github.com/wyattowalsh/agents