Claude Code 又十個最值得裝的 Skills！這篇全補上

上篇大概寫咗十個令龍蝦/OpenClaw越用越聰明！我裝咗邊啲技能Skill？留言區有人問：仲有冇？

有。

Skills生態呢半年擴張速度好快，好多方向上一篇根本冇時間覆蓋。今日補齊另外十個，標準一樣：真係裝到、高頻用到、明顯提升結果。

frontend-design：唔好俾AI味毀咗你嘅產品

如果你做過一段時間嘅Web開發，你一定遇過呢個問題，叫Claude Code寫介面，出嚟嘅嘢永遠係Inter字體、紫色漸變、卡片佈局、中規中矩。

技術上冇問題，但係一眼就睇得出係AI做嘅。

frontend-design呢個skill解決嘅就係呢個問題。

佢強迫Claude Code喺寫一行代碼之前，先做一個承諾：你要揀邊個視覺方向？極簡主義、極繁主義、復古未來、editorial風格？定咗之後，所有字體、配色、動效、空間佈局都必須跟住呢個方向執行，唔可以喺中途滑返安全區。

佢唔係令介面更好睇，而係「令介面有立場」。

對任何在意用戶體驗嘅開發者嚟講，呢個skill值得長期掛住。

安裝：

npx skills add anthropics/skills@frontend-design -g -y

superpowers：令Claude Code真正跑項目

好多人對Claude Code嘅誤解，在於將佢當做一個高級補全工具。

寫幾個函數，改幾段邏輯，驗證通過，完事。

但如果你想令佢跑一個完整嘅需求，由想法到代碼到測試到合併，咁就唔係補全工具搞得掂㗎喇。

superpowers做嘅就係呢件事。佢係社區入面最完整嘅多agent開發工作流skill集合，將軟件開發嘅完整生命週期拆成一串可銜接嘅步驟：需求發散、規格確認、計劃拆分、子agent執行、代碼review、合併。每個環節都有專屬skill負責，自動觸發，自動接力。

佢嘅核心優勢在於，子agent驅動嘅方式防止咗長任務入面嘅上下文漂移；TDD強制要求先寫測試，再寫實現；review關卡令合併之前有人把關。

安裝：

npx skills add obra/superpowers@using-superpowers -g -y

firecrawl 睇得明網頁數據

Claude Code默認狀態下，佢訪問唔到大多數真實網站。

原因係多方面嘅，網絡限制、反爬機制、JavaScript渲染嘅動態內容。

Firecrawl佢專門為LLM工作流設計，繞過反爬檢測，渲染JavaScript，然後將頁面內容輸出成乾淨嘅Markdown，而唔係你需要再解析嘅HTML噪音。

接上呢個skill之後，Claude Code可以直接抓取任意網頁內容、截圖、提取結構化數據、批量爬取文檔站點。

對於做技術選型調研、競品分析、抓取API文檔、自動化信息處理嘅人嚟講，呢個能力唔係錦上添花，係硬需求。

安裝：

npx skills add firecrawl/cli -g -y

web-interface-guidelines，前端頁面審查

寫前端頁面代碼最容易犯嘅錯，唔係邏輯錯誤，而係啲感覺冇問題但實際有伏嘅UI細節。

ARIA屬性缺失、focus狀態睇唔到、input冇label、觸摸目標太細、heading層級亂咗、鍵盤無法導航。

web-interface-guidelines係Vercel維護嘅一個quality gate skill。

佢每次運行都從源倉庫拉取最新嘅Web Interface Guidelines，然後將你嘅介面代碼對住100+條規則逐條檢查。

安裝：

npx skills add vercel-labs/web-interface-guidelines@web-interface-guidelines -g -y

mcp-builder，令Claude Code幫你造工具

用Claude Code嘅人，遲早會行到呢一步：某個API冇現成MCP server，或者現有嘅server唔夠好用，想自己造一個。

mcp-builder呢個skill係一套幫你構建高質量MCP server嘅完整指南，封裝咗架構決策、工具命名規範、錯誤處理模式、調試方式。

