Get the FREE Ultimate OpenClaw Setup Guide →

claude-code-components

npx machina-cli add skill chris-hendrix/claudehub/claude-code-components --openclaw
Files (1)
SKILL.md
8.0 KB

Claude Component Authoring

Guidelines for creating Claude Code components. All components work via prompt injection - they add instructions to Claude's context.

These components can be used in:

  • Project-level configurations (.claude/ directory)
  • Plugins (distributed as packages)
  • Standalone setups

Quick Reference

ComponentPurposeInvocationCan ReferenceLocationDetails
SkillDomain knowledgeClaude matches context → injects knowledgeOther skills, CLI/MCP tools.claude/skills/references/skills.md
Slash CommandUser-invoked actionsUser types /command-nameSkills, agents.claude/commands/references/commands.md
AgentAutonomous specialistsClaude matches context → spawns isolated worker via Task toolSkills.claude/agents/references/agents.md
HookEvent-driven automationSystem triggers script or prompt on eventsN/Ahooks/hooks.jsonreferences/hooks.md

Component Relationships

Understanding how components interact is key to effective design:

Hierarchy:

┌─────────────────────────────────────────────┐
│         Component Hierarchy                  │
│                                              │
│  Slash Commands ──uses──> Skills ──references──> Skills
│        │                     ↑                │
│        │                     │                │
│        └──spawns──> Agents                   │
│                                              │
│  Hooks (standalone, event-driven)           │
└─────────────────────────────────────────────┘

Cross-Referencing Rules:

  • Skills are foundational - they provide domain knowledge and methodology. Skills may reference other skills or document external CLI/MCP tools, but should never reference slash commands or agents.
  • Slash Commands orchestrate skills and spawn agents. If you find yourself writing detailed methodology in a slash command, that content belongs in a skill.
  • Agents use skills for methodology. Agents are spawned by slash commands or Claude's context matching, and they consume skills but never reference slash commands.
  • Hooks are standalone and event-driven - they don't follow the hierarchy.

When to Use Each Component:

  • Use a Skill when you need to teach Claude how to think about a domain - principles, patterns, and decision frameworks
  • Use a Slash Command when you need a user-invoked action that follows specific steps
  • Use an Agent when you need an autonomous specialist to perform work in isolation
  • Use a Hook when you need automation triggered by system events

Naming Conventions

Universal Rules:

  • Use lowercase with hyphens (e.g., my-component-name)
  • Keep names concise and descriptive
  • Avoid acronyms unless widely recognized (e.g., pr, api are fine; tkt for ticket or issue is not)
  • Length: Aim for 3-50 characters, prioritizing clarity

Component-Specific Patterns:

ComponentPatternLitmus TestExamples (Good → Bad)
Skills{gerund} or tool name"Help me with {name}" sounds naturalplanningplan<br>writing-documentationdocumentation<br>graphitegraphite-commands
Slash Commands{verb} or {verb-noun}Could follow "please..."commitcommitter<br>create-prpr-creation<br>describe-prpr
Agents{noun-role}Could say "the {name}" or "ask the {name}"codebase-analyzeranalyze-codebase<br>code-reviewerreview<br>pattern-finderpatterns

Writing Best Practices

Conciseness: Claude is smart - only add context Claude doesn't already have. Challenge each paragraph: "Does this justify its token cost?"

Voice and Structure:

  • Use imperative form in the body, not second person
  • Keep main files under 500 lines (skills)
  • Commands should be concise action lists

Progressive Disclosure: For large skills, use a references/ subdirectory to split out detailed content. This is optional for smaller skills. Keep references one level deep - avoid nested file chains.

Description Formats by Component:

  • Skills: Use third-person ("This skill should be used when..."), include what the skill does AND when to use it. Listing activities is fine (e.g., "including creating, updating, and deleting X").
  • Slash Commands: Keep brief - shows in command list
  • Agents: Start with "Use this agent when...", include example invocations

Tool Reference Documentation: Skills are the ideal place to document external tools - both CLI tools (gh, gt, npm) and MCP tools (mcp__linear__*, mcp__slack__*). This includes tool names, parameters, and usage patterns. This is reference documentation, not to be confused with slash commands.

Plugin Directory Structure

When creating plugins, organize directories to clearly distinguish component directories from supporting resources:

Component directories (loaded by Claude Code):

  • commands/ - Slash commands
  • skills/ - Skills
  • agents/ - Agents (if needed)
  • hooks/ - Hooks

