Modul master Level 3 VibeKoding: Claude Code Skills: Membungkus Logika Jadi Modul.Modul master Level 3 VibeKoding: Claude Code Skills: Membungkus Logika Jadi Modul.
Claude Code Skills is a feature that packages specialized knowledge, workflows, and best practices into reusable "skill packs."Claude Code Skills is a feature that packages specialized knowledge, workflows, and best practices into reusable "skill packs."
You can imagine Skills as "skill books" equipped for Claude. When you need it to complete a specific task, you no longer have to explain the requirements over and over again. Instead, it can directly carry out the work according to the standards defined in advance by the Skill.You can imagine Skills as "skill books" equipped for Claude. When you need it to complete a specific task, you no longer have to explain the requirements over and over again. Instead, it can directly carry out the work according to the standards defined in advance by the Skill.
Before Skills existed, using Claude Code had several problems:Before Skills existed, using Claude Code had several problems:
Skills solve these problems and turn Claude into an "experienced team member" - it knows your project conventions, workflows, and best practices.Skills solve these problems and turn Claude into an "experienced team member" - it knows your project conventions, workflows, and best practices.
------
Skills are becoming a must-have capability for AI engineers:Skills are becoming a must-have capability for AI engineers:
------
Now that you understand the value of Skills, let's try them right away. This section will take you through installing your first Skill and completing a few interesting hands-on tasks so you can quickly build intuition.Now that you understand the value of Skills, let's try them right away. This section will take you through installing your first Skill and completing a few interesting hands-on tasks so you can quickly build intuition.
find-skills (strongly recommended)Step 1: Install find-skills (strongly recommended)Before you start using Skills, it is strongly recommended that you install find-skills first. It is the "ultimate skill search tool" in the AI Agent world and already has 60K+ subscriptions.Before you start using Skills, it is strongly recommended that you install find-skills first. It is the "ultimate skill search tool" in the AI Agent world and already has 60K+ subscriptions.
What is find-skills?What is find-skills?
Simply put, find-skills is like an "app store search engine" for AI Agents. When you need to complete a task but do not have a suitable local Skill, it will automatically search for and recommend the most appropriate one.Simply put, find-skills is like an "app store search engine" for AI Agents. When you need to complete a task but do not have a suitable local Skill, it will automatically search for and recommend the most appropriate one.
Install find-skills:Install find-skills:
bash npx skills add vercel-labs/skills@find-skills -g -y
After installation, you can directly tell Claude what you need, and it will use find-skills to search for relevant skills automatically.After installation, you can directly tell Claude what you need, and it will use find-skills to search for relevant skills automatically.
Example usage:Example usage:
text I need to optimize the performance of a React component. Help me find what skills I can use.
Claude will search through find-skills, then tell you which relevant skills it found so that you can choose one to install.Claude will search through find-skills, then tell you which relevant skills it found so that you can choose one to install.
Why install find-skills first?Why install find-skills first?
Before find-skills:Before find-skills:
After find-skills:After find-skills:
Note for Windows users: the official version has limited Windows support. The community has made a Windows-compatible version that supports CMD and PowerShell and adds Chinese-language search.Note for Windows users: the official version has limited Windows support. The community has made a Windows-compatible version that supports CMD and PowerShell and adds Chinese-language search.
Download the Windows version: [github.com/tongbei821/customize-skills](https://github.com/tongbei821/customize-skills/blob/main/findskills/SKILL.md)Download the Windows version: [github.com/tongbei821/customize-skills](https://github.com/tongbei821/customize-skills/blob/main/findskills/SKILL.md)
Installation steps:Installation steps:
SKILL.mdDownload the Windows version of SKILL.mdC:/Users/your-username/.agents/skills/find-skillsReplace the file in C:/Users/your-username/.agents/skills/find-skillsRelated links:Related links:
After installing find-skills, let's use it to search for and install a fun first Skill: the Remotion video creation tool.After installing find-skills, let's use it to search for and install a fun first Skill: the Remotion video creation tool.
find-skills to search for RemotionStep 1: Use find-skills to search for RemotionType this in Claude Code:Type this in Claude Code:
text Help me find skills related to Remotion. I want to make videos.
Claude will search via find-skills and recommend remotion-dev/skills.Claude will search via find-skills and recommend remotion-dev/skills.
bash npx skills add remotion-dev/skills -g
Remotion is a framework for making videos with React code. After installing this Skill, you can ask Claude in natural language to help you write video code.Remotion is a framework for making videos with React code. After installing this Skill, you can ask Claude in natural language to help you write video code.
Task 1: Make a cool animated text videoTask 1: Make a cool animated text video
text Use Remotion to make a video: - 1920x1080, 5 seconds - A line of text "Hello World" flies in from the left - With rotation and scaling effects at the same time - The background is a gradient
Claude will generate complete Remotion code, and you can run it to see the animation.Claude will generate complete Remotion code, and you can run it to see the animation.
Task 2: Make a data visualization videoTask 2: Make a data visualization video
text Make a 10-second video showing data growth: - Start with a bar chart - The bars grow one by one with animation - Numbers count upward - At the end, show large text saying "300% growth"
Task 3: Make a multi-scene product demo videoTask 3: Make a multi-scene product demo video
text Make a product demo video with three scenes: Scene 1: Logo fades in, 2 seconds Scene 2: Product features appear one by one, 3 seconds Scene 3: CTA button pops up, 2 seconds Use smooth transitions between each scene
Run the code:Run the code:
The code Claude generates is a complete Remotion project. You can:The code Claude generates is a complete Remotion project. You can:
npx create-video my-videoCreate a new project: npx create-video my-videonpm startRun a preview: npm startnpm run buildRender the video: npm run build------
find-skills to solve "the frontend looks ugly and feels slow"The Second Skill: Use find-skills to solve "the frontend looks ugly and feels slow"Directly tell Claude your high-level need:Directly tell Claude your high-level need:
text My website looks outdated and loads slowly. Help me find what skills I can use.
Or make it a bit more specific:Or make it a bit more specific:
text I want the frontend to look better and stop being so laggy.
find-skillsStep 2: Claude will search with find-skillsClaude will search the skills.sh database via find-skills and recommend related skills. For a requirement like "make it look better + reduce lag," it will recommend:Claude will search the skills.sh database via find-skills and recommend related skills. For a requirement like "make it look better + reduce lag," it will recommend:
anthropics/skills/frontend-design (official skill)anthropics/skills/frontend-design (official skill)
This skill is specifically designed to solve the problem of AI-generated interfaces that "look plain and generic," helping Claude design:This skill is specifically designed to solve the problem of AI-generated interfaces that "look plain and generic," helping Claude design:
Install:Install:
bash npx skills add anthropics/skills/frontend-design -g
Tasks you can complete with it:Tasks you can complete with it:
text Help me redesign this page. I want it to look very professional and not like it was generated by AI.
text This UI is too ugly. Rewrite it in a more modern design style.
text Make a dark-theme dashboard with a strong tech feel.
Claude will follow this skill's conventions and help you design:Claude will follow this skill's conventions and help you design:
------
| Skills | What problem does it solve? | Fun factor |
|---|---|---|
| remotion-dev/skills | Make videos with code | βββββ |
| anthropics/skills/frontend-design | Make the frontend look better | ββββ |
------
frontend-slides to quickly make beautiful PPT presentationsThe Third Skill: Use frontend-slides to quickly make beautiful PPT presentationsfrontend-slides is a Skill that lets you create beautiful HTML presentations with natural language - even if you do not know any CSS or JavaScript.frontend-slides is a Skill that lets you create beautiful HTML presentations with natural language - even if you do not know any CSS or JavaScript.
Its core idea is "show, don't tell." If you cannot clearly describe the design style you want, it will generate 3 visual previews for you to choose from, rather than forcing you to describe abstract requirements like "blue background, large font."Its core idea is "show, don't tell." If you cannot clearly describe the design style you want, it will generate 3 visual previews for you to choose from, rather than forcing you to describe abstract requirements like "blue background, large font."
frontend-slidesInstall frontend-slidesMethod 1: Install manuallyMethod 1: Install manually
bash # Create the skill directory mkdir -p ~/.claude/skills/frontend-slides # Download files (or copy from GitHub) # 1. Visit https://github.com/zarazhangrui/frontend-slides # 2. Download SKILL.md and STYLE_PRESETS.md # 3. Put them into ~/.claude/skills/frontend-slides/
Method 2: Install with find-skillsMethod 2: Install with find-skills
text Help me find a skill for making PPT presentations
Claude will search through find-skills and recommend frontend-slides.Claude will search through find-skills and recommend frontend-slides.
Scenario 1: Create a presentation from scratchScenario 1: Create a presentation from scratch
text /frontend-slides I want to create a fundraising pitch deck for an AI startup project, around 10 slides
Claude will guide you to:Claude will guide you to:
Scenario 2: Convert a PowerPoint fileScenario 2: Convert a PowerPoint file
text /frontend-slides Convert my presentation.pptx into a web presentation
Claude will:Claude will:
Scenario 3: Quickly generate style previewsScenario 3: Quickly generate style previews
text /frontend-slides I want to make a PPT for a technical talk. Show me the available visual styles first.
Claude will directly generate 3 preview pages in different styles:Claude will directly generate 3 preview pages in different styles:
| Style name | Characteristics | Suitable scenarios |
|---|---|---|
| Neon Cyber | Futuristic tech feel, particle effects | Technical talks, AI products |
| Midnight Executive | High-end business, trustworthy | Business reports, fundraising pitches |
| Paper & Ink | Editorial style, literary atmosphere | Content creation, educational sharing |
| Swiss Modern | Clean geometry, Bauhaus style | Design portfolios, minimalism |
| Brutalist | Raw, bold, attention-grabbing | Art showcase, personal expression |
The generated presentation is a single-file HTML document that includes:The generated presentation is a single-file HTML document that includes:
html <!DOCTYPE html> <html lang="zh-CN"> <head> <!-- All styles are inlined, zero dependencies --> </head> <body> <section class="slide title-slide"> <h1 class="reveal">Your Title</h1> </section> <!-- More slides... --> </body> </html>
Related links:Related links:
------
| Skills | What problem does it solve? | Fun factor | Practicality |
|---|---|---|---|
| remotion-dev/skills | Make videos with code | βββββ | ββββ |
| anthropics/skills/frontend-design | Make the frontend look better | ββββ | βββββ |
| frontend-slides | Quickly make beautiful PPTs | ββββ | βββββ |
------
After installation, you do not need any extra configuration. When you ask Claude to perform a related task, it will automatically call the corresponding Skill.After installation, you do not need any extra configuration. When you ask Claude to perform a related task, it will automatically call the corresponding Skill.
View installed Skills:View installed Skills:
bash npx skills list
------
Skills are "skill packs" stored in the file system and can include:Skills are "skill packs" stored in the file system and can include:
You may wonder: what is the difference between Skills and directly sending prompts to Claude?You may wonder: what is the difference between Skills and directly sending prompts to Claude?
| Prompts | Skills |
|---|---|
| Temporary, you have to repeat them every time | Persistent, write once and reuse many times |
| Live in conversation history and consume tokens | Loaded on demand and save tokens |
| Cannot be shared across sessions | Can be shared within a team |
| Hard to version-control | Can be managed with Git |
Global Skills (personal):Global Skills (personal):
~/.claude/skills/storage location: ~/.claude/skills/Project Skills (team):Project Skills (team):
project-directory/.claude/skills/storage location: project-directory/.claude/skills/When Claude Code starts, it will:When Claude Code starts, it will:
SKILL.md fileparse each SKILL.md file------
SKILL.md File StructureSKILL.md File StructureA complete Skill directory looks like this:A complete Skill directory looks like this:
text my-skill/ βββ SKILL.md # Required: skill definition file βββ scripts/ # Optional: helper scripts βββ templates/ # Optional: output templates βββ references/ # Optional: reference documents βββ examples/ # Optional: example files
SKILL.md templateSKILL.md templateThe SKILL.md file has two parts:The SKILL.md file has two parts:
Part 1: YAML Frontmatter (metadata)Part 1: YAML Frontmatter (metadata)
yaml --- name: skill-name # Skill name, becomes the /skill-name command description: short description # Used for Claude's automatic trigger matching category: development # Category tags: # Tags - code - automation ---
Part 2: Markdown content (instructions)Part 2: Markdown content (instructions)
markdown # Skill Title ## Use cases When to use this skill ## Execution steps 1. Step one 2. Step two ## Notes - Note 1 - Note 2
| Field | Required | Explanation |
|---|---|---|
name | Yes | The skill name. Only lowercase letters, numbers, and hyphens are allowed |
description | Yes | The skill description. The more specific it is, the easier it is for Claude to match automatically |
category | No | Category label |
tags | No | Additional category labels |
allowed-tools | No | Tools that may be used without extra permission |
------
Many beginners confuse Skills and MCP, but they are completely different things.Many beginners confuse Skills and MCP, but they are completely different things.
| Dimension | Skills | MCP |
|---|---|---|
| Nature | Knowledge and workflow | Tools and interfaces |
| What it provides | Tells AI "how to do it" | Gives AI "what it can use" |
| Storage location | skills/ directory | MCP server |
| Configuration format | Markdown files | JSON config files |
| Trigger method | /skill-name or automatic recognition | Automatically loaded through configuration |
If Claude were a "worker":If Claude were a "worker":
Skills and MCP are not competing with each other. They are complementary:Skills and MCP are not competing with each other. They are complementary:
text User task -> Claude recognizes the requirement β Load relevant Skills (know how to do it) β Call tools through MCP (have tools available) β Complete the task
Scenario: code reviewScenario: code review
Working together: Skills tell Claude "how to review," and MCP gives Claude "the ability to access the code."Working together: Skills tell Claude "how to review," and MCP gives Claude "the ability to access the code."
| Your need | Recommended solution |
|---|---|
| Need to define a workflow | Use Skills |
| Need to access external data | Use MCP |
| Need both | Use them together |
------
| Repository | Description |
|---|---|
| [shanraisshan/claude-code-best-practice](https://github.com/shanraisshan/claude-code-best-practice) | Community-maintained collection covering Skills, Agents, Hooks, and more |
| [affaan-m/everything-claude-code](https://github.com/affaan-m/everything-claude-code) | Comprehensive toolkit including preconfigured Skills |
| [JackyST0/awesome-agent-skills](https://github.com/JackyST0/awesome-agent-skills) | Curated Skills resource list |
| [jeffallan/claude-skills](https://github.com/jeffallan/claude-skills) | 66 professional skills and 300+ reference documents |
| [GitCode/awesome-claude-skills](https://gitcode.com/GitHub_Trending/aw/awesome-claude-skills) | Selected open-source collection |
Using find-skills, you only need to tell Claude what you need, and it will automatically search and recommend:Using find-skills, you only need to tell Claude what you need, and it will automatically search and recommend:
text Help me find a skill related to React performance optimization
Claude will search the skills.sh database through find-skills, then list the most relevant skills, and you can choose one to install.Claude will search the skills.sh database through find-skills, then list the most relevant skills, and you can choose one to install.
Search tips:Search tips:
"react testing" is better than "testing"use specific keywords: "react testing" is better than "testing""nextjs deploy", "typescript lint"combine "domain + action": "nextjs deploy", "typescript lint"------
There are two ways to create Skills: directly ask Claude to create one for you, or use the dedicated skill-creator tool.There are two ways to create Skills: directly ask Claude to create one for you, or use the dedicated skill-creator tool.
This is the simplest approach. Just tell Claude your requirement in natural language.This is the simplest approach. Just tell Claude your requirement in natural language.
Example:Example:
text Please help me create a skill named "format-code" to automatically format code. Requirements: 1. Automatically detect the programming language 2. Apply the corresponding formatting rules 3. Return the diff before and after formatting
Claude will automatically:Claude will automatically:
SKILL.md filegenerate the SKILL.md fileSuitable scenarios:Suitable scenarios:
SKILL.md formatyou know what you want but are not familiar with the SKILL.md formatskill-creatorMethod 2: Use skill-creatorskill-creator is a dedicated tool for creating Skills. It guides you step by step through the process.skill-creator is a dedicated tool for creating Skills. It guides you step by step through the process.
Install:Install:
bash npx skills add anthropics/skills@skill-creator -g
Or install the entire official skills repository:Or install the entire official skills repository:
bash npx skills add anthropics/skills -g
Use:Use:
text /skill-creator
Then fill in the prompts:Then fill in the prompts:
skill-creator will:skill-creator will:
SKILL.mdgenerate a draft SKILL.mdSuitable scenarios:Suitable scenarios:
| Method 1: Direct creation | Method 2: skill-creator |
|---|---|
| Fast and simple | Guided steps |
| Suitable for simple skills | Suitable for complex skills |
| Completed directly in conversation | Standardized process |
| Flexible modification | Includes testing and verification |
A good requirement description:A good requirement description:
text Create a "git-commit" skill that automatically commits code. Execution steps: 1. Check which files were modified 2. Generate a commit message that follows Conventional Commits 3. Run git commit 4. Ask whether to push Notes: - Check for sensitive information before committing - Do not commit directories like dist/ or node_modules/
A bad requirement description:A bad requirement description:
text Help me write a skill for committing code
That is too vague. Claude will not know exactly what it needs to do.That is too vague. Claude will not know exactly what it needs to do.
------
Create the directory and file:Create the directory and file:
bash mkdir -p ~/.claude/skills/review-pr
bash cat > ~/.claude/skills/review-pr/SKILL.md << 'EOF' --- name: review-pr description: Review Pull Requests for code quality, security, and test coverage --- You are a senior code reviewer. ## Review workflow 1. **Code style check** - Does the code follow team conventions? - Are names clear? - Are comments sufficient? 2. **Security check** - Are there security vulnerabilities? - Is sensitive information exposed? - Is input validation complete? 3. **Testing check** - Are there enough tests? - Do test cases cover edge conditions? - Are the tests runnable? 4. **Overall evaluation** - What are the strengths? - What needs improvement? - Do you recommend approving the merge? ## Output format Please output the review results in a clear structure using a list format. EOF
How to use it:How to use it:
text /review-pr Please review the PR for the current branch
bash mkdir -p ~/.claude/skills/git-commit
bash cat > ~/.claude/skills/git-commit/SKILL.md << 'EOF' --- name: git-commit description: Automatically detect changes, generate a commit message, and commit the code --- You are a skilled Git user. ## Execution workflow 1. **Check changes** Run `git status` to view modified files Run `git diff` to view detailed changes 2. **Generate commit message** Analyze the nature of the changes Generate a commit message that follows Conventional Commits Format: `type(scope): description` 3. **Security check** Check whether there is sensitive information such as keys, passwords, or tokens Check whether directories that should not be committed are included 4. **Execute after confirmation** Show the commit message for confirmation Run `git add` and `git commit` Ask whether a push is needed ## Notes - Do not commit directories such as node_modules/, dist/, or .next/ - Run tests before committing to ensure the code works - The commit message should clearly explain the change EOF
How to use it:How to use it:
text /git-commit
bash mkdir -p ~/.claude/skills/gen-test
bash cat > ~/.claude/skills/gen-test/SKILL.md << 'EOF' --- name: gen-test description: Automatically generate unit tests for code to ensure correctness --- You are a test engineer. ## Workflow 1. **Analyze the code** - Understand the function or class - Identify inputs and outputs - Find edge cases 2. **Generate tests** - Use an appropriate test framework - Cover normal cases - Cover edge cases - Cover exceptional cases 3. **Validate the tests** - Make sure the tests can run - Make sure the tests can catch problems - Do not over-mock the implementation ## Test frameworks - JavaScript/TypeScript: Jest or Vitest - Python: pytest - Go: testing package ## Output format Output the test code first, then explain how to run the tests. EOF
How to use it:How to use it:
text /gen-test Generate unit tests for src/utils.ts
bash mkdir -p ~/.claude/skills/gen-readme
bash cat > ~/.claude/skills/gen-readme/SKILL.md << 'EOF' --- name: gen-readme description: Automatically generate a README document for a project --- You are a technical documentation expert. ## Workflow 1. **Analyze the project** - Scan the project directory structure - Check package.json or other configuration files - Read the existing code 2. **Generate content** - Project introduction - Installation steps - Usage instructions - API documentation - Development guide 3. **Formatting** - Use a clear section structure - Add code examples - Add appropriate badges - Add license information ## Standard README structure - Project title and introduction - Features - Installation - Quick start - Usage instructions - API documentation - Development guide - Contribution guide - License EOF
How to use it:How to use it:
text /gen-readme Generate a README document for the current project
------
Hooks can automatically perform actions on specific events. Combined with Skills, they enable more powerful automation.Hooks can automatically perform actions on specific events. Combined with Skills, they enable more powerful automation.
For example, automatically format code after saving:For example, automatically format code after saving:
json // .claude/hooks.json { "hooks": { "PostToolUse": [{ "matcher": { "tool_name": "Edit" }, "hook": { "type": "command", "command": "/format-code" // Call the format-code skill } }] } }
Commands are simple shortcut commands. Skills are complex workflows. They can be used together.Commands are simple shortcut commands. Skills are complex workflows. They can be used together.
Share project Skills:Share project Skills:
.claude/skills/put the Skills under .claude/skills/Version control:Version control:
------
Possible reasons:Possible reasons:
How to solve it:How to solve it:
A good description includes:A good description includes:
Bad example:Bad example:
text description: Review code
Good example:Good example:
text description: Review Pull Request code. Trigger when the user mentions PR, review, or code review.
| Commands | Skills |
|---|---|
| Simple shortcut commands | Complete workflows |
A single .md file | A directory structure (SKILL.md + optional files) |
| Manually triggered | Can be automatically triggered |
| Suitable for simple operations | Suitable for complex processes |
/skills to check whether the skill was recognizedUse /skills to check whether the skill was recognizedSKILL.md content is correctCheck whether the SKILL.md content is correct------
Next, we will go deeper into how Claude Skills work internally, so you not only know how to use them, but also understand why they are designed this way.Next, we will go deeper into how Claude Skills work internally, so you not only know how to use them, but also understand why they are designed this way.
First, understand one key fact: Skills are not executable code.First, understand one key fact: Skills are not executable code.
Skills are essentially advanced instructions, or prompts, that are "injected" into Claude's context when needed. This design is called "Prompt-based Dynamic Context Injection & Meta-Tool Architecture."Skills are essentially advanced instructions, or prompts, that are "injected" into Claude's context when needed. This design is called "Prompt-based Dynamic Context Injection & Meta-Tool Architecture."
text βββββββββββββββ βββββββββββββββ ββββββββββββββββ β User Requestβ βββ> β LLM Matches β βββ> β Trigger Skillβ βββββββββββββββ βDescription β ββββββββββββββββ βββββββββββββββ β βΌ ββββββββββββββββ β Inject Full β β Instructions β ββββββββββββββββ β βΌ ββββββββββββββββ β Execute Task β ββββββββββββββββ
To handle a large number of Skills without consuming too many tokens, Claude uses a smart three-layer loading mechanism:To handle a large number of Skills without consuming too many tokens, Claude uses a smart three-layer loading mechanism:
| Layer | Content | When loaded | Token cost |
|---|---|---|---|
| Layer 1: Metadata | YAML frontmatter (name + description) | When Claude starts | ~30-50 tokens/skill |
| Layer 2: Instructions | Full SKILL.md content | When the Skill is triggered | ~5,000 tokens |
| Layer 3: Resources | Scripts, templates, references | Accessed from the file system on demand | Not added to context |
Advantages of this design:Advantages of this design:
Compared with no Skills:Compared with no Skills:
text Without Skills: every conversation needs 50,000+ tokens to describe all capabilities With Skills: startup ~100 tokens/skill + 5,000 tokens loaded on demand Savings: on average 40,000+ tokens saved per conversation
When a Skill is activated, the system makes two modifications at the same time:When a Skill is activated, the system makes two modifications at the same time:
1. Conversation context injection1. Conversation context injection
javascript // What the user sees (visible message) <command-message>The "pdf" skill is loading</command-message> // What the AI actually receives (hidden meta-message) { isMeta: true, // marked as a meta-message, not shown in the UI content: ` # PDF Analysis Expert Instructions You are a professional PDF analysis expert. Workflow: 1. Use pdftotext to extract text 2. Analyze the document structure 3. Generate a summary report ... ` // full SKILL.md content, possibly thousands of words }
2. Execution context modification2. Execution context modification
Besides injecting instructions, a Skill can also dynamically modify Claude's environment:Besides injecting instructions, a Skill can also dynamically modify Claude's environment:
| Modification type | Example | Explanation |
|---|---|---|
| Tool permissions | allowed-tools: "Bash(pdftotext:*)" | Temporarily grant access to a specific tool |
| Model switching | Switch from Sonnet to Opus | Some complex tasks require stronger reasoning |
| Context isolation | Create a child session space | Avoid polluting the main conversation context |
This is a very important design decision: Claude Skills do not use hardcoded routing.This is a very important design decision: Claude Skills do not use hardcoded routing.
| Traditional approach | Claude Skills |
|---|---|
| β Embedding vector matching | β Pure LLM reasoning |
| β Classifier | β Transformer forward pass |
| β Regex or keyword matching | β Natural language understanding |
| β Separate routing algorithm | β Unified model decision-making |
Workflow:Workflow:
text 1. The name and description of every Skill are formatted into the Skill tool description 2. Claude receives: - the user message - the list of available tools, including the Skill meta-tool - the Skill list, with name + description 3. Claude's natural language understanding matches the user's intent to a Skill description 4. When the match succeeds, it calls: command: "skill-name"
Why design it this way?Why design it this way?
Hardcoded routing requires:Hardcoded routing requires:
Pure LLM reasoning:Pure LLM reasoning:
SKILL.md file structure:SKILL.md file structure:
bash my-custom-skill/ βββ SKILL.md # Required: core definition file βββ config.json # Optional: metadata config βββ README.md # Recommended: usage documentation βββ scripts/ # Optional: executable scripts βββ templates/ # Optional: template folder βββ references/ # Optional: reference documents
Parsing flow:Parsing flow:
text βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β Claude Code startup β βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β βΌ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β Scan ~/.claude/skills/ and .claude/skills/ directories β βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β βΌ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β Use the gray-matter library to parse each SKILL.md β β YAML frontmatter β βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β βΌ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β Validate required fields (name and description) β β - name: max 64 characters, only lowercase letters, β β numbers, and hyphens β β - description: used for LLM automatic matching β βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β βΌ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β Extract metadata and build the Skill list β β (only load name + description, not the full body) β βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Let's look at the entire flow through a concrete example:Let's look at the entire flow through a concrete example:
text User: "Help me analyze this PDF file" βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ Step 1: LLM decision ββββββββββββββββ Claude finds the description of the "pdf" skill in the Skill list: description: "Analyze PDF document content, extract text, generate a summary" βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ Step 2: System intervention ββββββββββββββββ Claude Code executes: 1. Read ~/.claude/skills/pdf/SKILL.md 2. Generate a visible message: "The pdf skill is loading" 3. Generate a hidden meta-message: the full SKILL.md content 4. Modify session permissions: allowed-tools = ["Bash(pdftotext:*)"] βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ Step 3: LLM execution ββββββββββββββββ Now Claude's context contains: - the original user request - the PDF expert workflow instructions - access permission to the pdftotext tool Claude executes: 1. Use pdftotext to extract the PDF text 2. Analyze the content structure 3. Generate a summary report 4. Present the result to the user βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ Step 4: Dispose after use ββββββββββββββββ After the task is completed, the full Skill content is removed from context (only the conversation history remains, not the full Skill instruction)
| Innovation | Traditional approach | Skills approach | Advantage |
|---|---|---|---|
| Source of capability | Fixed in model weights | Dynamically loaded prompts | Extensible and updatable |
| Token efficiency | All capabilities always stay in memory | Load on demand | Save 80%+ tokens |
| Knowledge management | Scattered in conversation history | Modular file system | Version-controllable and shareable |
| Lifecycle | Continuously occupies space | Dispose after use | Cleaner context |
The design of Claude Skills draws on the following research:The design of Claude Skills draws on the following research:
| Research field | Representative work | Applied here as |
|---|---|---|
| Reinforcement learning | Voyager (2023) | The idea of accumulating a skill library |
| Cognitive architecture | ACT-R, Soar | Separation of procedural memory and declarative memory |
| Hierarchical policy | Options Framework | Three-layer progressive loading |
Core shift in thinking:Core shift in thinking:
text Traditional: AI needs to remember everything β Skills: AI knows where to find specialized knowledge β Result: more like the thinking pattern of a human expert
Claude Skills follows the [Agent Skills open standard](https://agentskills.io/), which means:Claude Skills follows the [Agent Skills open standard](https://agentskills.io/), which means:
SKILL.md structureβ
Unified file format: standardized SKILL.md structuretext Agent Skills standard defines: βββ Required: SKILL.md file (metadata + instructions) βββ Optional: scripts/ (executable code) βββ Optional: references/ (knowledge base documents) βββ Optional: assets/ (templates and resources)
------
Skills are the key to turning Claude Code from a "general assistant" into a "team expert."Skills are the key to turning Claude Code from a "general assistant" into a "team expert."
Through Skills, you can:Through Skills, you can:
Remember: if you find yourself repeating the same instruction twice, you should consider creating a Skill.Remember: if you find yourself repeating the same instruction twice, you should consider creating a Skill.
Now go create your first Skill.Now go create your first Skill.