給 Claude Code 挑了 15 個 Skills，按工作流分層

作者：海邊的小魚乾

日期：2026年6月6日下午12:37

來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點高亮

按工作流分層精選 15 個 Claude Skills，夠日常開發用，唔使堆數字

整理版摘要

呢篇文章係作者分享佢點樣從社區熱門 Skill 清單中，精選出 15 個 Claude Skills 嘅心得。作者用 Claude Code 寫採集腳本時，發現模型預設冇加載 Firecrawl CLI 用法，而 Skills 就好似「帶觸發詞嘅操作手冊」，可以將領域知識、步驟、工具調用方式寫入獨立檔案，改一處就全局生效，仲可以放喺 ~/.claude/skills/ 俾團隊共用。

作者留意到社區有人整理咗 100 個熱門包，但全裝有兩個問題：上下文被同類 Skill 擠佔，Claude 反而唔知優先調邊個；用家根本記唔曬名，最後只用其中三四個。所以佢嘅裁法係 Firecrawl 只留主入口加 scrape 同 search，其餘子包等需要先裝；React Native、daily-report 等唔入基線；加埋 skill-creator 自訂團隊規範。最終揀咗 15 個，按「發現 → 交付」一條鏈路排成六個階段。

整體結論係呢 15 個 Skill 覆蓋咗揾工具、寫界面、寫 React、測試、審查、抓網頁、出圖嘅日常工作，夠用又唔會搶太多上下文。團隊獨有流程就用 skill-creator 寫第 16 個，嗰個先係別人抄唔走嘅部分。

精選 15 個 Skills 按六階段排列，避免裝太多搶上下文，記得住又實用
安裝四部曲：用 find-skills 搜座標 → npx skills add 安裝 → npx skills list 驗證 → 自然語言觸發
Skill 係操作手冊，MCP 係運行時工具，兩者可互補，唔係替代關係
公開包唔夠用就用 skill-creator 自訂團隊規範，例如 code review 清單或版面約定
建議初始只裝 find-skills、frontend-design 同主棧相關一個，其餘有需要先補

值得記低

流程

一鍵安裝 15 個 Skills

npx skills add vercel-labs/skills@find-skills -g -y && npx skills add upstash/context7@find-docs -g -y && npx skills add anthropics/skills@skill-creator -g -y && npx skills add anthropics/skills@frontend-design -g -y && npx skills add shadcn/ui@shadcn -g -y && npx skills add vercel-labs/agent-skills@web-design-guidelines -g -y && npx skills add vercel-labs/agent-skills@vercel-react-best-practices -g -y && npx skills add vercel-labs/agent-skills@vercel-composition-patterns -g -y && npx skills add anthropics/skills@webapp-testing -g -y && npx skills add obra/superpowers@requesting-code-review -g -y && npx skills add firecrawl/cli@firecrawl -g -y && npx skills add firecrawl/cli@firecrawl-scrape -g -y && npx skills add firecrawl/cli@firecrawl-search -g -y && npx skills add anthropics/skills@canvas-design -g -y && npx skills add anthropics/skills@theme-factory -g -y

整理重點

點解要精選 Skills？

作者用 Claude Code 寫採集腳本，第一反應係 requests 加 BeautifulSoup，唔係模型蠢，而係預設冇加載 Firecrawl CLI 嗰套用法。Skills 可以理解成「帶觸發詞嘅操作手冊」：領域知識、步驟、工具調用方式寫入 SKILL.md，Claude 匹配到意圖就會讀呢份文件，唔使每輪對話重新交代。同長提示詞比，Skill 獨立成文件，改一處全局生效；放 ~/.claude/skills/ 仲可以俾團隊共用。

點解係 15 個唔係 100 個？社區有人整理過 100 個熱門包，但全裝有兩個問題：上下文被同類 Skill 擠佔，Claude 反而唔知優先調邊個；你記唔住名，最後只用其中三四個。作者嘅裁法：Firecrawl 只留主入口 + scrape + search，其餘子包缺咗先揾；React Native、daily-report 等唔入基線；加上 skill-creator 自訂團隊規範。