Supporting resources (not components):

  • .support/ - Non-component resources
    • .support/scripts/ - Shell scripts
    • .support/templates/ - Template files
    • .support/docs/ - Additional documentation

Example structure:

my-plugin/
├── .claude-plugin/
│   └── manifest.json
├── .support/
│   ├── scripts/
│   │   └── setup.sh
│   └── templates/
│       └── template.md
├── commands/
│   ├── deploy.md
│   └── test.md
├── skills/
│   └── my-skill/
│       ├── SKILL.md
│       └── references/
│           └── patterns.md
└── hooks/
    └── hooks.json

Why .support/?

  • Prefixing with a dot makes it clear these are not Claude Code components
  • Nesting under a single directory keeps the plugin root clean
  • Component directories (commands/, skills/, etc.) are immediately visible

Antipatterns

Universal:

  • Violating component hierarchy: Skills referencing slash commands/agents; slash commands containing detailed methodology that belongs in skills

Skills:

  • Referencing Slash Commands or Agents: Skills are foundational knowledge - they should never tell Claude to "run /command" or "spawn the X agent". Slash commands and agents use skills, not the other way around. (CLI and MCP tool references are fine - these are reference documentation.)

Slash Commands:

  • Script-Heavy Commands: A slash command with multiple bash scripts embedded is an antipattern. If the command is mostly shell logic, it should just be a shell script instead.
  • Over-Scripted Questions: Avoid scripting every question Claude should ask. Key confirmation points are fine (e.g., "Confirm with user before committing"), but trust Claude to gather missing context naturally.
  • Methodology in Commands: Process steps should be actions, not methodology. If a step explains how to think about something, move it to a skill. Note: Output actions ("Show", "Display", "Report") and execution directives ("in parallel", "spawn agent per X", "use Task tool") are valid—these control orchestration, not reasoning.

Source

git clone https://github.com/chris-hendrix/claudehub/blob/main/.claude/skills/claude-code-components/SKILL.mdView on GitHub

Overview

This skill provides naming conventions, structure guidelines, best practices, and antipatterns for creating and modifying Claude Code components. It covers Skills, Slash Commands, Agents, and Hooks, and explains how they should reference each other within the .claude directory. All components operate via prompt injection to augment Claude's context.

How This Skill Works

It defines component types (Skill, Slash Command, Agent, Hook), where they live, and how they reference one another. It enforces naming rules, cross-referencing practices, and the appropriate use of each component to build coherent Claude Code architectures. Content emphasizes that Skills teach domain knowledge, Slash Commands orchestrate actions, Agents perform isolated work, and Hooks trigger event-driven automation.

When to Use It

  • Use a Skill when you need to teach Claude how to think about a domain, including principles, patterns, and decision frameworks.
  • Use a Slash Command when you need a user-invoked action that follows specific steps and orchestrates skills.
  • Use an Agent when you require an autonomous specialist to perform work in isolation using skills for methodology.
  • Use a Hook when you need automation triggered by system events, independent of other components.
  • Refer to the naming, structure, and antipattern guidelines to ensure consistent component design across projects

Quick Start

  1. Step 1: Identify which component types you need (Skill, Slash Command, Agent, Hook) and align them with the domain task.
  2. Step 2: Place components under the appropriate .claude directory and name them using lowercase hyphenated patterns.
  3. Step 3: Add cross-references and follow the naming and relationship rules outlined in the SKILL.md

Best Practices

  • Start with a Skill to codify domain knowledge and methodologies; keep detailed methodology out of Slash Commands.
  • Name components using lowercase hyphenated identifiers and keep length between 3 and 50 characters.
  • Ensure Skills reference other skills or external CLI/MCP tools, but do not reference slash commands or agents.
  • Follow the Component Relationships guidelines to clarify how Skills, Slash Commands, Agents, and Hooks interact.
  • Document cross-references and maintain references using the references files and Quick Reference guidance

Example Use Cases

  • Create a Skill named data-validation that codifies domain-specific validation rules and references related skills when needed.
  • Create a Slash Command generate-report that orchestrates data-validation and data-aggregation skills to produce a report.
  • Create an Agent qa-agent that uses skills to perform quality checks without embedding command logic.
  • Create a Hook on-user-registered that triggers onboarding automation when a new user signs up.
  • Document component relationships in references/ files to make cross-links explicit and maintainable

Frequently Asked Questions

Add this skill to your agents
Sponsor this space

Reach thousands of developers