Claude Code Plugins (外掛 / 插件) 功能試用與心得分享

Claude Code 最新版本 (v2.0.14) 推出了全新的 Plugins 系統，可以說是今年見過最實用、最能解決痛點的功能之一。

Plugins 可以整合我們寫好的 Slash Commands (就是用 / 叫出來的快捷指令)、Sub Agents (子代理)、Hooks (鉤子)、MCP Servers，簡單來說，就是一個超級大禮包，把所有的功能全部整合在一起，可以有效解決以下常見的情境與痛點：

團隊成員的開發環境與規範不統一
安裝環境複雜
新進員工的磨合與理解

現在我們可以將這些流程與用到的工具、指令都做成一個插件，讓其他團隊成員「一鍵安裝」，不到 10 秒鐘就能把整個工作流程複製過去，省了非常多的時間

此外，我們也能把插件 push 到 GitHub 上，當然也能下載全球使用者做好的插件，可想而知又是一個龐大的開源庫惹！此外因為全部都放在 GitHub 託管，所以有詳細的版本管理、敘述和更新機制，也可以在下載前確認對方的 plugins 檔案內容，確保安全與隱私性

安裝 Plugins

要使用 Plugins 功能，必須將 claude 升級到最新版，請輸入以下指令進行更新

claude update

▼ 我從 2.0.11 更新到最新版 2.0.14

▼ 再來輸入 /plugin 指令，可以先安裝 anthropics 官方提供的 claude code plugins

/plugin marketplace add anthropics/claude-code

▼ anthropics 提供了五個 plugins，可以在 GitHub 的 claude-code/.claude-plugin/marketplace.json 看到詳細的 JSON 內容

{
  "$schema": "https://anthropic.com/claude-code/marketplace.schema.json",
  "name": "claude-code-plugins",
  "version": "1.0.0",
  "description": "Bundled plugins for Claude Code including Agent SDK development tools, PR review toolkit, and commit workflows",
  "owner": {
    "name": "Anthropic",
    "email": "[email protected]"
  },
  "plugins": [
    {
      "name": "agent-sdk-dev",
      "description": "Development kit for working with the Claude Agent SDK",
      "source": "./plugins/agent-sdk-dev",
      "category": "development"
    },
    {
      "name": "pr-review-toolkit",
      "description": "Comprehensive PR review agents specializing in comments, tests, error handling, type design, code quality, and code simplification",
      "version": "1.0.0",
      "author": {
        "name": "Anthropic",
        "email": "[email protected]"
      },
      "source": "./plugins/pr-review-toolkit",
      "category": "productivity"
    },
    {
      "name": "commit-commands",
      "description": "Commands for git commit workflows including commit, push, and PR creation",
      "version": "1.0.0",
      "author": {
        "name": "Anthropic",
        "email": "[email protected]"
      },
      "source": "./plugins/commit-commands",
      "category": "productivity"
    },
    {
      "name": "feature-dev",
      "description": "Comprehensive feature development workflow with specialized agents for codebase exploration, architecture design, and quality review",
      "version": "1.0.0",
      "author": {
        "name": "Siddharth Bidasaria",
        "email": "[email protected]"
      },
      "source": "./plugins/feature-dev",
      "category": "development"
    },
    {
      "name": "security-guidance",
      "description": "Security reminder hook that warns about potential security issues when editing files, including command injection, XSS, and unsafe code patterns",
      "version": "1.0.0",
      "author": {
        "name": "David Dworken",
        "email": "[email protected]"
      },
      "source": "./plugins/security-guidance",
      "category": "security"
    }
  ]
}

