skills.rest
browleytwilio
browleytwilioCOMMUNITY
Explore all skills by this author →
GitHub

building-components

Define accessible UI components with YAML frontmatter and composable APIs.

Updated Apr 10, 2026
Search Tags:#accessibility#design-tokens#ui-patterns#component-design#composable-ui
One-click install
npx skills add https://github.com/browleytwilio/segmentdemobuilder --skill building-components-browleytwilio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-components
Source: https://github.com/browleytwilio/segmentdemobuilder/tree/main/.agents/skills/building-components
Command: npx skills add https://github.com/browleytwilio/segmentdemobuilder --skill building-components-browleytwilio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Standardizing the creation of UI components to be accessible, composable, and maintainable, while avoiding fragmented patterns and inconsistent APIs.

Core Features & Use Cases

  • Composable APIs enable flexible assembly of primitives and components
  • Accessibility-first design ensures keyboard navigation, ARIA semantics, and focus management
  • Design-token integration supports theming and design system consistency

Quick Start

Create a new composable UI component using the Root, Item, Trigger, and Content structure to enable accessible stateful patterns.

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 composable APIs?▼

Build accessible UI components using a structured Root, Item, Trigger, and Content pattern to enable accessible stateful interactions. This approach standardizes component creation to ensure keyboard navigation, ARIA semantics, and focus management are consistently applied across your design system.

What's the best way to standardize design system component APIs and prevent fragmented patterns?▼

Standardize design system component APIs by enforcing structured YAML frontmatter with name and description for every primitive. This provides machine-readable metadata for discovery and tooling, ensuring maintainable and consistent APIs across your library.

How does design token integration work when theming accessible UI components?▼

Design token integration works by mapping theme variables to the structured component definitions, ensuring design system consistency. This allows developers to apply theming across composable UI primitives without fragmenting visual styles or accessibility semantics.

Can I use this approach to implement polymorphism and asChild patterns for UI libraries?▼

Yes, this approach specifically supports library authors implementing asChild and polymorphism patterns. It defines a structured method for composing primitives and components, ensuring that polymorphic rendering maintains accessibility-first standards like ARIA semantics and keyboard navigation.

How do I document UI component usage and resources for team discovery?▼

Document UI component usage by attaching optional resources like scripts, references, and assets directly within the component's structured definition. Enforcing YAML frontmatter ensures the metadata is machine-readable, enabling automated tooling and seamless team discovery.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

tailwind-design-system

Define Tailwind CSS design tokens as CSS variables with shadcn/ui wrappers.

Community
Advanced
srstompsrstomp
8

api-design

Design REST API contracts with OpenAPI-ready specifications and YAML frontmatter.

Community
Advanced
BWCbewchanBWCbewchan
5

web-accessibility

Implement WCAG-aligned ARIA patterns and keyboard navigation in web applications.

Community
Intermediate
yuehanjohnyuehanjohn

building-components

Design accessible, composable UI components with TypeScript typings and keyboard navigation.

Community
Advanced