整理重點

從索引到界面：階段一二三（7 個 Skill）

階段一「索引與文檔」有 3 個：find-skills（終端搜 Skill）、find-docs（查官方文檔）、skill-creator（腳手架生成自訂 SKILL.md）。階段二「界面」有 3 個：frontend-design（搭頁面佈局）、shadcn（增刪 shadcn 組件）、web-design-guidelines（按規範審 UI）。階段三「React 編碼」有 2 個：vercel-react-best-practices（約 70 條性能規則）、vercel-composition-patterns（組件組合模式）。

1 01 find-skills：npx skills add vercel-labs/skills@find-skills -g -y，必裝，揾其他 skill 嘅入口
2 02 find-docs：npx skills add upstash/context7@find-docs -g -y，查 Next.js、React 等官方文檔
3 03 skill-creator：npx skills add anthropics/skills@skill-creator -g -y，用嚟起自訂 SKILL.md 腳手架
4 04 frontend-design：npx skills add anthropics/skills@frontend-design -g -y，設計可上線嘅頁面佈局
5 05 shadcn：npx skills add shadcn/ui@shadcn -g -y，增刪 shadcn 組件
6 06 web-design-guidelines：npx skills add vercel-labs/agent-skills@web-design-guidelines -g -y，審 UI 代碼規範
7 07 vercel-react-best-practices：npx skills add vercel-labs/agent-skills@vercel-react-best-practices -g -y，性能優化規則

做產品界面裝 04+05；現有頁面要過規範就再加 06。07 偏性能，08 偏結構，兩個都來自 vercel-labs/agent-skills，維護節奏一致。

整理重點

質量把關同資料採集：階段四五（5 個 Skill）

階段四「質量」有 2 個：webapp-testing（用 Playwright 寫 E2E）同 requesting-code-review（結構化 Code Review）。09 管「頁面點唔點得通」，10 管「代碼該唔該合」——觸發場景唔同，唔好只留一個。階段五「網頁採集」有 3 個：firecrawl（統一入口）、firecrawl-scrape（單 URL 轉 Markdown）、firecrawl-search（搜索並摘要結果）。

安裝時要配 API Key：export FIRECRAWL_API_KEY=你的密鑰。Windows 用戶用 $env:FIRECRAWL_API_KEY="..."。

整理重點

視覺交付、維護同自訂專屬 Skill

階段六「視覺交付」有 2 個：canvas-design（海報、示意圖等藝術向視覺）同 theme-factory（為文檔或頁面換主題皮膚）。寫教程、公眾號配圖用 14；同一套內容要換多套配色用 15。

一口氣安裝全部 15 條（可複製） bash

npx skills add vercel-labs/skills@find-skills -g -y && \
npx skills add upstash/context7@find-docs -g -y && \
npx skills add anthropics/skills@skill-creator -g -y && \
npx skills add anthropics/skills@frontend-design -g -y && \
npx skills add shadcn/ui@shadcn -g -y && \
npx skills add vercel-labs/agent-skills@web-design-guidelines -g -y && \
npx skills add vercel-labs/agent-skills@vercel-react-best-practices -g -y && \
npx skills add vercel-labs/agent-skills@vercel-composition-patterns -g -y && \
npx skills add anthropics/skills@webapp-testing -g -y && \
npx skills add obra/superpowers@requesting-code-review -g -y && \
npx skills add firecrawl/cli@firecrawl -g -y && \
npx skills add firecrawl/cli@firecrawl-scrape -g -y && \
npx skills add firecrawl/cli@firecrawl-search -g -y && \
npx skills add anthropics/skills@canvas-design -g -y && \
npx skills add anthropics/skills@theme-factory -g -y

日常維護：用 npx skills update -g 全部更新，用 npx skills remove <名> -g 卸載單個。裝完後用 npx skills list -g 確認，或者喺 Claude Code 用自然語言試幾句：例如「查一下 Next.js App Router 文檔」應該觸發 find-docs。

Claude Skills 精簡裝法：15 個夠用嘅插件清單

參考社羣熱門 Skill 清單，斬走重複同冷門包，跟「發現 → 交付」一條鏈重新排。座標、命令可以直接複製。

