building-frontend-components

To build accessible frontend components, this skill enforces ARIA standards, keyboard navigation, and focus management. It guides you through focus trapping, escape key handling, and proper attributes using an accessibility-first approach for production-ready UI elements.

The best way to ensure modal dialog accessibility is to follow a pre-implementation checklist for focus trapping, escape key handling, and ARIA attributes. This skill prompts you to check existing design system components before writing framework-specific code.

Yes, this approach works with existing design systems by guiding you to check for and utilize available components and tokens. It ensures design system compliance and verifies that component states like loading, error, empty, and disabled are considered.

To handle UI component states comprehensively, this skill enforces consideration of loading, error, empty, and disabled states during development. It integrates these state requirements with design system compliance and accessibility standards.

You should check for existing design system components before building a new modal to ensure compliance and avoid duplication. This skill enforces a pre-implementation checklist verifying existing components and tokens before any framework code is written.