component-development

Create and configure Claude Code plugin components including commands, hooks, agents, and MCP servers.

Updated Mar 19, 2026
One-click install
npx skills add https://github.com/karimStekelenburg/k3m-marketplace --skill component-development-karimstekelenburg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-development
Source: https://github.com/karimStekelenburg/k3m-marketplace/tree/main/plugins/plugin-dev/skills/component-development
Command: npx skills add https://github.com/karimStekelenburg/k3m-marketplace --skill component-development-karimstekelenburg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building Claude Code plugin components requires knowing the exact frontmatter fields, file formats, and configuration rules for commands, hooks, agents, MCP servers, and output styles, and getting any of these wrong produces broken or non-loading plugins. ## Core Features & Use Cases - Component Scaffolding Guidance: Provides the required structure and frontmatter for slash commands, hooks, subagents, MCP server definitions, and output styles. - Live Documentation Grounding: Mandates fetching current Claude Code docs via firecrawl before answering capability or syntax questions, preventing outdated answers. - Portability Rules: Enforces use of ${CLAUDE_PLUGIN_ROOT} and marketplace auto-discovery conventions so plugins work across environments. - Use Case: When asked to "add a PreToolUse hook" or "create a subagent", the Skill fetches the latest docs and produces a correctly formatted hooks.json entry or agent markdown file. ## Quick Start Ask the assistant to create a slash command or add a PreToolUse hook to your plugin and it will fetch the current docs and generate the component.

Frequently Asked Questions about component-development

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a slash command for Claude Code?▼

Slash commands are markdown files placed in the commands/ directory with optional YAML frontmatter such as description, allowed-tools, model, and argument-hint. They support $ARGUMENTS, positional args, @file includes, and inline bash execution.

How do I add a PreToolUse hook to a Claude Code plugin?▼

Define the hook in hooks/hooks.json wrapped in a {"hooks": {EVENT: [...]}} structure. PreToolUse hooks can return a permissionDecision of allow, deny, or ask, and should use ${CLAUDE_PLUGIN_ROOT} for portable paths.

What frontmatter is required for a Claude Code subagent?▼

Agent markdown files require name, description, model, and color frontmatter fields, with optional fields like effort, maxTurns, disallowedTools, tools, initialPrompt, and hooks. The description uses third-person with example blocks for triggering.

Can I configure an MCP server inside a Claude Code plugin?▼

Yes, define servers in a .mcp.json file using stdio for local processes or http for remote servers. Use ${CLAUDE_PLUGIN_ROOT} in server commands and verify loading with the /mcp command.

Why are my hook changes not taking effect in Claude Code?▼

Hooks load at session start, so any modification to hooks.json requires restarting the session. Verify the JSON structure wraps events correctly and that paths use ${CLAUDE_PLUGIN_ROOT}.