先講清楚：缺嘅唔係智商，係手冊

我用 Claude Code 寫採集腳本，佢第一反應仲係 requests 加 BeautifulSoup。唔係個模型蠢，係佢預設冇 load Firecrawl 嗰套 CLI 用法。

Skills 可以理解做「帶觸發詞嘅操作手冊」：領域知識、步驟、工具調用方式寫喺 SKILL.md，Claude 匹配到你嘅意圖就會讀呢份文件，唔使每輪對話重新交代。

同長提示詞比，Skill 獨立成文件，改一處就全局生效；放喺 ~/.claude/skills/ 仲可以俾團隊共用。

點解係 15 個，唔係 100 個

社羣有人整理過 100 個熱門包，Firecrawl alone 就佔 13 個。全部裝曬有兩個問題：

上下文被同類 Skill 逼佔，Claude 反而唔知優先調邊個
你記唔到個名，最後淨係用其中三、四個

我嘅裁法：

Firecrawl 只留主入口 + scrape + search，其餘子包唔夠先 find
React Native、daily-report、web-artifacts-builder 等唔入基線
加上 skill-creator，方便將團隊規範寫成自己嘅包

15 個覆蓋：揾工具、寫界面、寫 React、測試、審查、抓網頁、出圖。夠日常開發，唔係鬥數字。

清單：按階段排，唔按「全家桶分類」

階段一 · 索引與文檔（3 個）

#	Skill	幹什麼	安裝命令
01	find-skills	喺終端搜 Skill、核對 `倉庫@名`	`npx skills add vercel-labs/skills@find-skills -g -y`
02	find-docs	查框架 / API 官方文檔	`npx skills add upstash/context7@find-docs -g -y`
03	skill-creator	腳手架生成自定義 SKILL.md	`npx skills add anthropics/skills@skill-creator -g -y`

01 一定要先裝。 後面所有座標都建議先 npx skills find <詞> 核對，唔好死記包名。

階段二 · 界面（3 個）

#	Skill	幹什麼	安裝命令
04	frontend-design	搭可以上線嘅頁面佈局	`npx skills add anthropics/skills@frontend-design -g -y`
05	shadcn	增刪改 shadcn 組件	`npx skills add shadcn/ui@shadcn -g -y`
06	web-design-guidelines	按規範審 UI 代碼	`npx skills add vercel-labs/agent-skills@web-design-guidelines -g -y`

做產品界面裝 04+05；已有頁面要過規範，加 06。

階段三 · React 編碼（2 個）

#	Skill	幹什麼	安裝命令
07	vercel-react-best-practices	Vercel 整理嘅約 70 條性能規則	`npx skills add vercel-labs/agent-skills@vercel-react-best-practices -g -y`
08	vercel-composition-patterns	組件組合與架構模式	`npx skills add vercel-labs/agent-skills@vercel-composition-patterns -g -y`

兩個都嚟自 vercel-labs/agent-skills，維護節奏一致。07 偏性能，08 偏結構。

階段四 · 質量（2 個）

#	Skill	幹什麼	安裝命令
09	webapp-testing	用 Playwright 寫 E2E	`npx skills add anthropics/skills@webapp-testing -g -y`
10	requesting-code-review	結構化 Code Review	`npx skills add obra/superpowers@requesting-code-review -g -y`

09 管「頁面點唔點得通」，10 管「代碼應唔應該合」。觸發場景唔同，唔好淨係留一個。

階段五 · 網頁採集（3 個）

#	Skill	幹什麼	安裝命令
11	firecrawl	統一入口，調度子能力	`npx skills add firecrawl/cli@firecrawl -g -y`
12	firecrawl-scrape	單 URL 轉 Markdown	`npx skills add firecrawl/cli@firecrawl-scrape -g -y`
13	firecrawl-search	搜索並摘要網頁結果	`npx skills add firecrawl/cli@firecrawl-search -g -y`

要配 API Key：

export FIRECRAWL_API_KEY=你的密鑰

