#Plugins

#Plugins Overview

Claude Code's plugin system allows you to extend its functionality by adding new tools, commands, and integrations.

What can plugins do?

• 🔧 Add custom tools
• 📦 Integrate third-party services
• 🎨 Customize output formats
• ⚡ Extend command set

#Installing Plugins

#Install from npm

# Install plugin
npm install -g @claude-code/plugin-name

# Or use claude CLI
claude plugin install plugin-name

#Configure Plugins

Plugins are managed through marketplaces; use the /plugin command inside a session to install and enable them. You can also declare them in ~/.claude/settings.json:

{
  "plugins": {
    "plugin-name": {
      "enabled": true,
      "config": {
        "option1": "value1",
        "option2": "value2"
      }
    }
  }
}

#View Installed Plugins

claude plugin list

Installed plugins:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✓ context7 (v1.0.0) - Enhanced documentation
✓ prettier (v1.2.0) - Code formatting
✓ eslint (v2.0.0) - Linting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

#Popular Plugins

#1. Context7 Plugin

Function: Enhanced documentation access

Install:

claude plugin install context7

Usage:

You: how to use React 18 useTransition?

Claude: [Using Context7 plugin]
Fetching latest React documentation...

useTransition allows you to mark state updates as transitions...

#2. Prettier Plugin

Function: Automatic code formatting

Configure:

{
  "plugins": {
    "prettier": {
      "enabled": true,
      "config": {
        "semi": true,
        "singleQuote": true,
        "tabWidth": 2
      }
    }
  }
}

Usage:

You: format src/app.js

Claude: [Using Prettier plugin]
✓ Formatted src/app.js
  - Fixed 12 formatting issues

#3. ESLint Plugin

Function: Code quality checking

Usage:

You: check code quality issues

Claude: [Using ESLint plugin]
Found 5 issues:
  ⚠ src/api.js:23 - Unused variable 'data'
  ⚠ src/utils.js:45 - Missing return statement
  ...

#Developing Custom Plugins

#Plugin Structure

// my-plugin/index.js
module.exports = {
  name: 'my-plugin',
  version: '1.0.0',
  description: 'My custom plugin',

  // Plugin initialization
  async init(context) {
    console.log('Plugin initialized');
  },

  // Register tools
  tools: {
    'my-tool': {
      description: 'My custom tool',
      async execute(params) {
        // Tool logic
        return { result: 'success' };
      }
    }
  },

  // Register commands
  commands: {
    'my-command': {
      description: 'My custom command',
      async handler(args) {
        // Command logic
      }
    }
  }
};

#package.json

{
  "name": "@claude-code/plugin-my-plugin",
  "version": "1.0.0",
  "description": "My custom Claude Code plugin",
  "main": "index.js",
  "keywords": ["claude-code", "plugin"],
  "peerDependencies": {
    "@claude-code/sdk": "^1.0.0"
  }
}

#Publish Plugin

# Test plugin
npm link

# Publish to npm
npm publish

#Plugin Management

#Enable/Disable Plugins

# Disable plugin
claude plugin disable plugin-name

# Enable plugin
claude plugin enable plugin-name

#Update Plugins

# Update single plugin
claude plugin update plugin-name

# Update all plugins
claude plugin update-all

#Uninstall Plugins

claude plugin uninstall plugin-name

#Summary

In this chapter, we learned:

• ✅ Plugin system overview
• ✅ How to install and configure plugins
• ✅ Popular plugins introduction
• ✅ Develop custom plugins
• ✅ Plugin management operations

Key Takeaways:

• Plugins extend Claude Code functionality
• Can install from npm or develop your own
• Flexible configuration options
• Easy to manage and update

Next Step: Continue with Agent Skills.