building-components

Create accessible UI components with composable APIs and design tokens.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/blenvi/blenvi --skill building-components-blenvi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: building-components
Source: https://github.com/blenvi/blenvi/tree/main/.agents/skills/building-components
Command: npx skills add https://github.com/blenvi/blenvi --skill building-components-blenvi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a structured approach for building modern, accessible UI components, helping teams move from ad-hoc patterns to a cohesive design system with reusable primitives, clear APIs, and accessible defaults.

Core Features & Use Cases

  • Guidance for creating primitives and full components with accessibility baked in, including ARIA patterns, keyboard navigation, and focus management.
  • Patterns for composable APIs (slots, as-child, and polymorphism), design tokens, theming, and documentation workflows.
  • Roadmaps for publishing to registries or npm, and for writing component documentation that accelerates adoption and maintenance.

Quick Start

Outline the initial steps to create a new component library following the guidance in this skill.

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 and keyboard navigation?

Building accessible UI components requires baking in ARIA patterns, keyboard navigation, and focus management by default rather than retrofitting them later. This approach ensures modular architecture and compliance throughout the component lifecycle.

What is the best way to create composable APIs for a component library?

Creating composable APIs involves implementing slot patterns, as-child, and polymorphism to define clear prop and slot structures. This enables flexible component composition while maintaining testability and maintainability across the library.

How do I integrate design tokens into a component library for theming?

Integrating design tokens into a component library requires defining structured theming patterns that map primitive values to UI components. This enables consistent visual language and simplifies theme management across different application contexts.

Does this approach work for publishing components to npm and registries?

Yes, this approach includes roadmaps for publishing components to npm and registries. It provides structured workflows for packaging modular primitives and full components to accelerate adoption and maintenance across teams.

When should I use composable UI primitives instead of full components?

You should use composable UI primitives when you need maximum flexibility for complex patterns, and full components when you need standardized solutions with accessible defaults. This structured approach supports both to balance customization and rapid adoption.

What do I need to start building a component library with accessible defaults?

To start building a component library with accessible defaults, you need a modular architecture plan and clear prop/slot APIs. This provides the foundational structure for creating primitives, establishing patterns, and generating documentation workflows.