Skills
Система навичок Claude Code — створення, налаштування та використання custom skills
📎ОФІЦІЙНА ДОКУМЕНТАЦІЯ
Що таке Skills?
Skills — це спеціалізовані набори інструкцій для Claude Code, які активуються через slash-команди. Skills дозволяють навчити агента виконувати складні, повторювані завдання з конкретними кроками та правилами.
Skills працюють як "рецепти" — вони описують, що саме Claude Code повинен робити, коли їх викликають. На відміну від hooks, skills містять складну логіку та інструкції мовою, зрозумілою моделі.
Вбудовані Skills
Claude Code має набір вбудованих skills:
| Skill | Команда | Опис |
|---|---|---|
| commit | /commit | Створити git commit з аналізом змін |
| review-pr | /review-pr | Code review pull request-у |
| simplify | /simplify | Спростити та покращити код |
| claude-api | /claude-api | Допомога з Anthropic API |
Створення Custom Skills
Структура skill-файлу
Skills зберігаються як Markdown-файли у директорії ~/.claude/skills/ або .claude/skills/ у проєкті:
~/.claude/skills/ ← глобальні skills
.claude/skills/ ← проєктні skills
Файл skill
Кожен skill — це .md файл з frontmatter та інструкціями:
---
name: "create-component"
description: "Створити новий React-компонент за стандартами проєкту"
trigger: "when user asks to create a React component"
---
## Інструкції
Коли потрібно створити новий React-компонент:
1. Створи директорію `src/components/{ComponentName}/`
2. Створи файли:
- `index.tsx` — основний компонент
- `{ComponentName}.test.tsx` — тести
- `{ComponentName}.module.css` — стилі (якщо потрібні)
3. Компонент повинен:
- Бути функціональним (не class component)
- Мати TypeScript props interface
- Експортуватися як default export
- Мати JSDoc документацію
4. Тест повинен:
- Використовувати Vitest та Testing Library
- Перевіряти рендеринг та основну поведінку
## Шаблон компонента
```tsx
interface {ComponentName}Props {
// props тут
}
/**
* {ComponentName} — опис компонента.
*/
export default function {ComponentName}({ ...props }: {ComponentName}Props) {
return (
<div>
{/* implementation */}
</div>
);
}
### Frontmatter поля
| Поле | Обов'язкове | Опис |
|------|-------------|------|
| `name` | Так | Унікальне ім'я skill (використовується як slash-команда) |
| `description` | Так | Опис для відображення у списку skills |
| `trigger` | Ні | Коли Claude Code повинен автоматично використати skill |
## Виклик Skills
### Через slash-команду
```bash
# У інтерактивному режимі Claude Code
> /create-component Button
Через Skill tool
Skills також можна викликати програмно через Skill tool:
> Використай skill create-component для створення компонента UserProfile
Автоматичний виклик
Якщо у skill вказано trigger, Claude Code автоматично активує його при відповідних запитах користувача.
Приклади Skills
Skill для code review
---
name: "review"
description: "Провести code review поточних змін"
---
## Інструкції
1. Подивись `git diff` для staged та unstaged змін
2. Проаналізуй кожен змінений файл:
- Чи є помилки в логіці?
- Чи дотримані стандарти проєкту?
- Чи є потенційні проблеми з продуктивністю?
- Чи є security-вразливості?
3. Перевір, чи є тести для нового коду
4. Сформуй звіт з рекомендаціями
Skill для створення API endpoint
---
name: "create-api"
description: "Створити новий API endpoint за стандартами проєкту"
trigger: "when user asks to create an API route or endpoint"
---
## Інструкції
1. Створи файл у `src/app/api/{route}/route.ts`
2. Додай валідацію через Zod schema
3. Додай error handling
4. Створи тест у `src/app/api/{route}/route.test.ts`
5. Оновити API-документацію якщо вона існує
## Шаблон
```typescript
import { NextRequest, NextResponse } from 'next/server';
import { z } from 'zod';
const schema = z.object({
// визначити schema
});
export async function POST(request: NextRequest) {
try {
const body = await request.json();
const validated = schema.parse(body);
// логіка
return NextResponse.json({ success: true });
} catch (error) {
return NextResponse.json(
{ error: 'Invalid request' },
{ status: 400 }
);
}
}
### Skill для документації
```markdown
---
name: "document"
description: "Додати JSDoc документацію до файлу"
---
## Інструкції
1. Прочитай вказаний файл
2. Для кожної експортованої функції/класу/типу додай JSDoc:
- @description — опис
- @param — параметри з типами
- @returns — що повертає
- @example — приклад використання
3. Не змінюй сам код, лише додавай документацію
Організація Skills
Рекомендована організація skills для команди:
.claude/skills/
create-component.md — створення компонентів
create-api.md — створення API routes
review.md — code review
document.md — документування коду
migrate.md — міграції бази даних
deploy-check.md — перевірка перед деплоєм
Глобальні skills (для всіх проєктів):
~/.claude/skills/
commit.md — стандартний git workflow
debug.md — процес відлагодження
refactor.md — рефакторинг-гайд
Наступні кроки
Автоматизація через hooks — доповнення до skills
Розширте можливості Claude Code через зовнішні інструменти