安裝：

npx skills add anthropics/skills@mcp-builder -g -y

remotion-best-practices：視頻就係代碼

好多開發者做產品發佈，最驚嘅一件事係錄demo視頻。

唔係因為唔識用ScreenFlow，而係因為佢打斷咗開發節奏。你要切出去、錄製、剪輯、導出，成個流程同寫代碼完全唔喺同一個頻道上。所以大多數人揀唔做，或者做一個將就嘅版本。

Remotion將呢件事變成咗寫React組件。動畫係隨幀變化嘅狀態，時間軸係代碼邏輯，導出係一條命令。

佢係Remotion官方維護嘅skill，將正確嘅動畫曲線、音頻處理、字幕生成、3D集成方式都封裝咗入嚟。

冇呢個skill，Claude Code寫Remotion代碼會反覆喺插值、音頻裁剪呢啲地方出錯。加上之後，佢嘅輸出質量完全唔同。

如果你有程序化視頻嘅需求，例如changelog演示、API demo、數據可視化，呢個skill值得裝。

安裝：

npx skills add remotion-dev/skills@remotion-best-practices -g -y

pr-review / git-pr

Claude Code會寫代碼，但唔代表佢默認知道點樣喺PR流程入面正確參與。

最常見嘅問題係喺review嘅時候逐條發評論，將PR作者嘅通知轟炸成垃圾桶；或者繞過pending review模式，直接submit；或者唔俾用戶確認機會，就自己將嘢發出去。

呢類skill專門解決呢啲問題。佢強制Claude Code先檢查gh CLI係咪就緒，起草所有評論，展示俾你睇，等你確認之後再統一提交，使用batch review而唔係逐條轟炸。

參考入口：

https://skills.sh/aidankinzett/claude-git-pr-skill/claude-git-pr

安裝：

npx skills add aidankinzett/claude-git-pr-skill@claude-git-pr -g -y

gws，Google生態嘅統一入口

Google Workspace有五十幾個API。Gmail、Drive、Calendar、Docs、Sheets、Slides，每一個都有自己嘅OAuth流程、client library、REST端點。

對於大量工作流程依賴Google生態嘅人，例如讀郵件歸檔、同步日曆、整理Drive文件、操作Sheets數據，呢個skill將所有嘢自動化曬。

安裝：

npx skills add googleworkspace/cli@gws-docs -g -y

simplify / code-review

呢個係一個經常俾人低估嘅內置skill，但係我用得最多嘅其中一個。

Claude Code寫出嚟嘅代碼，通常係「用得嘅第一稿」。跑得到、邏輯啱，但唔代表係經過整理之後嘅狀態。未用嘅import、冗餘變量、可以提取嘅共用邏輯、過於複雜嘅條件判斷，呢啲嘢散落喺入面。

/simplify會喺你嘅改動之後自動跑三個並行嘅review agent，每個由唔同角度審查文件，然後直接修咗問題，唔只係報告。

佢唔需要你去主動學咩新嘢，亦唔需要配置。你只需要養成一個習慣：每次大嘅修改之後，或者AI一口氣生成咗一批代碼之後，跑一次/simplify。

佢係將「AI生成」同「人工整理」之間嗰段距離縮短嘅嘢。

使用方式：

/simplify

或帶參數：

/simplify 只關注測試覆蓋缺口

project-context 龍蝦記憶

呢個最後講，但可能係長期價值最高嘅一類。

Claude Code冇跨會話記憶。每次你開一個新會話，佢唔知道你嘅項目叫咩名、用咩框架、邊啲模塊係核心、邊啲伏之前踩過。

抄一下OpenClaw！寫咗個跨端嘅Claude Code記憶工具Skill

OpenClaw同CC喺使用Skill上冇咩特別嘅區別，如果你啱開始配，兩篇合埋一齊睇，先裝基礎能力嗰批，再按你實際工作場景補齊。

