Claude MarketplacesSubmit
vercel avatar

Building Components

vercel/components.buildOfficial

The building-components skill guides developers through creating modern, accessible, and reusable UI components by providing reference documentation on component architecture, accessibility standards, composition patterns, design tokens, and publishing strategies. It serves developers building component libraries, design systems, or individual UI components who need technical guidance on ARIA implementation, polymorphism, state management, and distribution methods. The skill solves the problem of ensuring components follow best practices for accessibility, composability, and maintainability while providing clear patterns for publishing and documenting component systems.

skills.sh installs
15.1K
GitHub stars
802
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add vercel/components.build --skill building-components --agent claude-code

Installs into .claude/skills of the current project.

Files

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

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/vercel/components.build
Categories
Frontend Development, DevOps & CI/CD, Documentation, Cloud & Infrastructure, Design & UI/UX

Recommended

More Frontend Development
1clerk avatarclerk-swiftclerk/skillsImplement Clerk authentication for native Swift and iOS apps using ClerkKit and ClerkKitUI source-guided patterns. Use for prebuilt AuthView or custom native fl15Kskills.sh installs
2fastapi avatarfastapifastapi/fastapiFastAPI best practices and conventions. Use when working with FastAPI APIs, Pydantic models, dependencies, streaming responses including Server-Sent Events (SSE14.9Kskills.sh installs
3clerk avatarclerk-androidclerk/skillsImplement Clerk authentication for native Android apps using Kotlin and Jetpack Compose with clerk-android source-guided patterns. Use for prebuilt AuthView/Use14.9Kskills.sh installs
4clerk avatarclerk-expoclerk/skillsAdd Clerk authentication to Expo and React Native apps using @clerk/expo. Use for Expo setup, prebuilt native components (AuthView, UserButton), custom sign-in/14.8Kskills.sh installs
5vuejs-ai avatarcreate-adaptable-composablevuejs-ai/skillsCreate a library-grade Vue composable that accepts maybe-reactive inputs (MaybeRef / MaybeRefOrGetter) so callers can pass a plain value, ref, or getter. Normal14.8Kskills.sh installs
6jeffallan avatarflutter-expertjeffallan/claude-skillsUse when building cross-platform applications with Flutter 3+ and Dart. Invoke for widget development, Riverpod/Bloc state management, GoRouter navigation, plat14.7Kskills.sh installs