claude-plugins.dev — Agent Skills Directory

Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>claude-plugins.dev — Agent Skills Directory</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<style>
  :root {
    --bg: #0b0f17;
    --surface: #141a26;
    --surface-2: #1b2230;
    --text: #e6edf6;
    --muted: #8b97a8;
    --accent: #6ea8fe;
    --border: rgba(255, 255, 255, 0.08);
    --radius: 16px;
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
  }

  body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(1200px 600px at 50% -10%, #15203a 0%, var(--bg) 60%);
    color: var(--text);
    font-family: "Inter", system-ui, -apple-system, "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 20px 60px rgba(0, 0, 0, 0.45);
    padding: 28px;
  }

  .eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(110, 168, 254, 0.12);
    border: 1px solid rgba(110, 168, 254, 0.25);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 14px;
  }

  h1 {
    margin: 0 0 10px;
    font-size: clamp(22px, 4vw, 28px);
    font-weight: 700;
    letter-spacing: -0.01em;
  }

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

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

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

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

  code {
    font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
    font-size: 13.5px;
    color: var(--text);
  }

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

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

  .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);
    padding: 12px 18px;
    border-radius: 12px;
    transition: transform 0.12s ease, filter 0.12s ease;
  }

  .cta:hover { filter: brightness(1.08); }
  .cta:active { transform: translateY(1px); }

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

  .arrow { font-size: 16px; }
</style>
</head>
<body>
  <main class="card">
    <span class="eyebrow">Claude Code (community)</span>
    <h1>claude-plugins.dev — Agent Skills Directory</h1>
    <p class="desc">
      A community directory where developers browse and install Agent Skills, plugins,
      and MCP servers for Claude Code and other AI coding tools.
    </p>

    <section>
      <h2>How to access</h2>
      <div class="access">
        <pre><code># Browse the directory
https://claude-plugins.dev/skills

# Use a Skill with Claude Code
.claude/skills/&lt;name&gt;/SKILL.md</code></pre>
      </div>
    </section>

    <section>
      <h2>Compatible with</h2>
      <div class="pills">
        <span class="pill">Claude Code</span>
        <span class="pill">MCP servers</span>
        <span class="pill">Cursor</span>
        <span class="pill">Agent Skills</span>
      </div>
    </section>

    <a class="cta" href="https://claude-plugins.dev/skills" target="_blank" rel="noopener">
      Open directory <span class="arrow" aria-hidden="true">&rarr;</span>
    </a>
  </main>
</body>
</html>

What it is

claude-plugins.dev is a community-run directory for the Claude Code ecosystem. Its Skills section catalogs Agent Skills — packaged instructions, scripts, and resources that extend what an AI coding agent can do — alongside plugins and MCP servers. Rather than shipping a single tool, the site is a discovery surface: you browse, search, and find the right extension to drop into your own setup.

How to access / install

Browse the directory in your browser:

https://claude-plugins.dev/skills

Each listing links back to its source repository. To use a Skill with Claude Code, you typically add it under your project or user skills directory (for example .claude/skills/<name>/) so the agent can load it on demand. Many entries are also distributable as plugins through a Claude Code plugin marketplace, or as MCP servers wired into your client’s MCP config.

Good for

Discovering ready-made Agent Skills instead of writing every workflow from scratch.
Finding MCP servers and plugins that are compatible with Claude Code and similar agentic tools.
Comparing community extensions before adding one to your project’s .claude/ setup.