skills.rest
remiconnesson
remiconnessonCOMMUNITY
Explore all skills by this author →
GitHub

building-components

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

Updated Nov 23, 2025
Search Tags:#typescript#accessibility#react#design systems#frontend development#ui components
One-click install
npx skills add https://github.com/remiconnesson/v0-video2md --skill building-components-remiconnesson
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-components
Source: https://github.com/remiconnesson/v0-video2md/tree/main/.agents/skills/building-components
Command: npx skills add https://github.com/remiconnesson/v0-video2md --skill building-components-remiconnesson

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides guidance and best practices for building modern, accessible, and composable UI components, streamlining the development process and ensuring high-quality user interfaces.

Core Features & Use Cases

  • Component Development: Learn how to build primitives, components, blocks, and templates.
  • Accessibility Implementation: Master ARIA, keyboard navigation, focus management, and WCAG compliance.
  • Composable APIs: Understand patterns like slots, render props, and controlled/uncontrolled state.
  • Design Systems: Set up design tokens, theming, and styling approaches.
  • Publishing: Get guidance on publishing components to npm or other registries.
  • Use Case: You're tasked with building a new modal component. This Skill will guide you through implementing accessible focus management, ARIA attributes, and composable patterns so the modal is robust and easy to integrate.

Quick Start

Consult the 'accessibility.mdx' reference for best practices on implementing keyboard navigation.

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 React components with proper ARIA and keyboard navigation?▼

To build accessible React components, implement ARIA attributes, keyboard navigation, focus management, and WCAG compliance following structured guidance on accessibility primitives, component blocks, and templates.

What's the best way to create composable APIs for UI components in TypeScript?▼

Creating composable APIs in TypeScript involves using patterns like slots, render props, and controlled or uncontrolled state management to ensure UI components are flexible and easy to integrate.

How do I set up design tokens and theming for a frontend design system?▼

Setting up design tokens and theming requires defining token structures and styling approaches that standardize visual properties across UI components within a frontend development design system.

How do I publish UI components to npm with proper documentation?▼

Publishing UI components to npm involves packaging the component library and writing clear component documentation that covers API usage, accessibility features, and integration patterns.

How do I manage state and polymorphism when building React UI components?▼

Managing state and polymorphism in React UI components requires implementing controlled and uncontrolled state patterns alongside polymorphic component architectures to support flexible rendering and data attributes.

How do I implement focus management for accessible modal components?▼

Implementing focus management for accessible modal components requires trapping focus within the modal, restoring focus on close, and applying correct ARIA attributes to ensure keyboard navigation and WCAG compliance.

Related Skills

Explore More Software Engineering Skills→
peterWang123589peterWang123589

antfu

Configure Vue/Vite projects with TypeScript strict mode, ESLint, and pnpm workspaces.

Community
Advanced
Asymmetric-alAsymmetric-al
1

building-components

Build composable, accessible UI components with design tokens and documentation.

Official
Advanced
haryelramalhoharyelramalho

building-components

Design accessible React UI components with composable, type-safe APIs.

Community
Advanced
tranhieutttranhieutt
70

radix-ui-design-system

Build accessible Radix UI design systems with headless primitives.

Community
Advanced