ui

Name: ui
Availability: InStock
Author: coriatel

Build accessible React UI components with SCSS and BEM styling.

Updated Jan 8, 2026

Search Tags:#testing #accessibility #a11y #react #scss #ui-component

Ready to run

npx skills add https://github.com/Coriatel/Expiry-Alert --skill ui-coriatel

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides developers to build accessible, maintainable UI components for React apps using SCSS with a consistent design system.

Core Features & Use Cases

Functional React components with hooks and semantic HTML
BEM-based SCSS styling with CSS variables for theming
Keyboard navigation, focus management, and RTL support
Documentation, testing patterns, and accessibility checks for reusable UI blocks
Use cases include building a component library, design system, or feature components across applications

Quick Start

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.

Frequently Asked Questions about ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build accessible React UI components with SCSS?▼

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.

What is WCAG AA compliance for React component libraries?▼

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.

Does this approach support RTL and keyboard navigation in React?▼

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.

How do I add SCSS styling and theming to React components?▼

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.

What testing patterns should I use for accessible React UI components?▼

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.

Can I use these React components for a design system?▼

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.