成個站 crawl、表單 interact 呢類需求，先用 find-skills 搜 firecrawl-crawl 等擴展包，唔好一開始就裝曬。

階段六 · 視覺交付（2 個）

#	Skill	幹什麼	安裝命令
14	canvas-design	海報、示意圖、藝術向視覺	`npx skills add anthropics/skills@canvas-design -g -y`
15	theme-factory	幫文檔 / 頁面換主題皮膚	`npx skills add anthropics/skills@theme-factory -g -y`

寫教程、公眾號配圖用 14；同一套內容要換多套配色，用 15。

一次過安裝（15 條）

npx skills add vercel-labs/skills@find-skills -g -y && \
npx skills add upstash/context7@find-docs -g -y && \
npx skills add anthropics/skills@skill-creator -g -y && \
npx skills add anthropics/skills@frontend-design -g -y && \
npx skills add shadcn/ui@shadcn -g -y && \
npx skills add vercel-labs/agent-skills@web-design-guidelines -g -y && \
npx skills add vercel-labs/agent-skills@vercel-react-best-practices -g -y && \
npx skills add vercel-labs/agent-skills@vercel-composition-patterns -g -y && \
npx skills add anthropics/skills@webapp-testing -g -y && \
npx skills add obra/superpowers@requesting-code-review -g -y && \
npx skills add firecrawl/cli@firecrawl -g -y && \
npx skills add firecrawl/cli@firecrawl-scrape -g -y && \
npx skills add firecrawl/cli@firecrawl-search -g -y && \
npx skills add anthropics/skills@canvas-design -g -y && \
npx skills add anthropics/skills@theme-factory -g -y

參數說明：-g 裝到全局（~/.claude/skills/），-y 跳過確認。Windows 用戶將 export 換成 $env:FIRECRAWL_API_KEY="..."。

裝完點確認冇白裝

# 看全局已裝列表
npx skills list -g

# 過濾某一類
npx skills list -g | grep firecrawl

喺 Claude Code 裏面用自然語言試幾句：

「查下 Next.js App Router 文檔」→ 應該走 find-docs
「Review 呢段 React 組件嘅性能」→ 應該走 vercel-react-best-practices
「將呢個 URL 抓成 Markdown」→ 應該走 firecrawl-scrape

冇觸發？先 list 睇裝咗未、座標啱唔啱，再檢查描述裏面有冇寫清楚 When to Use。

日常維護：

npx skills update -g          # 全部更新
npx skills remove <名> -g     # 卸載單個

公開包唔夠用，就自己寫一個

公司代碼規範、Review 檢查項、排版約定——呢啲公開 Skill 覆蓋唔到。用 03 skill-creator 起腳手架：

npx skills init my-team-review

編輯生成嘅 SKILL.md：寫清楚觸發條件、步驟、輸出格式，然後放喺：

全局：~/.claude/skills/my-team-review/SKILL.md
淨係呢個倉庫：.claude/skills/my-team-review/SKILL.md

測試方法好簡單：講一句應該命中嗰個 Skill 嘅句子，睇 Claude 會唔會跟返你嘅流程行。

常見問題

Q：15 個都係太多，最少裝幾個？

find-skills + frontend-design + 同你主棧相關嘅一個（React 揀 07，採集揀 11）。其他唔夠先補。

Q：安裝報揾唔到包？

八成係座標寫錯。正確格式係 npx skills add 倉庫@技能名 -g -y，以 find-skills 搜出來嘅 slug 為準。

Q：同 MCP 咩關係？

Skill 偏向「點樣做」嘅流程手冊；MCP 偏向運行時連接外部工具。好多 Skill 會教你點樣調 CLI/API，兩者可以一齊用，唔係取代關係。

Q：技能市場喺邊？

skills.sh，CLI 幫助：npx skills --help。

收尾

Claude Code 出廠配置可以應付閒聊，做專業嘢要靠 Skill 補手冊。100 個熱門包睇落好熱鬧，按階段留 15 個更加記得住，亦都少啲搶上下文。

安裝方法記四步：find 搜座標 → add 安裝 → list 驗證 → 對話入面自然觸發。團隊獨有嘅流程，用 skill-creator 寫第 16 個——嗰個先係人哋抄唔走嘅部分。

