skills.rest
masumi-network
masumi-networkOFFICIAL
Explore all skills by this author →
Website𝕏@MasumiNetworkGitHub

building-components

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

11|5|Updated Feb 3, 2025
Search Tags:#accessibility#design systems#frontend development#ui components#component design#react components
One-click install
npx skills add https://github.com/masumi-network/sokosumi --skill building-components-masumi-network
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-components
Source: https://github.com/masumi-network/sokosumi/tree/main/apps/web/.agents/skills/building-components
Command: npx skills add https://github.com/masumi-network/sokosumi --skill building-components-masumi-network

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide and resources for building modern, accessible, and composable UI components, ensuring high-quality user interfaces.

Core Features & Use Cases

  • Component Development: Guidance on creating primitives, components, and blocks.
  • Accessibility: Implementing ARIA, keyboard navigation, and WCAG compliance.
  • Composition Patterns: Techniques for creating reusable and flexible component APIs.
  • Use Case: You need to build a new modal component that is fully accessible, supports keyboard interactions, and can be easily themed using design tokens.

Quick Start

Use the building-components skill to learn about creating accessible modal 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 attributes and keyboard navigation?▼

To build accessible UI components, implement semantic HTML, manage focus correctly, apply ARIA attributes appropriately, and ensure full keyboard navigation support to meet WCAG compliance standards for robust user interfaces.

What are the best composition patterns for creating reusable React components?▼

The best composition patterns for reusable React components include polymorphism and the `asChild` pattern, which allow you to create flexible component APIs that seamlessly pass props and merge behaviors without duplicating implementation logic.

How do design tokens work when building a reusable component library?▼

Design tokens work by storing visual design attributes as variables, enabling you to build reusable component libraries that dynamically apply consistent styling and state management across modern frontend development environments.

How do I manage focus when developing an accessible modal component?▼

When developing an accessible modal component, manage focus by trapping keyboard focus within the dialog, restoring focus to the triggering element upon close, and utilizing semantic HTML combined with proper ARIA attributes.

What is the difference between primitives, components, and blocks in design systems?▼

In design systems, primitives are unstyled foundational elements, components are functional UI pieces built from primitives, and blocks are larger composed sections, creating a scalable architecture for component design and frontend development.

Related Skills

Explore More Software Engineering Skills→
AreteDriverAreteDriver
4

web-frontend-builder

Scaffold React, Next.js, or static HTML projects with TypeScript and Tailwind CSS.

Community
Intermediate
Happy-HorizonHappy-Horizon

building-components

Define accessible, composable UI components with Root/Item/Trigger/Content patterns for React-based projects.

Official
Advanced
SAPSAP
294

a11y-audit

Audit UI components for WCAG AA accessibility compliance.

Official
Advanced
algusaemalgusaem

tailwind-design-system

Build Tailwind CSS design systems with semantic tokens and CVA-based components.

Community
Intermediate