✦ StealThis .dev
Plugins Easy

Claude Code Skills (Slash Commands, Hooks, Agents)

Anthropic's official Claude Code Skills docs covering slash commands, hooks, and subagents that extend the CLI with reusable, project-scoped capabilities.

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>Claude Code Skills — Info Card</title>
<style>
  :root {
    --bg: #0b0f17;
    --surface: #141a26;
    --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", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.55;
  }
  .card {
    width: 100%;
    max-width: 640px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  }
  .eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(110, 168, 254, 0.12);
    border: 1px solid rgba(110, 168, 254, 0.28);
    padding: 4px 10px;
    border-radius: 999px;
  }
  h1 {
    margin: 16px 0 8px;
    font-size: 1.6rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  .desc {
    margin: 0 0 24px;
    color: var(--muted);
    font-size: 0.98rem;
  }
  .section-label {
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .access {
    margin-bottom: 24px;
  }
  pre {
    margin: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    overflow-x: auto;
  }
  code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.86rem;
    color: var(--text);
  }
  .url {
    display: block;
    margin-bottom: 10px;
    word-break: break-all;
    color: var(--accent);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.86rem;
    text-decoration: none;
  }
  .url:hover { text-decoration: underline; }
  .pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
  }
  .pill {
    font-size: 0.78rem;
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    padding: 5px 12px;
    border-radius: 999px;
  }
  .cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #0b0f17;
    background: var(--accent);
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.15s ease;
  }
  .cta:hover { filter: brightness(1.08); }
  .cta:active { transform: translateY(1px); }
  a:focus-visible,
  .cta:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
  }
  .arrow { font-size: 1.1em; line-height: 1; }
</style>
</head>
<body>
  <main class="card">
    <span class="eyebrow">Claude Code (official)</span>
    <h1>Claude Code Skills (Slash Commands, Hooks, Agents)</h1>
    <p class="desc">
      Anthropic's official docs for packaging reusable capabilities — slash commands,
      hooks, and subagents — that extend the Claude Code CLI per project or globally.
    </p>

    <div class="access">
      <p class="section-label">How to access</p>
      <a class="url" href="https://code.claude.com/docs/en/skills" target="_blank" rel="noopener">
        https://code.claude.com/docs/en/skills
      </a>
      <pre><code># A skill lives in a SKILL.md file:
#   .claude/skills/&lt;name&gt;/SKILL.md   (project)
#   ~/.claude/skills/&lt;name&gt;/SKILL.md  (global)

# Invoke it from inside Claude Code:
/&lt;skill-name&gt;</code></pre>
    </div>

    <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">Hooks</span>
        <span class="pill">Subagents</span>
        <span class="pill">MCP</span>
      </div>
    </div>

    <a class="cta" href="https://code.claude.com/docs/en/skills" target="_blank" rel="noopener">
      Read the docs <span class="arrow" aria-hidden="true">&rarr;</span>
    </a>
  </main>
</body>
</html>

What it is

The official Anthropic documentation for Claude Code Skills — packaged, reusable capabilities you can drop into a project or your global config. Skills bundle instructions, slash commands, hooks, and subagents so Claude Code can perform specialized tasks on demand. It is the canonical reference for how to author, install, and trigger skills, rather than a single plugin you download.

How to access / install

  • Docs: https://code.claude.com/docs/en/skills
  • A skill lives in a SKILL.md file under .claude/skills/<name>/ (project) or ~/.claude/skills/<name>/ (global).
  • Invoke a skill from inside Claude Code with its slash command, e.g.:
/<skill-name>
  • List or manage installed skills and related config through the Claude Code CLI and your .claude/ directory.

Good for

  • Developers who want to extend Claude Code with repeatable workflows.
  • Teams standardizing slash commands, hooks, and subagents across a repo.
  • Anyone learning the authoring conventions for skills before publishing or sharing them.