feedback-patterns — скилл для Claude Code: подтверждения и статусы
Учит агента проектировать отклик системы на действие пользователя: тосты, индикаторы, бейджи и уведомления. Пригодится, когда интерфейс молчит после нажатия.
npx skills add Owl-Listener/designer-skills --skill feedback-patterns -a claude-codeЧто делает feedback-patterns
Скилл задаёт агенту рамку для проектирования обратной связи. Он разбирает её по типам: мгновенная (смена состояния кнопки, валидация на вводе, отклик тумблера), подтверждающая (тост после действия, галочка, краткий итог сделанного), статусная (прогресс, бейджи «в ожидании», «активно», «готово») и уведомления внутри приложения, счётчики непрочитанного, баннеры, пуш-сообщения.
Отдельно разобраны каналы: визуальный, текстовый, звук и тактильный отклик. Для каждого случая скилл держит иерархию — сначала ближе к действию, потом на уровне компонента, страницы и всей системы. Есть готовые ориентиры по длительности: тост уходит сам через 3-5 секунд, ошибка висит, пока её не устранят или не закроют, статус держится, пока актуален.
Внутри — один файл SKILL.md с принципами. Например, отклик должен соответствовать весу действия, а вместо вопроса «Вы уверены?» лучше дать отмену. Ещё одно правило: обратная связь не должна опираться только на цвет. Ждать готового кода не стоит, скилл задаёт направление и критерии, а вёрстку агент делает сам.
Какие задачи решает
- добавить тост после сохранения формы
- продумать отклик на каждое действие в интерфейсе
- показать статус фоновой задачи без перезагрузки
- сделать уведомление доступным не только цветом
- заменить «Вы уверены?» на отмену действия
Примеры запросов агенту
- Спроектируй обратную связь для формы заказа: что показывать после отправки, как дать отмену.
- Разложи статусы загрузки файла по шагам и подбери отклик для каждого.
- Проверь мои тосты и бейджи на соответствиеfeedback-patterns.
Как установить feedback-patterns
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill feedback-patterns -a claude-code2Вручную: положить файлы
~/.claude/skills/feedback-patterns/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/feedback-patterns/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill feedback-patterns -a codex2Вручную: положить файлы
.agents/skills/feedback-patterns/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill feedback-patterns -a cursor2Вручную: положить файлы
.cursor/skills/feedback-patterns/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills feedback-patterns2Вручную: положить файлы
.github/skills/feedback-patterns/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill feedback-patterns -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path interaction-design/skills/feedback-patternsВручную: положить файлы
.devin/skills/feedback-patterns/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill feedback-patterns -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о feedback-patterns
Как установить feedback-patterns в Claude Code?
Выполните npx skills add Owl-Listener/designer-skills --skill feedback-patterns -a claude-code. Файл скилла окажется по пути ~/.claude/skills/feedback-patterns/SKILL.md.
Что делает feedback-patterns?
Помогает агенту выбрать, как система сообщает пользователю о результате действия: тост, индикатор, бейдж или уведомление. И подсказывает, где разместить отклик и сколько его держать.
Чем отличается от loading-states и error-handling-ux?
Это соседние скиллы той же коллекции. feedback-patterns отвечает за подтверждения и статусы, ожидание разбирает loading-states, а сбои — error-handling-ux.
Исходный текст
SKILL.md · MIT
--- name: feedback-patterns description: Design confirmations, status updates, and notifications that tell users an action registered. Use when the system must acknowledge success or change. For waiting states use `loading-states`; for failures use `error-handling-ux`. --- # Feedback Patterns You are an expert in designing system feedback that keeps users informed and confident. ## What You Do You design feedback mechanisms that confirm actions, communicate status, and guide next steps. ## Feedback Types ### Immediate Feedback - Button state change on click - Inline validation on input - Toggle visual response - Drag position update ### Confirmation Feedback - Success toast/snackbar after action - Checkmark animation on completion - Summary of what was done - Undo option for reversible actions ### Status Feedback - Progress indicators for ongoing processes - Status badges (pending, active, complete) - Activity indicators (typing, uploading, syncing) - System health indicators ### Notification Feedback - In-app notifications for events - Badge counts for unread items - Banner alerts for system-wide messages - Push notifications for time-sensitive items ## Feedback Channels - **Visual**: Color change, icon, animation, badge - **Text**: Toast message, inline text, status label - **Audio**: Click sound, notification chime, alert tone - **Haptic**: Tap feedback, success vibration, warning buzz ## Feedback Hierarchy 1. Inline/contextual — closest to the action (preferred) 2. Component-level — within the current component 3. Page-level — banner or toast at page level 4. System-level — notification outside current view ## Duration and Dismissal - Toasts: auto-dismiss after 3-5 seconds - Errors: persist until resolved or dismissed - Confirmations: brief display with undo window - Status: persist while relevant ## Best Practices - Acknowledge every user action - Match feedback intensity to action importance - Don't interrupt flow for minor confirmations - Provide undo rather than 'Are you sure?' - Ensure feedback is accessible (not color-only) - Test that feedback timing feels right
© Owl-Listener · MIT · Owl-Listener/designer-skills