Claude Code嘅上限，從來唔係模型本身決定嘅。

你俾佢配咗咩，佢就行得幾遠。

實現基於微信OpenClaw插件嘅主動消息推送

上篇寫了大概十個讓龍蝦/OpenClaw越用越聰明！我都裝了哪些技能Skill?留言區有人問：還有嗎？

有。

Skills 生態這半年擴張速度很快，很多方向上一篇根本沒來得及覆蓋。今天補齊另外十個，標準還是一樣：真實可裝、高頻能用、明顯提升結果。

frontend-design：別讓 AI 味毀了你的產品

如果你做過一段時間的 Web 開發，你一定遇到過這個問題，讓 Claude Code 寫界面，出來的東西永遠是 Inter 字體、紫色漸變、卡片佈局、中規中矩。

技術上沒問題，但是一眼能認出來是 AI 做的。

frontend-design 這個 skill 解決的就是這個問題。

它強迫 Claude Code 在寫一行代碼之前，先做一個承諾：你要選哪個視覺方向？極簡主義、極繁主義、復古未來、editorial 風格？定了之後，所有的字體、配色、動效、空間佈局都必須服從這個方向執行，不能在中途滑回安全區。

它不是讓界面更好看，而是"讓界面有立場"。

對任何在意用戶側體驗的開發者來說，這個 skill 值得長期掛着。

安裝：

npx skills add anthropics/skills@frontend-design -g -y

superpowers：讓 Claude Code 真正跑項目

很多人對 Claude Code 的誤解，在於把它當作一個高級補全工具。

寫幾個函數，改幾段邏輯，驗證通過，完事。

但如果你想讓它跑一個完整的需求，從想法到代碼到測試到合併，那就不是補全工具能搞定的事了。

superpowers 做的就是這件事。它是社區裏最完整的多 agent 開發工作流 skill 集合，把軟件開發的完整生命週期拆成一串可銜接的步驟：需求發散、規格確認、計劃拆分、子 agent 執行、代碼 review、合併。每個環節都有專屬 skill 負責，自動觸發，自動接力。

它的核心優勢在於，子 agent 驅動的方式防止了長任務裏的上下文漂移；TDD 強制要求先寫測試，再寫實現；review 關卡讓合併之前有人把關。

安裝：

npx skills add obra/superpowers@using-superpowers -g -y

firecrawl 看懂網頁數據

Claude Code 默認狀態下，它訪問不了大多數真實網站。

原因是多方面的，網絡限制、反爬機制、JavaScript 渲染的動態內容。

Firecrawl 它專門為 LLM 工作流設計，繞過反爬檢測，渲染 JavaScript，然後把頁面內容輸出成乾淨的 Markdown，而不是你需要再次解析的 HTML 噪音。

接上這個 skill 之後，Claude Code 可以直接抓取任意網頁內容、截圖、提取結構化數據、批量爬取文檔站點。

對於做技術選型調研、競品分析、抓取 API 文檔、自動化信息處理的人來說，這個能力不是錦上添花，是硬需求。

安裝：

npx skills add firecrawl/cli -g -y

web-interface-guidelines，前端頁面審審

寫前端頁面代碼最容易犯的錯，不是邏輯錯誤，而是那些感覺沒問題但實際有坑的 UI 細節。

ARIA 屬性缺失、focus 狀態看不見、input 沒有 label、觸摸目標太小、heading 層級亂了、鍵盤無法導航。

web-interface-guidelines 是 Vercel 維護的一個 quality gate skill。

它每次運行都從源倉庫拉取最新的 Web Interface Guidelines，然後把你的界面代碼對着 100+ 條規則逐條檢查。

安裝：

npx skills add vercel-labs/web-interface-guidelines@web-interface-guidelines -g -y

mcp-builder，讓 Claude Code 幫你造工具

用 Claude Code 的人，遲早會走到這一步：某個 API 沒有現成 MCP server，或者現有的 server 不夠好用，想自己造一個。

