skilld
All skills
vercel avatar

/building-components

@5719ce3
by vercelvercel/components.build797 stars
56

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.

Ask your Agent

Use this Skill: https://skilld.dev/gh/vercel/components.build/building-components

This session only. Nothing lands on disk.

SKILL.md

≈67 tokens always: the name and description. ≈464 when used: this file.

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

Source: SKILL.md on GitHub

Third-party checks

No alerts16d5 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    This skill provides a comprehensive guide for building modern UI components, focusing on accessibility, composition, and distribution patterns. No security issues were detected.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • Runlayer7mo

    16 files scanned · No issues

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at 5719ce3. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 months ago.

Steadyupdated 8 months ago

Topics

README badge

README badge for vercel/components.build

What it does

Provides patterns and reference guides for building accessible, composable UI components from primitives to templates. Covers component design principles, accessibility (ARIA, keyboard navigation), composition patterns, TypeScript typing, state management, design tokens, and publishing to npm or registries.

Generated from the current SKILL.md.

Frequently asked

Does this skill cover accessibility implementation?
Yes. The skill includes guidance on ARIA attributes, keyboard navigation, focus management, and WCAG compliance through dedicated references.
What component patterns does this cover?
The skill covers primitives, components, blocks, templates, polymorphic components, as-child patterns, slots, render props, and controlled/uncontrolled state patterns.
Does this include publishing and distribution guidance?
Yes. The skill covers npm publishing, shadcn-style registry distribution, component marketplaces, and writing documentation.
Does this address design tokens and theming?
Yes. The skill includes references on design token systems, theming approaches, and data attributes for styling and state management.
What TypeScript support is included?
The skill includes TypeScript typing patterns for components but does not focus on TypeScript as a primary topic.

Generated from the current SKILL.md. These answers refresh after source changes.