Claude Skills Collection
A tutorial by VoltAgent. Featured in the OTF curated resource library.
What Are Claude Skills?
Claude Skills are structured instruction files that teach Claude Code specific knowledge and patterns. Think of them as reusable expertise modules — instead of repeating the same instructions in every prompt, you define a skill once and reference it whenever needed.
A skill might teach Claude your team's React component patterns, your design system's color tokens, your API response format, or your testing conventions. When loaded, Claude Code follows these patterns consistently across every interaction.
Why skills matter: Without skills, Claude Code generates code in its default style. With skills, it generates code in YOUR style — matching your team's conventions, your design system, and your architecture decisions. The difference between generic AI output and team-specific output is skills.
Anatomy of a Skill
Every effective Claude Skill follows a consistent structure.
Context section
Explain WHAT the skill covers and WHEN to use it. Example: 'This skill covers React component patterns for our design system. Use when creating new UI components or modifying existing ones.'
Rules and conventions
List the specific patterns Claude should follow. Be explicit: 'Always use forwardRef for components that render DOM elements. Always export both the component and its prop type.'
Examples section
Show concrete code examples of correct implementation. Claude learns patterns best from examples. Include both the ideal case and common mistakes to avoid.
Anti-patterns section
List what NOT to do. 'Never use inline styles. Never create components inside other components. Never use any as a type escape hatch.' Negative examples prevent common AI mistakes.
Essential Skills Collection
Component Architecture Skill
Teaches Claude your component structure: file organization, naming conventions, prop patterns, state management approach, and composition patterns. This single skill eliminates 80% of 'that's not how we do it' feedback.
Design System Skill
Covers your color tokens, spacing scale, typography, component variants, and responsive breakpoints. When Claude knows your design system, it generates UI that matches your brand without manual correction.
Testing Skill
Defines your testing approach: what to test, how to structure tests, which utilities to use, naming conventions, and coverage expectations. Claude generates tests that match your existing test suite's style.
API Patterns Skill
Covers your API response format, error handling approach, authentication patterns, and data fetching conventions. Ensures Claude-generated API code is consistent with your backend architecture.
Creating Custom Skills
Start by auditing your code review feedback. The patterns you most frequently correct in PRs are exactly what should become skills. If you keep saying 'we don't use useEffect for data fetching, we use React Query,' that's a skill.
Keep skills focused. One skill per domain: components, testing, API, styling. A single massive skill file is harder for Claude to follow than four focused ones.
Include real code from your codebase. Don't write abstract examples — copy actual components, tests, and patterns from your repo. Claude learns best from real code in your specific context.
Version your skills. As your codebase evolves, update your skills. A quarterly review of skills against current codebase practices keeps them accurate.
Share across the team. Skills work best when the whole team uses the same set. Store them in the repo so everyone's Claude Code produces consistent output.
