Skip to main content
Every skill is a Markdown file with YAML frontmatter. Here is a complete example:
SKILL.md
---
name: react-component
version: 1.0.0
description: Create well-structured React components with TypeScript
tags: [react, typescript, frontend]
allowed-tools: [Bash, Read, Write]
---

# React component creation

## Instructions

1. Create a new file in the appropriate directory under `src/components/`
2. Use functional components with TypeScript
3. Define props as a named interface: `interface ComponentNameProps`
4. Export the component as a named export

## Constraints

- Never use `any` type; always define explicit types
- Keep components under 200 lines
- Co-locate styles, tests, and stories with the component
- Use composition over inheritance

## Verification

- [ ] Component renders without errors
- [ ] Props interface is exported
- [ ] Test file exists with at least one test
- [ ] No TypeScript errors

## Examples

### Input
"Create a Button component that supports primary and secondary variants"

### Output
A `src/components/Button/` directory containing:
- `Button.tsx`, the component
- `Button.test.tsx`, tests
- `index.ts`, re-export

​
Frontmatter fields

FieldTypeRequiredDescription
namestringYesUnique identifier (kebab-case)
versionsemverNoSkill version (stored in metadata sub-block, not a top-level field)
descriptionstringYesOne-line summary of what the skill does
tagsstring[]NoCategorization tags
authorstringNoSkill author
allowed-toolsstring[]NoClaude Code tool names the skill may use
triggersstring[]NoActivation phrases that invoke this skill
user-invocablebooleanNoWhether users can invoke directly via slash command

​
Sections

​
Instructions

The core of the skill. Write clear, numbered steps that tell the agent exactly what to do. Be specific; agents follow instructions literally.
Use imperative mood: “Create a file” not “You should create a file.”

​
Constraints

Rules the agent must follow. Constraints prevent common mistakes and enforce your team’s conventions.
Vague constraints like “write clean code” are not useful. Be specific: “Keep functions under 50 lines” or “Never use console.log in production code.”

​
Verification

A checklist the agent can use to validate its own output. Each item should be independently verifiable.

​
Examples

Concrete input/output pairs show the agent exactly what behavior you expect.

​
Multi-file skills

Complex skills can span multiple files in a directory:
react-component
SKILL.md
templates/component.tsx.template
templates/test.tsx.template
examples/Button.tsx
The SKILL.md file is the entry point. Additional files provide templates, examples, or reference material that the skill can point to.
Last modified on March 19, 2026