mcp-builder 這個 skill 是一套幫你構建高質量 MCP server 的完整指南，封裝了架構決策、工具命名規範、錯誤處理模式、調試方式。

安裝：

npx skills add anthropics/skills@mcp-builder -g -y

remotion-best-practices：視頻就是代碼

很多開發者做產品發佈，最怵的一件事是錄 demo 視頻。

不是因為不會用 ScreenFlow，而是因為它打斷了開發節奏。你要切出去、錄製、剪輯、導出，整個流程和寫代碼完全不在一個頻道上。所以大多數人選擇不做，或者做一個將就的版本。

Remotion 把這件事變成了寫 React 組件。動畫是隨幀變化的狀態，時間軸是代碼邏輯，導出是一條命令。

它是 Remotion 官方維護的 skill，把正確的動畫曲線、音頻處理、字幕生成、3D 集成方式都封裝進來了。

沒有這個 skill，Claude Code 寫 Remotion 代碼會反覆在插值、音頻裁剪這些地方出錯。加上之後，它的輸出質量完全不同。

如果你有程序化視頻的需求，比如 changelog 演示、API demo、數據可視化，這個 skill 值得裝。

安裝：

npx skills add remotion-dev/skills@remotion-best-practices -g -y

pr-review / git-pr

Claude Code 會寫代碼，但不代表它默認知道怎麼在 PR 流程里正確參與。

最常見的問題是在 review 的時候逐條發評論，把 PR 作者的通知轟炸成垃圾桶；或者繞過 pending review 模式，直接 submit；或者不給用戶確認機會，就自己把東西發出去。

這類 skill 專門解決這些問題。它強制 Claude Code 先檢查 gh CLI 是否就緒，起草所有評論，展示給你看，等你確認之後再統一提交，使用 batch review 而不是逐條轟炸。

參考入口：

https://skills.sh/aidankinzett/claude-git-pr-skill/claude-git-pr

安裝：

npx skills add aidankinzett/claude-git-pr-skill@claude-git-pr -g -y

gws，Google 生態的統一入口

Google Workspace 有五十多個 API。Gmail、Drive、Calendar、Docs、Sheets、Slides，每一個都有自己的 OAuth 流程、client library、REST 端點。

對於大量工作流程依賴 Google 生態的人，比如讀郵件歸檔、同步日曆、整理 Drive 文件、操作 Sheets 數據，這個 skill 把所有全部自動化。

安裝：

npx skills add googleworkspace/cli@gws-docs -g -y

simplify / code-review

這是一個經常被人低估的內置 skill，但它是我用得最多的之一。

Claude Code 寫出來的代碼，通常是"能用的第一稿"。能跑、邏輯對，但不代表是經過整理之後的狀態。未使用的 import、冗餘變量、可以提取的共用邏輯、過於複雜的條件判斷，這些東西散落在裏面。

/simplify 會在你的改動之後自動跑三個並行的 review agent，每個從不同角度審查文件，然後直接修掉問題，不只是報告。

它不需要你去主動學什麼新東西，也不需要配置。你只需要養成一個習慣：每次大的修改之後，或者 AI 一口氣生成了一批代碼之後，跑一次 /simplify。

它是把"AI 生成"和"人工整理"之間那段距離縮短的東西。

使用方式：

/simplify

或帶參數：

/simplify 只關注測試覆蓋缺口

project-context 龍蝦記憶

這個最後說，但可能是長期價值最高的一類。

Claude Code 沒有跨會話記憶。每次你開一個新會話，它不知道你的項目叫什麼、用的什麼框架、哪些模塊是核心、哪些坑之前踩過。

抄一下OpenClaw！寫了個跨端的Claude Code記憶工具Skill

OpenClaw和CC在使用Skill上沒有什麼特別的區別，如果你剛開始配，兩篇合起來看，先裝基礎能力那一批，再按你實際工作場景補齊。

Claude Code 的上限，從來不是模型本身決定的。

你給它配了什麼，它就能走多遠。

實現基於微信OpenClaw插件的主動消息推送