skills.rest
genesis-ai-dev
genesis-ai-devOFFICIAL
Explore all skills by this author →
WebsiteGitHub

building-components

Guide building accessible, composable UI components with ARIA patterns and design tokens.

15|Updated Oct 9, 2024
Search Tags:#accessibility#react#design systems#composition#frontend development#ui components
One-click install
npx skills add https://github.com/genesis-ai-dev/langquest --skill building-components-genesis-ai-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-components
Source: https://github.com/genesis-ai-dev/langquest/tree/main/.agents/skills/building-components
Command: npx skills add https://github.com/genesis-ai-dev/langquest --skill building-components-genesis-ai-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and best practices for developing robust, accessible, and composable UI components, streamlining the entire component creation lifecycle.

Core Features & Use Cases

  • Component Design Principles: Learn core concepts for building maintainable and scalable UI elements.
  • Accessibility Implementation: Master ARIA patterns, keyboard navigation, and WCAG compliance.
  • Composition Patterns: Understand how to break down complex UIs into smaller, reusable parts.
  • Styling & Theming: Implement design tokens and flexible styling approaches.
  • Use Case: You're tasked with building a new modal component. This Skill will guide you through semantic HTML, focus management, ARIA attributes, and how to integrate it with your design system.

Quick Start

Use the building-components skill to learn about implementing ARIA patterns for accessible components.

Frequently Asked Questions about building-components

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

FAQPage Schema
How do I build accessible UI components with proper ARIA patterns?▼

To build accessible UI components, implement semantic HTML, correct ARIA attributes, and keyboard navigation. This ensures WCAG compliance and proper screen reader support for interactive elements like modals.

What's the best way to manage focus when creating a modal component?▼

Managing focus in a modal component requires trapping focus within the dialog and returning focus to the trigger element upon closing. This maintains keyboard navigation accessibility and WCAG compliance.

How do I use composition patterns to break down complex React UI elements?▼

Composition patterns break down complex React UI elements into smaller, reusable parts. This approach uses component design principles to create maintainable and scalable structures for frontend development.

How do I implement design tokens for UI component styling and theming?▼

Implement design tokens for UI component styling by applying them as variables for colors, typography, and spacing. This flexible styling approach ensures consistency across your design system and frontend architecture.

Does this component design guidance cover WCAG compliance for frontend development?▼

Yes, this component design guidance covers WCAG compliance for frontend development. It provides best practices for semantic HTML, focus management, and ARIA patterns to ensure accessible user interfaces.

Related Skills

Explore More Software Engineering Skills→
stancodevstancodev

componente-mobile

Standardize mobile UI component development with design tokens for Next.js/React projects.

Community
Intermediate
vh2224vh2224
1

accessibility

Audit web pages for WCAG 2.1 compliance and suggest fixes.

Community
Intermediate
HorusGoulHorusGoul
8

react-aria

Document React Aria Components with accessible UI code examples.

Community
Advanced
masumi-networkmasumi-network
11

building-components

Guide development of accessible, composable UI components with semantic HTML and ARIA.

Official
Advanced