Build accessible React UI components with SCSS and BEM styling.
npx skills add https://github.com/Coriatel/Expiry-Alert --skill ui-coriatel
Please help me install this Agent Skill. Skill: ui Source: https://github.com/Coriatel/Expiry-Alert/tree/main/skills/ui Command: npx skills add https://github.com/Coriatel/Expiry-Alert --skill ui-coriatel
This skill guides developers to build accessible, maintainable UI components for React apps using SCSS with a consistent design system.
Create a new React component under src/components, implement a functional component with a corresponding SCSS file, add PropTypes, implement accessibility features, and add unit tests. Then run the test suite to verify.
High-intent search queries and answers about installing and using this skill.
Build accessible React UI components by creating functional components with hooks, semantic HTML, BEM-based SCSS, CSS variables for theming, keyboard navigation, focus management, and RTL support. Add PropTypes and unit tests to verify.
WCAG AA compliance for React component libraries requires semantic HTML, keyboard-friendly interfaces, focus management, and RTL support. This ensures reusable UI blocks meet accessibility standards across design systems and web apps.
Yes, this approach supports RTL and keyboard navigation in React by implementing focus management and keyboard-friendly interfaces. Functional components use semantic HTML and BEM-based SCSS to ensure accessibility across web apps.
Add SCSS styling and theming to React components by using BEM-based SCSS files alongside functional components, leveraging CSS variables for theming. This creates maintainable, reusable UI blocks with consistent design system styling.
Use testing patterns for accessible React UI components that include unit tests verifying accessibility features, keyboard navigation, and functional component behavior. Run the test suite after adding PropTypes and a11y checks to ensure compliance.
Yes, you can use these React components for a design system or component library. They provide functional components with hooks, BEM-based SCSS with CSS variables, accessibility checks, and testing guidelines for reusable UI blocks across applications.
SwokingStandardize CSS/SCSS component styling with BEM naming and CSS variables.
KhoiwallAudits UI components for WCAG compliance and accessibility barriers.
tusososBuild declarative 3D scenes in React using JSX components.
amit397Build design systems with Tailwind CSS v4 using CSS-first configuration.
