StealThis .dev

awesome-claude-code-plugins

A community curated directory listing plugins, slash commands, and skills that extend Claude Code for developers who want to discover and install integrations.

markdown
Targets: HTML

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>awesome-claude-code-plugins</title>
  <style>
    :root {
      --bg: #0b0f17;
      --surface: #141a26;
      --surface-2: #1b2332;
      --text: #e6edf6;
      --muted: #8b97a8;
      --accent: #6ea8fe;
      --border: rgba(255, 255, 255, 0.08);
      --radius: 16px;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: var(--bg);
      color: var(--text);
      font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif;
      line-height: 1.5;
    }

    .card {
      width: 100%;
      max-width: 640px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
      padding: 32px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--accent);
      margin: 0 0 14px;
    }

    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 12px var(--accent);
    }

    h1 {
      margin: 0 0 14px;
      font-size: 28px;
      line-height: 1.2;
      letter-spacing: -0.01em;
      word-break: break-word;
    }

    .desc {
      margin: 0 0 24px;
      color: var(--muted);
      font-size: 15.5px;
    }

    .section-label {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 0 0 10px;
    }

    .access {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 24px;
    }

    .access pre {
      margin: 0;
      overflow-x: auto;
    }

    .access code {
      font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
        monospace;
      font-size: 13.5px;
      color: var(--text);
      white-space: pre;
    }

    .access code .comment {
      color: var(--muted);
    }

    .access code .accent {
      color: var(--accent);
    }

    .pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 28px;
    }

    .pill {
      font-size: 12.5px;
      font-weight: 500;
      color: var(--text);
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 6px 12px;
    }

    .cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      justify-content: center;
      text-decoration: none;
      font-weight: 600;
      font-size: 15px;
      color: #0b0f17;
      background: var(--accent);
      border-radius: 12px;
      padding: 14px 20px;
      transition: transform 0.12s ease, box-shadow 0.12s ease,
        filter 0.12s ease;
    }

    .cta:hover {
      filter: brightness(1.06);
      box-shadow: 0 8px 24px rgba(110, 168, 254, 0.35);
    }

    .cta:focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 3px;
    }

    .cta svg {
      width: 18px;
      height: 18px;
    }

    @media (max-width: 480px) {
      .card {
        padding: 24px;
      }
      h1 {
        font-size: 23px;
      }
    }
  </style>
</head>
<body>
  <main class="card">
    <p class="eyebrow">Claude Code (community)</p>
    <h1>awesome-claude-code-plugins</h1>
    <p class="desc">
      A community-curated directory of plugins, slash commands, and skills that
      extend Claude Code — a single index to discover, compare, and install
      integrations for the CLI coding agent.
    </p>

    <p class="section-label">How to access</p>
    <div class="access">
      <pre><code><span class="comment"># Browse the directory on GitHub</span>
https://github.com/ccplugins/awesome-claude-code-plugins

<span class="comment"># Or clone it locally</span>
<span class="accent">git clone</span> https://github.com/ccplugins/awesome-claude-code-plugins.git

<span class="comment"># Install a listed plugin from inside Claude Code</span>
<span class="accent">/plugin install</span> &lt;plugin-name&gt;</code></pre>
    </div>

    <p class="section-label">Compatible with</p>
    <div class="pills">
      <span class="pill">Claude Code</span>
      <span class="pill">Slash commands</span>
      <span class="pill">Skills</span>
      <span class="pill">MCP servers</span>
    </div>

    <a
      class="cta"
      href="https://github.com/ccplugins/awesome-claude-code-plugins"
      target="_blank"
      rel="noopener"
    >
      <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
        <path
          d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
        />
      </svg>
      View on GitHub
    </a>
  </main>
</body>
</html>

What it is

awesome-claude-code-plugins is a community-maintained “awesome list” — a curated directory that points developers to plugins, slash commands, skills, and related integrations built for Claude Code, Anthropic’s official CLI coding agent. Rather than shipping code of its own, it acts as a discovery hub: a single Markdown index that links out to the individual projects, so you can browse what the ecosystem offers and jump straight to each plugin’s repository.

It belongs to the broader Claude Code community ecosystem and is hosted on GitHub under the ccplugins organization.

How to access / install

The directory itself is a GitHub repository — open it in your browser to read the list:

https://github.com/ccplugins/awesome-claude-code-plugins

To explore it locally (handy for grepping link targets or keeping an offline copy):

git clone https://github.com/ccplugins/awesome-claude-code-plugins.git
cd awesome-claude-code-plugins

The entries link to standalone plugins. Each linked project documents its own install steps; most Claude Code plugins are added from within the CLI, for example:

# inside Claude Code
/plugin install <plugin-name>

Good for

  • Discovering plugins, skills, and slash commands without scouring GitHub by hand.
  • Comparing community tooling before committing to an integration.
  • Staying current with the Claude Code ecosystem as new entries are submitted.
  • Maintainers looking to surface their own plugin to a wider audience via a pull request.