building-components

Name: building-components
Author: kokonut-labs

github.com/kokonut-labsDevelopment2.3k83 installsUpdated today

About building-components

A skill for designing and building UI components, aimed at developers creating accessible, composable component systems. It covers component patterns from API design and state to theming, distribution, and documentation.

Key features

01Component taxonomy and design principles
02Accessibility and keyboard navigation
03Composable APIs and polymorphism
04State and TypeScript patterns
05Design tokens and styling
06Registry, npm, and documentation guidance

Use cases

01Building accessible UI primitives and components
02Designing controlled or composable component APIs
03Creating a token-based theme
04Publishing and documenting a component library

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/kokonut-labs/kokonutui --skill building-components

After installing, type/building-componentsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/

accessibility.mdx

as-child.mdx

composition.mdx

data-attributes.mdx

definitions.mdx

design-tokens.mdx

docs.mdx

marketplaces.mdx

npm.mdx

polymorphism.mdx

principles.mdx

registry.mdx

state.mdx

styling.mdx

types.mdx

Details

From the project README

Building Components

When to use this skill

Use when the user is:

Building new UI components (primitives, components, blocks, templates)
Implementing accessibility features (ARIA, keyboard navigation, focus management)
Creating composable component APIs (slots, render props, controlled/uncontrolled state)
Setting up design tokens and theming systems
Publishing components to npm or a registry
Writing component documentation
Implementing polymorphism or as-child patterns
Working with data attributes for styling/state

References

definitions.mdx - Artifact taxonomy (primitives, components, blocks, templates)
principles.mdx - Core principles for component design
accessibility.mdx - ARIA, keyboard navigation, WCAG compliance
composition.mdx - Composable component patterns
as-child.mdx - The as-child pattern for element polymorphism
polymorphism.mdx - Polymorphic component patterns
types.mdx - TypeScript typing patterns for components
state.mdx - Controlled vs uncontrolled state management
data-attributes.mdx - Using data attributes for styling and state
design-tokens.mdx - Design token systems and theming
styling.mdx - Component styling approaches
registry.mdx - shadcn-style registry distribution
npm.mdx - Publishing components to npm
marketplaces.mdx - Component marketplace distribution
docs.mdx - Writing component documentation

Comments

Markdown supported

Details

Author: kokonut-labs
Repository: kokonut-labs/kokonutui
Category: Development
Installs: 83
GitHub stars: 2,252

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

855.5k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.