@vercel/building-components

Guide for building modern, accessible, and composable UI components. Use when building new components, implementing accessibility, creating composable APIs, setting up design tokens, publishing to npm/registry, or writing component documentation.

View in AI SkillSafe app
Scanned · no findings
3004 downloads
0 stars
0 demos
SKILL.md
namebuilding-components
descriptionGuide for building modern, accessible, and composable UI components. Use when building new components, implementing accessibility, creating composable APIs, setting up design tokens, publishing to npm/registry, or writing component documentation.

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

Embed badges

Add these to your README to show the skill's verification status.

SkillSafe verified badge
Verified badge
[![SkillSafe verified badge](https://api.skillsafe.ai/v1/badge/@vercel/building-components/verified)](https://skillsafe.ai/skill/@vercel/building-components/)
Installs badge
Installs badge
[![Installs badge](https://api.skillsafe.ai/v1/badge/@vercel/building-components/installs)](https://skillsafe.ai/skill/@vercel/building-components/)
Scan badge
Scan badge
[![Scan badge](https://api.skillsafe.ai/v1/badge/@vercel/building-components/scan)](https://skillsafe.ai/skill/@vercel/building-components/)
Eval pass rate badge
Eval pass rate
[![Eval pass rate badge](https://api.skillsafe.ai/v1/badge/@vercel/building-components/eval)](https://skillsafe.ai/skill/@vercel/building-components/)