網站設計
前端介面建立、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
2 個
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
安裝新功能
有沒有現成的工具