Skills
.Work. You
Rest

compound-components

Community

Build accessible, composable UI primitives.

Software Engineering#accessibility#react#compound-components#ui-patterns#radix-ui#aria#headless-ui
Authordylantarre
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps teams build accessible, composable UI primitives that manage complex interaction patterns (open state, focus, keyboard, ARIA) without duplicating logic across components.

Core Features & Use Cases

  • Root/Trigger/Content/Item architecture with context sharing
  • ARIA roles and data-state attributes for accessibility
  • Keyboard navigation: Arrow keys, Enter/Space, Escape
  • Focus management and accessibility best practices
  • Use case: building a design-system library with Select, Dialog, Tabs, Accordion, and Menu

Quick Start

Outline the steps to implement compound components in your React app:

  1. Define the main parts: Root, Trigger, Content, Item.
  2. Create a Root with unified state, IDs, and context.
  3. Implement Trigger and Content to read context and toggle open state.
  4. Add keyboard navigation and focus management.
  5. Validate with keyboard-only navigation and screen readers.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: compound-components
Download link: https://github.com/dylantarre/design-system-skills/archive/main.zip#compound-components

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.