五個插件的簡易介紹如下，你可以根據自己的喜好安裝，我自己都有裝，因為看敘述都覺得很棒 (流口水：

agent-sdk-dev
- 用於處理 Claude Agent SDK 的開發工具包，必裝
pr-review-toolkit
- 作為一個全面的 PR 審查 Agent，包含這些功能：評論、測試、錯誤處理、類型設計、程式品質和程式簡化
commit-commands
- git 提交工作流程的指令，包括提交、推送和建立 PR
feature-dev
- 一個全面的功能開發 Agent，包含程式碼探索、架構設計與程式碼品質的審查等工作流程
security-guidance
- 檢查安全性的 Hook，當我們在編輯檔案時，會警告潛在的安全性問題，包括指令注入、跨站腳本 (XSS) 和不安全的程式碼模式

▼ 安裝成功後，可以再次輸入 /plugins 指令觀看你安裝的所有外掛，出現以下內容就表示安裝成功囉

使用 agent sdk dev plugins 進行開發

讓我們先看看 agent-sdk-dev 的提示詞內容，以確保沒有被寫入什麼奇怪的指令

▼ 從 Claude Code 的 GitHub 文件可以看到 agent-sdk-dev 包含了 2 個代理和 1 個命令文件

agent-sdk-verifier-py 和 agent-sdk-verifier-ts.md 分別表示 python 和 typescript 的 SDK，agent-sdk-dev plugin 在使用前會先詢問使用者偏好的開發語言是 python 還是 typescript？根據使用者的選擇會載入對應的文件

agent-sdk-verifier-py

使用此代理程式來驗證 Python Agent SDK 應用程式是否正確設定、遵循 SDK 最佳實踐和文件建議，並且已準備好進行部署或測試。此代理程式應在 Python Agent SDK 應用程式建立或修改之後被呼叫

agent-sdk-verifier-ts

使用此代理來驗證 TypeScript Agent SDK 應用程式是否正確設定、遵循 SDK 最佳實踐和文件建議，並且已準備好進行部署或測試。此代理應在 TypeScript Agent SDK 應用程式建立或修改之後被調用

new-sdk-app

透過 commands 的 new-sdk-app，幫我們建立設定 Claude Agent SDK 應用程式，在使用中 AI 會問我們多個問題，就是在這一份 markdown 中設定的

▼ 大致確認沒問題後，輸入 /plugin 選擇 /agent-sdk:dev:new-sdk-app 來建立自己的應用程式

▼ 期間我回應了他幾個問題，可以看到當我直接使用正體中文回應，他後續的回覆幾乎也會使用正體中文，所以不需要在提示詞特別強調要切換語言

▼ 所有問題回答完後，就會開始跑令我很 HIGH 的 Todos (身為一個 J 人，看到 Todos 就開心 😂)

▼ 讓我們執行檔案，來看他的完成度如何

完成度很不錯，功能完全正常，但是我覺得根本沒有參考 codepen 的設計稿照著做，而且我應該跟他說不要再用紫色 XXD。

▼ 鑑於上個版實在太醜了，所以我請他調整一下版面，這是後續修正的版本，修改後好很多了 XXD

如何安裝其他 Market Place 的 Plugin

除了 anthropics 官方提供的五個 Plugins 之外，也可以自由新增或下載其他使用者建立的 Plugins，下載的方式一開始從官方啦取時輸入的指令類似，這邊用 aitmpl.com 為例，如果你想要使用他們提供的 plugins，請在 claude code 輸入以下指令：

/plugin marketplace add https://github.com/davila7/claude-code-templates

▼ 再執行 /plugins 應該就能看到跟我一樣的畫面了，目前用了兩個 Git (marketplace) 的 Plugins

▼ 除了 aitmpl.com 外，我還發現一位帳號為 @jeremylongshore 的網友也有在做 claude-code-plugins，不過 stars 數量只有 17 個，想試用的朋友可以自行評估，會推薦是因為他的 plugins 數量好多 XXD

使用 Plugins 出現找不到 Sonnet 模型？

▼ 在使用 aitmpl.com 提供的 Plugins 時，我出現了以下錯誤訊息：API Error: 404 {"type":"error","error":{"type":"not_found_error","message":"model: sonnet"},"request_id":""}

這是因為在這次更新後，anthropics 官方有調整他們的模型名稱，而 aitmpl.com 的 markdown 文件都有指定模型為 sonnet，所以才會出現錯誤

目前 aitmpl.com 的 issue 顯示他還在調整處理，但如果你想要先使用，可以自己手動更新 markdown 文件，把 model 移除即可。

以我為例，我下載了 aitmpl.com 的 git-workflow plugins，所以我要編輯他的相關檔案：

# 我使用 cursor IDE 開啟這個資料夾，所以才在開頭輸入 cursor 指令，如果你沒有進行設定，可以手動開啟該目錄
cursor ~/.claude/plugins/marketplaces/claude-code-template

找到對應的 plugins 檔案後，移除 model: sonnet 這一行，存檔後再重新呼叫 plugins 就能正常使用了

小結

以上就是 Claude Code 的 Plugins 功能介紹分享。

其實 Plugins 並不是什麼新鮮玩意，他只是再把所有的工具包成一個新的工作流，我們不需要再手動切換指令，就能透過 Plugins 進行整合，非常適合用在團體協作與交接，也適合懶到極致的工程師朋友們 XXD。