frontend-standards

To check WCAG AA accessibility compliance, validate that HTML components use semantic elements, support full keyboard navigation, and maintain sufficient color contrast ratios. This prevents common UI bugs and ensures usable interfaces.

Mobile-first responsive design is structured by applying base CSS styles for small screens first, then scaling up with media queries. It uses predefined design tokens and avoids `!important` to ensure maintainable layouts across devices.

Creating single-responsibility components involves designing UI elements that handle only one specific task, exposing clear and minimal prop interfaces. This approach improves reusability and prevents styling or logic conflicts within your frontend architecture.

Yes, the frontend standards skill works with JavaScript and TypeScript components, as well as HTML templates and SCSS files. It enforces styling methodology and accessibility guidelines across these file types within the control panel directory.

You should avoid `!important` in CSS methodology because it breaks the natural cascade, making styles difficult to override and maintain. Using design tokens ensures a consistent look and predictable styling behavior across the project.

You need to use semantic HTML for UI component design whenever building or modifying templates to ensure accessibility. It provides proper meaning to screen readers and enables correct keyboard navigation for interactive elements.