Claude Code Skills Complete Guide

Introduction to Skills

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.

Why do we need Skills?

Before Skills existed, using Claude Code had several problems:

• Repeated instructions: every time, you had to explain things like "what coding style to follow" and "how commit messages should be written"
• Knowledge could not accumulate: team members' individual experience using Claude could not be shared
• Inconsistent standards: different people using Claude could get completely different results
• Low efficiency: common tasks had to be explained from scratch every time

Skills solve these problems and turn Claude into an "experienced team member" - it knows your project conventions, workflows, and best practices.

Why learn Skills now?

Skills are becoming a must-have capability for AI engineers:

• High community interest: related GitHub repositories are gaining stars rapidly. For example, the OpenSkills project has already reached 7.2k stars, and Obsidian Skills gained 6.6k stars in just 9 days
• Official support: Anthropic maintains an official Skills repository, and Vercel has launched Agent Skills and the find-skills tool
• Highly practical: from code review and Git operations to video creation and PPT generation, Skills cover many scenarios. The skills.sh platform already has popular skills with 60K+ subscriptions
• Efficiency gains: configure once, reuse repeatedly, and let Claude truly become your "digital employee"
• Developer recognition: recommended by multiple technical communities and widely considered a key tool for improving AI programming efficiency

Quick Start

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.

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.

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.

Install find-skills:

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.

Example usage:

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.

Why install find-skills first?

Before find-skills:

• manually search GitHub for related skills
• copy, install, and configure them one by one
• repeatedly debug and adapt them

After find-skills:

• describe the requirement in one sentence
• AI automatically searches for the best matching skill
• install with one click and use it immediately

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

Installation steps:

1. Download the Windows version of SKILL.md
2. Replace the file in C:/Users/your-username/.agents/skills/find-skills
3. Restart Claude Code and it will take effect

Related links:

• Skills official website - browse all available skills
• find-skills repository - official source code

Install and Try Your First Skill

After installing find-skills, let's use it to search for and install a fun first Skill: the Remotion video creation tool.

Step 1: Use find-skills to search for Remotion

Type this in Claude Code:

Help me find skills related to Remotion. I want to make videos.

Claude will search via find-skills and recommend remotion-dev/skills.

Step 2: Install Remotion Skills

npx skills add remotion-dev/skills -g

Step 3: Use it to build something fun

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 video

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.

Task 2: Make a data visualization video

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 video

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:

The code Claude generates is a complete Remotion project. You can:

1. Create a new project: npx create-video my-video
2. Copy Claude's generated code into it
3. Run a preview: npm start
4. Render the video: npm run build

The Second Skill: Use find-skills to solve "the frontend looks ugly and feels slow"

Step 1: Describe your problem in natural language

Directly tell Claude your high-level need:

My website looks outdated and loads slowly. Help me find what skills I can use.

Or make it a bit more specific:

I want the frontend to look better and stop being so laggy.

Step 2: Claude will search with find-skills

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)

This skill is specifically designed to solve the problem of AI-generated interfaces that "look plain and generic," helping Claude design:

• unique visual styles that avoid the same old "AI template look"
• professional color schemes and typography
• smooth animation effects
• production-grade code quality, with clean code and naturally better performance

Step 3: Install and use it

Install:

npx skills add anthropics/skills/frontend-design -g

Tasks you can complete with it:

Help me redesign this page. I want it to look very professional and not like it was generated by AI.

This UI is too ugly. Rewrite it in a more modern design style.

Make a dark-theme dashboard with a strong tech feel.

Claude will follow this skill's conventions and help you design:

• a unique visual direction such as minimalism, retro-futurism, or brutalism
• carefully chosen colors and fonts
• reasonable spacing and layout
• smooth interactive animation

Comparing the Two Skills

The Third Skill: Use frontend-slides to quickly make beautiful PPT presentations

Introduction

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."

Install frontend-slides

Method 1: Install manually

# 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-skills

Help me find a skill for making PPT presentations

Claude will search through find-skills and recommend frontend-slides.

Usage scenarios

Scenario 1: Create a presentation from scratch

/frontend-slides

I want to create a fundraising pitch deck for an AI startup project, around 10 slides

Claude will guide you to:

1. fill in the content of each slide such as titles, bullet points, and images
2. describe the feeling you want such as stunning, professional, or warm
3. choose from 3 visual style previews
4. create the complete HTML presentation
5. open a preview in the browser

Scenario 2: Convert a PowerPoint file

/frontend-slides

Convert my presentation.pptx into a web presentation

Claude will:

1. extract all text, images, and notes from the PPT
2. show the extracted content for you to confirm
3. let you choose a visual style
4. generate an HTML presentation that preserves all original content

Scenario 3: Quickly generate style previews

/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:

• Dark themes: Neon Cyber, Terminal Green, Deep Space
• Light themes: Paper & Ink, Swiss Modern, Soft Pastel
• Special styles: Brutalist, Gradient Wave

Built-in visual styles

Output result

The generated presentation is a single-file HTML document that includes:

• complete styling and interaction code
• keyboard navigation with arrow keys and space
• touch and swipe support
• mouse wheel slide turning
• progress bars and navigation dots
• scroll-triggered animation
• responsive design

<!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>

Why recommend it?

1. Zero dependency: a single HTML file that will still open 10 years from now
2. Visual discovery: no need to describe the design, just pick what you like
3. PPT conversion: keep your existing content and give it a better visual skin
4. Production-grade code: accessible, clearly commented, and easy to customize

Related links:

• frontend-slides GitHub repository - 6.1k+ stars
• Online preview example

Comparing the Three Skills

How to use them after installation

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:

npx skills list