skills.rest
thejordanleopold
thejordanleopoldCOMMUNITY
Explore all skills by this author →
Website𝕏@jordansleopoldGitHub

ui-components

Enforce WCAG 2.1 AA accessibility, responsiveness, and architecture in UI components.

4|Updated Apr 9, 2026
Search Tags:#ui#a11y#components#wcag#responsive#aria#accessible
One-click install
npx skills add https://github.com/thejordanleopold/claude-code-skills-distilled --skill ui-components-thejordanleopold
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-components
Source: https://github.com/thejordanleopold/claude-code-skills-distilled/tree/main/ui-components
Command: npx skills add https://github.com/thejordanleopold/claude-code-skills-distilled --skill ui-components-thejordanleopold

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build accessible, responsive UI components that align with WCAG 2.1 AA and design-system consistency, reducing rework and accessibility debt.

Core Features & Use Cases

  • Accessible component primitives with keyboard navigation, proper focus management, and ARIA attributes.
  • Responsive behavior across breakpoints with a clear composition pattern (atoms, molecules, organisms).
  • Guidance for auditing UI quality, anti-patterns, and implementing component variants.
  • Real-world scenario: converting a messy form into accessible, reusable Button/Input/Form components across an application.

Quick Start

Create a reusable Button component that supports keyboard navigation, ARIA labels, and responsive states.

Frequently Asked Questions about ui-components

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

FAQPage Schema
How do I build accessible UI components that meet WCAG 2.1 AA compliance?▼

Build accessible UI components by enforcing keyboard navigation, proper ARIA roles, and focus management. This ensures WCAG 2.1 AA compliance and reduces accessibility debt across your design system.

How do I audit an existing UI component library for accessibility and responsive behavior?▼

Audit existing UI component libraries by checking a checklist of keyboard navigation, ARIA roles, focus management, and responsive behavior across breakpoints to identify anti-patterns and ensure quality.

What is the best way to structure responsive UI components across different breakpoints?▼

Structure responsive UI components using a clear composition pattern of atoms, molecules, and organisms to ensure consistent architecture and responsive behavior across your application breakpoints.

How do I implement proper keyboard navigation and focus management in accessible form components?▼

Implement accessible form components by applying proper ARIA attributes, focus management, and keyboard navigation to convert messy inputs into reusable, accessible Button and Form primitives.

Can I use this approach to convert existing messy forms into reusable accessible components?▼

Yes, you can convert messy forms into accessible, reusable Button, Input, and Form components by applying component variants and enforcing consistent architecture, keyboard navigation, and ARIA labels.

When should I not use atomic composition patterns for UI component architecture?▼

Avoid atomic composition patterns when your project lacks a need for shared design-system consistency, as enforcing component variants and responsive behavior across atoms, molecules, and organisms requires architectural overhead.

Related Skills

Explore More Software Engineering Skills→
thejordanleopoldthejordanleopold
4

design-system

Codify design tokens, color, typography, spacing, and motion into a DESIGN.md deliverable.

Community
Advanced
timsvoicetimsvoice

specimin-ui-accessibility

Audit and fix generated UI code for WCAG 2.1 AA compliance.

Community
Advanced
pelcherspelchers

ensuring-accessibility

Implement WCAG 2.1 AA-compliant accessibility patterns for web interfaces.

Community
Advanced
aryankumarraiaryankumarrai

mockup-sandbox

Create and preview UI components prototypes in an isolated Vite dev server with Tailwind/shadcn ui.

Community
Advanced