Does this skill support design tokens?

Yes, it is designed to integrate with design token systems for consistent theming of colors, spacing, shadows, and motion across all feedback components.

What UI libraries does this skill recommend?

It primarily recommends Sonner for toasts and Radix UI for headless, accessible modal dialogs, though it provides patterns adaptable to any modern framework.

How does it handle web accessibility (a11y)?

The skill implements ARIA live regions for announcements, focus trapping for modals, and proper keyboard navigation to ensure all notifications are screen-reader friendly.

When should I use a modal versus a toast?

Modals should be used for critical, blocking actions that require user confirmation, while toasts are ideal for non-blocking status updates like success or info messages.

User Feedback & Notifications

Name: User Feedback & Notifications
Author: ancoleman

byancoleman

•

158

•

Herramientas de Diseño

Implements professional notification systems, modals, and progress indicators using UI/UX best practices and accessibility standards.

This skill empowers Claude to design and implement comprehensive feedback systems that enhance user experience by communicating system states clearly and effectively. It provides standardized patterns for toasts, alerts, modal dialogs, and progress indicators, ensuring that critical information is prioritized while maintaining non-obtrusive messaging for standard updates. By leveraging accessibility-first patterns and modern libraries like Radix UI and Sonner, the skill helps developers build professional, user-centric interfaces with consistent timing, placement, and interaction models.

Características Principales

01Automated toast notification timing and stacking logic

02Dynamic progress indicators and skeleton screens for loading states

03Accessible modal and dialog implementations with focus management

04158 GitHub stars

05Urgency-based feedback decision matrix for optimal component selection

06Comprehensive ARIA live region support for assistive technologies

Casos de Uso

01Implementing asynchronous form submission feedback with success and error toasts

02Creating accessible confirmation dialogs for destructive user actions

03Visualizing long-running background processes with determinate progress bars

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ancoleman/ai-design-components providing-feedback

For use in Claude.ai and ChatGPT

Download Skill