Claude Skills 精簡裝法：15 個夠用的插件清單

參考社區熱門 Skill 清單，砍掉重複和冷門包，按「發現 → 交付」一條鏈路重新排。座標、命令可直接複製。

先講清楚：缺的不是智商，是手冊

我用 Claude Code 寫採集腳本，它第一反應還是 requests 加 BeautifulSoup。不是模型笨，是它默認沒加載 Firecrawl 那套 CLI 用法。

Skills 可以理解成「帶觸發詞的操作手冊」：領域知識、步驟、工具調用方式寫進 SKILL.md，Claude 匹配到你的意圖就讀這份文件，不用每輪對話重新交代。

和長提示詞比，Skill 獨立成文件，改一處全局生效；放 ~/.claude/skills/ 還能給團隊共用。

為什麼是 15 個，不是 100 個

社區有人整理過 100 個熱門包，Firecrawl alone 就佔 13 個。全裝有兩個問題：

上下文被同類 Skill 擠佔，Claude 反而不知道優先調哪個
你記不住名字，最後只用其中三四個

我的裁法：

Firecrawl 只留主入口 + scrape + search，其餘子包缺了再 find
React Native、daily-report、web-artifacts-builder 等不進基線
加上 skill-creator，方便把團隊規範寫成自己的包

15 個覆蓋：找工具、寫界面、寫 React、測、審、抓網頁、出圖。夠日常開發，不堆數字。

清單：按階段排，不按「全家桶分類」

階段一 · 索引與文檔（3 個）

#	Skill	幹什麼	安裝命令
01	find-skills	在終端搜 Skill、核對 `倉庫@名`	`npx skills add vercel-labs/skills@find-skills -g -y`
02	find-docs	查框架 / API 官方文檔	`npx skills add upstash/context7@find-docs -g -y`
03	skill-creator	腳手架生成自定義 SKILL.md	`npx skills add anthropics/skills@skill-creator -g -y`

01 必須先裝。 後面所有座標都建議先 npx skills find <詞> 核對，別死記包名。

階段二 · 界面（3 個）

#	Skill	幹什麼	安裝命令
04	frontend-design	搭能上線的頁面佈局	`npx skills add anthropics/skills@frontend-design -g -y`
05	shadcn	增刪改 shadcn 組件	`npx skills add shadcn/ui@shadcn -g -y`
06	web-design-guidelines	按規範審 UI 代碼	`npx skills add vercel-labs/agent-skills@web-design-guidelines -g -y`

做產品界面裝 04+05；已有頁面要過規範，加 06。

階段三 · React 編碼（2 個）

#	Skill	幹什麼	安裝命令
07	vercel-react-best-practices	Vercel 整理的約 70 條性能規則	`npx skills add vercel-labs/agent-skills@vercel-react-best-practices -g -y`
08	vercel-composition-patterns	組件組合與架構模式	`npx skills add vercel-labs/agent-skills@vercel-composition-patterns -g -y`

兩個都來自 vercel-labs/agent-skills，維護節奏一致。07 偏性能，08 偏結構。

階段四 · 質量（2 個）

#	Skill	幹什麼	安裝命令
09	webapp-testing	用 Playwright 寫 E2E	`npx skills add anthropics/skills@webapp-testing -g -y`
10	requesting-code-review	結構化 Code Review	`npx skills add obra/superpowers@requesting-code-review -g -y`

09 管「頁面能不能點通」，10 管「代碼該不該合」。觸發場景不同，別隻留一個。

階段五 · 網頁採集（3 個）

#	Skill	幹什麼	安裝命令
11	firecrawl	統一入口，調度子能力	`npx skills add firecrawl/cli@firecrawl -g -y`
12	firecrawl-scrape	單 URL 轉 Markdown	`npx skills add firecrawl/cli@firecrawl-scrape -g -y`
13	firecrawl-search	搜索並摘要網頁結果	`npx skills add firecrawl/cli@firecrawl-search -g -y`

要配 API Key：

