Implement accessible modal, sheet, and alert dialogs with shadcn/ui and Tailwind CSS.
npx skills add https://github.com/Dzakiamriz22/frontend-pack --skill dialogs-dzakiamriz22
Please help me install this Agent Skill. Skill: dialogs Source: https://github.com/Dzakiamriz22/frontend-pack/tree/main/skills/dialogs Command: npx skills add https://github.com/Dzakiamriz22/frontend-pack --skill dialogs-dzakiamriz22
This skill solves the complexity of implementing accessible, keyboard-navigable, and animated modal interfaces, ensuring consistent user experience across your application.
Use the dialogs skill to generate a centered modal for editing user profile information.
High-intent search queries and answers about installing and using this skill.
Build accessible modals with shadcn/ui by implementing automated focus trapping, ARIA attributes, and keyboard event handling to ensure WCAG 2.1 compliance for screen readers and keyboard users.
Create a slide-in settings panel using Tailwind CSS by implementing the sheet pattern, which provides a standardized, animated, and keyboard-navigable UI component for side-panel interfaces.
Implement a destructive confirmation alert dialog meeting WCAG 2.1 AA standards by using semantic HTML structure and automated focus management to ensure accessible destructive action confirmations.
Yes, the dialogs skill supports multi-step form modals by automatically managing focus trapping and semantic HTML structure, eliminating the need to write custom focus-management boilerplate.
Yes, you can use these dialog patterns for both centered modals and destructive actions, as the skill provides multi-pattern support for modals, sheets, and alert dialogs within a single application.
LimaTechnologiesImplement shadcn/ui components in React and Next.js projects.
bytetalentDefine reusable modal dialog components for overlay-based UI interactions.
maneeshanifInstall and configure Shadcn/ui components in a Next.js project.
LuisSambranoGuide accessible design system development with Radix UI primitives.
