handoff-spec — скилл для Claude Code: что делает и как установить
Оформляет спецификацию передачи дизайна в разработку: отступы, токены, состояния экранов и граничные случаи. Пригодится, когда макет отдают фронтендерам.
npx skills add Owl-Listener/designer-skills --skill handoff-spec -a claude-codeЧто делает handoff-spec
Скилл структурирует требования к экрану перед вёрсткой. Он заменяет сырые hex-коды дизайн-токенами. Визуальные правила описывают точные размеры, гарнитуры шрифтов, скругления, тени и поведение интерфейса на брейкпоинтах.
В документ входят сценарии взаимодействия и состояния элементов: наведение, фокус, неактивный вид или жесты. Фиксируются правила клавиатурной навигации и доступности через ARIA-атрибуты. Описываются граничные сценарии вроде пустых экранов, слишком длинных строк и локализации под чтение справа налево.
Для компонентов библиотеки дизайн-системы автор советует скилл component-spec. Решение handoff-spec создано именно под передачу конкретного макета, когда инженеры берут задачу в работу.
Какие задачи решает
- подготовить спецификацию для вёрстки макета
- зафиксировать состояния компонентов и навигацию с клавиатуры
- описать поведение интерфейса на разных брейкпоинтах и локализацию под RTL
- составить список ассетов и требований доступности перед разработкой
Примеры запросов агенту
- Составь handoff-spec для карточки профиля пользователя со всеми состояниями и токенами
- Опиши спецификацию передачи экрана корзины в разработку, включая пустые состояния и ошибки
- Сформируй требования для вёрстки навигационного меню с учётом брейкпоинтов и ARIA
Как установить handoff-spec
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill handoff-spec -a claude-code2Вручную: положить файлы
~/.claude/skills/handoff-spec/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/handoff-spec/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill handoff-spec -a codex2Вручную: положить файлы
.agents/skills/handoff-spec/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill handoff-spec -a cursor2Вручную: положить файлы
.cursor/skills/handoff-spec/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills handoff-spec2Вручную: положить файлы
.github/skills/handoff-spec/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill handoff-spec -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path design-ops/skills/handoff-specВручную: положить файлы
.devin/skills/handoff-spec/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill handoff-spec -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о handoff-spec
Как установить handoff-spec в Claude Code?
Выполните команду npx skills add Owl-Listener/designer-skills --skill handoff-spec -a claude-code в терминале.
Что делает handoff-spec?
Формирует структурированную спецификацию дизайна для разработчиков. Включает дизайн-токены, состояния интерактивных элементов, брейкпоинты, ассеты и требования доступности.
Чем handoff-spec отличается от component-spec и design-qa-checklist?
handoff-spec описывает передачу конкретного экрана инженерам перед началом вёрстки. Для библиотечных компонентов дизайн-систем автор рекомендует component-spec, а для сверки готового результата — design-qa-checklist.
Исходный текст
SKILL.md · MIT
--- name: handoff-spec description: Write the implementation handoff — measurements, behaviours, assets, states, and edge cases. Use when engineering picks up the work. For verifying the result afterwards use `design-qa-checklist`; for reusable library components use `component-spec` (design-systems). --- # Handoff Spec You are an expert in creating clear, complete developer handoff specifications. ## What You Do You create handoff documents that give developers everything needed to implement a design accurately. ## Handoff Contents ### Visual Specifications - Spacing and sizing (exact pixel values or token references) - Color values (token names, not hex codes) - Typography (style name, size, weight, line-height) - Border radius, shadows, opacity values - Responsive breakpoint behavior ### Interaction Specifications - State definitions (default, hover, focus, active, disabled) - Transitions and animations (duration, easing, properties) - Gesture behaviors (swipe, drag, pinch) - Keyboard interactions (tab order, shortcuts) ### Content Specifications - Character limits and truncation behavior - Dynamic content rules (what changes, min/max) - Localization considerations (text expansion, RTL) - Empty, loading, and error state content ### Asset Delivery - Icons (SVG, named per convention) - Images (resolution, format, responsive variants) - Fonts (files or service links) - Any custom illustrations or graphics ### Edge Cases - Minimum and maximum content scenarios - Responsive behavior at each breakpoint - Browser/device-specific considerations - Accessibility requirements (ARIA, keyboard, screen reader) ### Implementation Notes - Component reuse suggestions - Data structure assumptions - API dependencies - Performance considerations ## Best Practices - Use design tokens, not raw values - Annotate behavior, not just appearance - Include all states, not just the happy path - Provide redlines for complex layouts - Walk through the handoff with the developer
© Owl-Listener · MIT · Owl-Listener/designer-skills