export FIRECRAWL_API_KEY=你的密鑰

整站 crawl、表單 interact 這類需求，再用 find-skills 搜 firecrawl-crawl 等擴展包，別一開始全裝。

階段六 · 視覺交付（2 個）

#	Skill	幹什麼	安裝命令
14	canvas-design	海報、示意圖、藝術向視覺	`npx skills add anthropics/skills@canvas-design -g -y`
15	theme-factory	給文檔 / 頁面換主題皮膚	`npx skills add anthropics/skills@theme-factory -g -y`

寫教程、公眾號配圖用 14；同一套內容要換多套配色，用 15。

一口氣安裝（15 條）

npx skills add vercel-labs/skills@find-skills -g -y && \
npx skills add upstash/context7@find-docs -g -y && \
npx skills add anthropics/skills@skill-creator -g -y && \
npx skills add anthropics/skills@frontend-design -g -y && \
npx skills add shadcn/ui@shadcn -g -y && \
npx skills add vercel-labs/agent-skills@web-design-guidelines -g -y && \
npx skills add vercel-labs/agent-skills@vercel-react-best-practices -g -y && \
npx skills add vercel-labs/agent-skills@vercel-composition-patterns -g -y && \
npx skills add anthropics/skills@webapp-testing -g -y && \
npx skills add obra/superpowers@requesting-code-review -g -y && \
npx skills add firecrawl/cli@firecrawl -g -y && \
npx skills add firecrawl/cli@firecrawl-scrape -g -y && \
npx skills add firecrawl/cli@firecrawl-search -g -y && \
npx skills add anthropics/skills@canvas-design -g -y && \
npx skills add anthropics/skills@theme-factory -g -y

參數說明：-g 裝到全局（~/.claude/skills/），-y 跳過確認。Windows 用戶把 export 換成 $env:FIRECRAWL_API_KEY="..."。

裝完怎麼確認沒白裝

# 看全局已裝列表
npx skills list -g

# 過濾某一類
npx skills list -g | grep firecrawl

在 Claude Code 裏用自然語言試幾句：

「查一下 Next.js App Router 文檔」→ 應走 find-docs
「Review 這段 React 組件的性能」→ 應走 vercel-react-best-practices
「把這個 URL 抓成 Markdown」→ 應走 firecrawl-scrape

沒觸發？先 list 看裝沒裝對座標，再檢查描述裏有沒有寫清楚 When to Use。

日常維護：

npx skills update -g          # 全部更新
npx skills remove <名> -g     # 卸載單個

公開包不夠用，就自己寫一個

公司代碼規範、Review 檢查項、排版約定——這些公開 Skill 覆蓋不到。用 03 skill-creator 起腳手架：

npx skills init my-team-review

編輯生成的 SKILL.md：寫清觸發條件、步驟、輸出格式，然後放到：

全局：~/.claude/skills/my-team-review/SKILL.md
僅當前倉庫：.claude/skills/my-team-review/SKILL.md

測法很簡單：說一個應該命中該 Skill 的句子，看 Claude 是否按你的流程走。

常見問題

Q：15 個還是太多，最少裝幾個？

find-skills + frontend-design + 和你主棧相關的一個（React 選 07，採集選 11）。其餘缺了再補。

Q：安裝報找不到包？

八成是座標寫錯。正確格式是 npx skills add 倉庫@技能名 -g -y，用 find-skills 搜出來的 slug 為準。

Q：和 MCP 什麼關係？

Skill 偏「怎麼做」的流程手冊；MCP 偏運行時連外部工具。很多 Skill 會教你怎麼調 CLI/API，兩者可以一起用，不是替代關係。

Q：技能市場在哪？

skills.sh，CLI 幫助：npx skills --help。

收尾

Claude Code 出廠配置能應付閒聊，幹專業活要靠 Skill 補手冊。100 個熱門包看着熱鬧，按階段留 15 個更記得住、也更少搶上下文。

裝法記四步：find 搜座標 → add 安裝 → list 驗證 → 對話裏自然觸發。團隊獨有的流程，用 skill-creator 寫第 16 個——那個才是別人抄不走的部分。