Skills & Plugins

Working Code

Let's create a Skill for your project. Create a .claude/skills/react-patterns/ directory and write a SKILL.md:

> Create .claude/skills/react-patterns/SKILL.md with this content:

---
name: react-patterns
description: Used when writing React/TypeScript code. Includes component design, state management, and custom hook patterns.
---

# React Coding Patterns

## Component Structure

- Use function components only (no class components)
- Define Props with interfaces (not type aliases)
- One default export per component file

## State Management

- Local state: useState
- Complex state: useReducer
- Server state: TanStack Query
- Global state: Zustand (no Redux)

## Custom Hooks

- Must use the "use" prefix
- Each hook handles a single concern
- Always return an object (not an array)

Now ask Claude for a React-related task:

> Create a component that displays a user profile

Claude generates code following the Skill's patterns — defining Props with interface, using Zustand for state management, and following the rules you set.

Try It Yourself

Make the same request without the Skill and compare results:

1. Reset the session with /clear.
2. Temporarily rename the skills directory: mv .claude/skills .claude/skills.bak
3. Make the same request: "Create a user profile component"
4. Compare results. Are the conventions different?
5. Restore the directory: mv .claude/skills.bak .claude/skills

"Why?" — The Difference Between CLAUDE.md and Skills

Both communicate rules to Claude, but they work differently:

| Aspect | CLAUDE.md | Skills | | ----------- | ------------------------------- | -------------------------------------------------------- | | Load timing | Always at session start | Only when matching the task type | | Token cost | Always consumed | Only consumed when needed | | Scope | Project-wide rules | Specialized knowledge for specific technologies/patterns | | Best for | Build commands, forbidden rules | Coding patterns, architecture guides |

Skills are on-demand. The description field is key — Claude compares the request content against the description and automatically loads only relevant Skills. A 200-line React pattern guide won't load during Rust work, saving tokens.

Skill Storage Locations

| Location | Scope | | ------------------- | ----------------------------------------- | | .claude/skills/ | Current project (can be committed to Git) | | ~/.claude/skills/ | Shared across all projects |

Plugin Marketplace

You can also install community-built plugins:

> /plugins marketplace

Search and install useful plugins from the marketplace:

> /plugins marketplace add username/plugin-name

Plugins are packages that bundle Skills, Hooks, and custom commands together.

Deep Dive