網站設計
前端介面建立、Landing Page、設計審查
4 個
frontend-design
輸入：
/frontend-design 或直接描述需求建立高品質前端介面，風格獨特有設計感，避免 AI 制式感。適用於網頁、元件、Dashboard、React、HTML/CSS 等。Claude 會先定義設計方向再產出程式碼。
幫我建一個網頁
建立元件
設計這個 UI
React 頁面
美化介面
landing-page-design
輸入：
/landing-page-designLanding Page 轉換率優化專家。包含 Hero 區塊公式、CTA 心理學、社會證明擺放位置、F 型閱讀動線、行動版設計。適用 SaaS 行銷頁、產品頁。
Landing Page
Hero 區塊
轉換率優化
CTA 按鈕
行銷頁面
web-design-reviewer
輸入：
/web-design-reviewer + 網址或本地路徑視覺化審查網站設計，自動截圖並找出問題（RWD 破版、視覺不一致、版面錯誤），然後直接修改原始碼。適合本地或線上網站。
審查網站設計
檢查 UI
修復版面
有 RWD 嗎
找設計問題
web-design-guidelines
輸入：
/web-design-guidelines + 檔案路徑依據 Vercel Web Interface Guidelines 審查 UI 程式碼，檢查無障礙（accessibility）、UX 最佳實踐、設計規範符合程度，輸出 file:line 格式問題清單。
審查 UI
檢查無障礙
設計稽核
符合最佳實踐嗎
Figma
設計檔操作、設計系統、程式碼連結
6 個
figma-use
⚠️ 所有 Figma 操作必須先載入此 skill
所有 Figma 寫入/特殊讀取操作的必要前置。包含 Plugin API 規則（return 語法、顏色範圍 0-1、字型載入、Page 切換等）。絕對不可跳過，否則會出現難以除錯的錯誤。
建立 Figma 節點
編輯 Figma 元件
設定變數
修改 Auto Layout
figma-implement-design
輸入：
/figma-implement-design + Figma URL將 Figma 設計轉成 1:1 像素精準的程式碼。需提供 Figma URL（含 node-id）。適合把 Figma 設計稿轉成 React、HTML/CSS 等正式程式碼。
實作這個設計
把 Figma 轉成程式碼
implement design
產出元件
figma-generate-design
輸入：
/figma-generate-design + 描述或程式碼把程式碼或描述推送到 Figma，建立完整頁面/畫面。會先從設計系統找元件和 Token，再逐段組裝，不使用 hardcode 數值。需搭配 figma-use。
寫到 Figma
在 Figma 建立畫面
把這個頁面推到 Figma
建 Landing Page 在 Figma
figma-generate-library
輸入：
/figma-generate-library從程式碼建立或更新完整 Figma 設計系統，包含 Token/變數、元件庫、深色/淺色主題、Foundation 文件。需多次 use_figma 呼叫（20-100+ 次），分階段執行。
建立設計系統
建元件庫
設定主題
建 Token
figma-code-connect-components
輸入：
/figma-code-connect-components + Figma URL建立 Figma 元件與程式碼元件的對應（Code Connect）。需 Organization 或 Enterprise 方案，元件須已發佈至 Team Library。
code connect
連結元件到程式碼
建立 mapping
figma-create-design-system-rules
輸入：
/figma-create-design-system-rules為你的專案自動產生設計系統規則（寫入 CLAUDE.md / AGENTS.md），讓 AI 之後產生程式碼時自動遵循你的命名規範、元件結構、Token 使用方式。
建立設計規則
設定設計規範
幫我建 CLAUDE.md
SEO
搜尋引擎優化、排名提升
1 個
seo
輸入：
/seo + 網頁路徑依 Lighthouse SEO 稽核與 Google Search 指南優化。涵蓋技術 SEO（crawlability、canonical、sitemap）和頁面 SEO（meta、結構化資料、標題層級）。
改善 SEO
優化搜尋排名
修 meta tags
加 structured data
sitemap 優化
瀏覽器自動化
操控網站、截圖、填表單、爬資料
1 個
agent-browser
內建工具，直接說「幫我截圖」「開啟網站」即觸發
用 Chrome/Chromium 自動化操作網站。支援：截圖、填表單、點擊、選取、上傳、下載、爬取資料、測試功能、登入等。使用 snapshot (-i) 取得元素 ref，再用 ref 互動。
開啟這個網站
幫我截圖
填這個表單
點擊按鈕
爬取資料
測試網站
開發工具
Claude API、排程、自動化、設定
6 個
claude-api
程式碼有
import anthropic 時自動觸發用 Anthropic SDK / Claude API 建立 AI 應用程式。處理 API 呼叫、工具使用（tool use）、Agent SDK 整合等。當程式碼引用 anthropic 套件時自動啟用。
用 Claude API
建 AI 功能
Anthropic SDK
tool use
simplify
輸入：
/simplify審查剛寫好的程式碼，找出可重用、品質或效率問題並修正。適合在完成一段功能後用來清理/優化程式碼品質。
優化程式碼
重構
提升程式碼品質
有沒有更好的寫法
update-config
輸入：
/update-config修改 Claude Code 的 settings.json，設定自動化行為（hooks）、新增權限、設定環境變數。「之後每次做 X 就自動做 Y」這類需求必須用此 skill 寫入 hooks。
允許某個指令
新增權限
設定 hook
每次完成後自動做某事
設定環境變數
keybindings-help
輸入：
/keybindings-help自訂 Claude Code 的鍵盤快捷鍵，修改 ~/.claude/keybindings.json。支援重新綁定、組合鍵（chord）設定。
自訂快捷鍵
改 ctrl+s 綁定
設定 chord
keybindings
schedule
輸入：
/schedule建立定時自動執行的 Remote Agent（cron job）。設定讓 Claude 在特定時間自動執行任務，例如每天早上 9 點檢查某個 API 或發報告。
每天自動做某事
排程任務
建 cron job
定時執行
loop
輸入：
/loop 5m /指令（預設每 10 分鐘）讓某個指令每隔固定時間重複執行。例如「每 5 分鐘檢查部署狀態」、「每 10 分鐘執行 /babysit-prs」。適合輪詢或持續監控任務。
每隔 5 分鐘做某事
持續監控
重複執行指令
輪詢
Skills 管理
建立、搜尋、管理 Skills
4 個
skill-auditor
輸入：
/skill-auditor + skill 路徑審計現有 Skill 的設計品質，評估觸發精準度、說明清晰度、安全風險、使用情境涵蓋度，並給出改善建議。適合在建立 Skill 後用來驗證品質。
審計這個 skill
評估 skill 品質
這個 skill 設計好嗎
改善 skill 描述
mcp-builder
輸入：
/mcp-builder建立 MCP Server（Model Context Protocol），讓 Claude 能串接外部工具、API 或服務。Anthropic 官方出品（29.5K installs）。適合需要擴充 Claude 工具能力、整合自訂 API 時使用。
建立 MCP Server
串接外部 API
新增 Claude 工具
整合服務
skill-creator
輸入：
/skill-creator建立新 Skill 或改善現有 Skill 的完整流程：撰寫草稿 → 建測試案例 → 執行評估（eval）→ 量化分析 → 反覆優化。也可以優化 Skill 描述讓觸發更準確。
建立新 skill
修改現有 skill
測試 skill
優化 skill 描述
find-skills
輸入：
/find-skills 或詢問「有沒有做 X 的 skill」從開放的 Agent Skills 生態系中搜尋並安裝新 Skill（使用 npx skills 套件管理工具）。當你想擴充 Claude 的能力，或找特定功能是否有現成 Skill 時使用。
有沒有做 X 的 skill
找 skill
安裝新功能
有沒有現成的工具
WordPress 助理系統
1 主控 + 4 子助理，研究→設計→部署→審查全自動
6 個
wp-bricks-agent-system
輸入：
/wp-bricks-agent-system 或詢問「助理能做什麼」系統總指南。說明 1 主控 + 4 子助理架構、各助理能力範圍（立即可用 vs 需設定）、完整 WordPress Bricks 網站工作流程（Phase 1–6）、Figma 與 WordPress API 設定說明。
助理能做什麼
如何使用助理系統
幫我做網站
WordPress Bricks 部署
競品研究
orchestrator
輸入：
@"orchestrator (agent)" 或說「幫我做 [任務]」主控助理（Claude Opus）。接收任何跨領域需求後自動拆解，分配給研究/設計/開發/審查四個子助理，整合所有成果回報。包含 WordPress + Bricks 多頁網站 6 Phase 完整流程，並在 Figma 確認節點暫停等用戶審閱。
幫我做 WordPress 網站
分析並執行
我需要多頁網站
競品 + 設計 + 部署
research-agent
輸入：
@"research-agent (agent)" + 研究主題資深研究助理（Claude Sonnet，只讀低風險）。從 ThemeForest、Dribbble、Awwwards、Behance 蒐集設計靈感；分析競品（設計風格/定位/SEO）；研究 WordPress REST API、WP-CLI、Bricks Builder 技術方案。輸出 Markdown 報告到 .claude/tmp/。
競品分析
設計靈感蒐集
SEO 研究
WordPress 技術評估
分析三個競品
design-agent
輸入：
@"design-agent (agent)" + 設計需求資深設計助理（Claude Sonnet）。優先將設計生成到 Figma 讓用戶審閱調整（⏸️確認節點）；用戶確認後輸出 Bricks Builder JSON 格式（每頁一個 .json 檔）；包含全域樣式（CSS 變數：色彩/字體）、響應式設定（478/768/991/1440px）。
設計 Hero section
生成 Figma 設計稿
輸出 Bricks JSON
設計多頁網站
全域色彩設定
dev-agent
輸入：
@"dev-agent (agent)" + 部署任務資深開發助理（Claude Sonnet，有 Bash 權限）。建立 Bricks 子主題（style.css + functions.php）、透過 REST API / WP-CLI / PHP 腳本部署 Bricks JSON 到 WordPress（_bricks_page_content_2 meta key）、設定選單首頁、重生 CSS。執行任何指令前先告知用戶。
建立 Bricks 子主題
部署到 WordPress
WP-CLI 管理
建立頁面
匯入 Bricks JSON
review-agent
輸入：
@"review-agent (agent)" + 審查目標審查助理（Claude Sonnet，只讀低風險）。程式碼品質與安全稽核（OWASP Top 10：XSS/注入/敏感資料）、Bricks JSON 結構驗證、無障礙合規（WCAG 2.1 AA）、Core Web Vitals 效能審查、SEO 技術審查。A/B/C/D 評分，「D 或高風險」阻擋上線。
程式碼審查
安全稽核
WCAG 無障礙檢查
Bricks JSON 驗證
效能審查