Skip to content

Building My First Claude Code Plugin

Published: at 

The Problem

I’ve been using Claude Code for a while now. It’s been my daily driver for development work, alongside other AI tools in my workflow.

But here’s the thing—over the last few months, I stopped paying attention to what Anthropic was shipping. Skills? Didn’t look into them. Plugins? No idea they existed.

Today I caught up. And I discovered something I’d been missing: plugins.

The idea clicked immediately. Everything I’d been building locally—custom commands, agents, configurations—was stuck in .claude/ folders per project. Plugins change that. You can package it up and share it across projects. Give Claude Code new abilities anywhere.

That’s when I decided to build one. A plugin that generates slash commands, skills, agents, and everything else I kept creating manually.

The Manual Workflow Was Painful

Before the plugin, creating a new command looked like this:

  1. Search the docs for the right frontmatter format
  2. Create .claude/commands/my-command.md
  3. Copy-paste a template
  4. Fill in the blanks
  5. Hope you got the structure right

Repeat for agents. Repeat for skills. Repeat for hooks.

10 minutes on boilerplate. 5 minutes on actual logic.

Same problem every time: too much manual work for something that should be instant.

The Solution: Claude Code Builder

I fixed this by building a plugin that generates everything for me.

Here’s what it includes:

CommandDescription
/create-skillGenerate model-invoked skills
/create-agentCreate specialized sub-agents
/create-commandAdd custom slash commands
/create-hookConfigure event-driven hooks
/create-mdGenerate CLAUDE.md files for project context
/create-output-styleCreate custom output styles
/create-pluginPackage your setup as a plugin

Each command handles the structure, frontmatter, and best practices. I just provide the name and description.

If you’re new to slash commands, check out my guide on Claude Code slash commands to understand how they work and why they’re powerful.

The Plugin Structure

Here’s the structure:

Command Files: Where the Magic Happens

Each command is a markdown file with frontmatter. Here’s the /create-skill command as an example:

---
description: Generate a new Claude Skill with proper structure and YAML frontmatter
argument-hint: [skill-name] [description]
---

# /create-skill

## Purpose
Generate a new Claude Skill with proper structure and YAML frontmatter using official documentation as reference

## Contract
**Inputs:**
- `$1` — SKILL_NAME (lowercase, kebab-case, max 64 characters)
- `$2` — DESCRIPTION (what the skill does and when to use it, max 1024 characters)
- `--personal` — create in ~/.claude/skills/ (default)
- `--project` — create in .claude/skills/

**Outputs:** `STATUS=<CREATED|EXISTS|FAIL> PATH=<path>`

## Instructions

1. **Validate inputs:**
   - Skill name: lowercase letters, numbers, hyphens only
   - Description: non-empty, max 1024 characters

2. **Determine target directory:**
   - Personal (default): `~/.claude/skills/{{SKILL_NAME}}/`
   - Project: `.claude/skills/{{SKILL_NAME}}/`

3. **Generate SKILL.md using this template:**
   [template content here...]

💪 Key Insight

Commands are just instructions for Claude. Write them like you’re teaching a junior developer the exact steps to follow. Good prompt engineering principles apply here too.

Here’s what the plugin generates when you run a command:

Example output showing a generated skill file with proper structure and frontmatter
The plugin creates properly structured files with all the boilerplate handled

Publishing to GitHub

Once I had it working locally, publishing was straightforward:

  1. Push to GitHub
  2. Users add the marketplace: /plugin marketplace add alexanderop/claude-code-builder
  3. Users install: /plugin install claude-code-builder@claude-code-builder

No npm, no build step. Just GitHub.

Try It Yourself

Ready to stop copy-pasting Claude Code boilerplate?

Step 1: Install the plugin

/plugin install claude-code-builder@claude-code-builder

Step 2: Verify installation

Check that the plugin is loaded:

/plugins

You should see claude-code-builder in the list.

Claude Code plugins list showing claude-code-builder installed
The plugin appears in your installed plugins list

Step 3: Use the new commands

You now have access to seven new commands. Try creating your first skill:

/create-skill commit-helper "Generate clear commit messages; use when committing"
All seven commands available in Claude Code after installing the plugin
Seven new commands at your fingertips

That’s it. You’re now equipped to generate skills, agents, commands, and more—without touching the docs.

What’s Next?

I’m using this daily. Every time I think “I wish Claude could…”, I run /create-skill instead of Googling docs.

Right now, I’m focused on workflow optimization: building Vue applications faster with Claude Code.

The question I’m exploring: How do I teach Claude Code to write good Vue applications?

I’m working on:

It’s not just about speed. It’s about teaching Claude Code the way I think about development.

Building tools that build tools. That’s where it gets fun.

Stay Updated!

Subscribe to my newsletter for more TypeScript, Vue, and web dev insights directly in your inbox.

  • Background information about the articles
  • Weekly Summary of all the interesting blog posts that I read
  • Small tips and trick
Subscribe Now