webapp-starter

Claude Code Marketplace Boilerplate

A minimal boilerplate template for creating and distributing Claude Code plugins via the marketplace. This project provides a structured foundation for building custom commands, agents and hooks — tools that extend Claude Code's capabilities.

Overview

This boilerplate helps you create professional Claude Code plugins with:

• Custom Commands: Slash commands for common workflows
• Specialized Agents: AI agents optimized for specific tasks
• Skills: Modular knowledge packages with workflows and bundled resources
• Event Hooks: Automated responses to IDE events
• MCP Integration: Model Context Protocol server configuration
• Marketplace Ready: Pre-configured metadata for distribution

Project Structure

.
├── .claude-plugin/
│   └── marketplace.json          # Marketplace configuration
├── plugins/
│   └── webapp-starter/           # Example plugin
│       ├── .claude-plugin/
│       │   └── plugin.json       # Plugin metadata
│       ├── agents/
│       │   └── webapp-uidesigner.md
│       ├── commands/
│       │   ├── webapp-starter.md
│       │   └── generate-random-personas.md
│       ├── skills/
│       │   └── skill-creator/
│       │       └── SKILL.md      # Skill definition
│       ├── hooks/
│       │   └── hooks.json        # Event hooks configuration
│       └── .mcp.json            # MCP servers configuration
└── README.md

Getting Started

1. Clone the Repository

git clone https://github.com/halans/cc-marketplace-boilerplate
cd cc-marketplace-boilerplate

2. Configure Your Marketplace

Edit .claude-plugin/marketplace.json:

{
  "name": "your-marketplace-name",
  "owner": {
    "name": "Your Name",
    "email": "[email protected]",
    "url": "https://github.com/yourusername"
  },
  "metadata": {
    "description": "Your marketplace description",
    "version": "1.0.0"
  },
  "plugins": [...]
}

3. Create Your Plugin

Use the included webapp-starter plugin as a template:

1. Copy the plugin directory structure
2. Update plugin metadata in .claude-plugin/plugin.json
3. Add your custom commands, agents, skills, and hooks
4. Register the plugin in marketplace.json

Plugin Components

Commands

Commands are slash commands that users can invoke in Claude Code. Create a markdown file in commands/:

---
description: Your command description
---

Your command prompt and instructions here.

Usage: /your-command

Agents

Agents are specialized AI assistants for specific tasks. Create a markdown file in agents/:

---
name: agent-name
description: Agent description
model: sonnet
---

Your agent's system prompt and behavior instructions.

Skills

Skills are modular packages that extend Claude's capabilities with specialized knowledge, workflows, and tool integrations. They transform Claude into a domain-specific expert by providing procedural knowledge and reusable resources.

Create a skill directory with a SKILL.md file:

skills/
└── skill-name/
    ├── SKILL.md (required)
    ├── scripts/ (optional)
    ├── references/ (optional)
    └── assets/ (optional)

SKILL.md structure:

---
name: skill-name
description: When and why this skill should be used
---

# Skill Name

Instructions and workflows for Claude to follow when using this skill.

## Usage

Detailed guidance on how to apply this skill.

Optional bundled resources:

• scripts/: Executable code for deterministic tasks (Python, Bash, etc.)
• references/: Documentation loaded as needed (schemas, API docs, policies)
• assets/: Files used in output (templates, icons, boilerplate code)

Hooks

Hooks automate responses to events like tool usage. Configure in hooks/hooks.json:

{
  "PostToolUse": [
    {
      "matcher": "Write|Edit",
      "hooks": [
        {
          "type": "command",
          "command": "echo 'Hook executed!'"
        }
      ]
    }
  ]
}

MCP Servers

Integrate Model Context Protocol servers via .mcp.json:

For example on Linux/Mac, using npx to run a package:

{
  "mcpServers": {
    "[server-name]": {
      "command": "npx",
      "args": ["[package-name]", "args"]
    }
  }
}

On Windows, using npx to run a package:

{
  "mcpServers": {
    "[server-name]": {
      "command": "cmd",
      "args": ["/c", "npx","[package-name]", "args"]
    }
  }
}

Example Plugin: webapp-starter

The included example plugin demonstrates:

• Commands:

  • /webapp-starter - Create a basic SPA website structure example command
  • /generate-random-personas - Generate random user personas example command

• Agents:

  • webapp-uidesigner - UI design and styling specialist example agent