Claude MarketplacesSubmit
nolly-studio avatar

Components Build

nolly-studio/components-build-skill

Co-authored by Hayden Bleasel and shadcn, this is the components.build specification packaged as a skill. It guides Claude through building React component libraries with the same patterns you see in shadcn/ui: Radix Slot composition, the asChild pattern, CVA for variants, and proper TypeScript polymorphism. The 16 rule categories cover everything from ARIA implementation to publishing on registries. Honestly, this is less about learning new tricks and more about enforcing consistency when you're building or reviewing a design system. If you're already doing Tailwind plus Radix primitives, these are likely the patterns you've settled on anyway.

skills.sh installs
166
GitHub stars
53
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add nolly-studio/components-build-skill --skill components-build --agent claude-code

Installs into .claude/skills of the current project.

Files

Components.build Specification

Comprehensive guidelines for building modern, composable, and accessible UI components. Contains 16 rule categories covering everything from core principles to distribution, co-authored by Hayden Bleasel and shadcn.

When to Apply

Reference these guidelines when:

  • Creating new React components or component libraries
  • Designing component APIs and prop interfaces
  • Implementing accessibility features (keyboard, ARIA, focus management)
  • Building composable component architectures
  • Styling components with Tailwind CSS and CVA
  • Publishing components to registries or npm

Rule Categories by Priority

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/nolly-studio/components-build-skill
Categories
Frontend Development, DevOps & CI/CD, Code Review & Quality, Design & UI/UX
First seen
Jun 3, 2026

Recommended

More Frontend Development
1rohitg00 avatarfile-watcherrohitg00/pro-workflowConfigure file watching hooks to auto-react to config changes, env file updates, and dependency modifications. Use to set up reactive workflows.165skills.sh installs
20xsardius avatarwagmi0xsardius/onchain-typescript-skillsReact hooks for Ethereum and EVM blockchain interactions using Wagmi v3. Use when building React or Next.js apps with wallet connections, contract reads/writes,163skills.sh installs
3community-access avataremail-accessibilitycommunity-access/accessibility-agentsAudits HTML email templates for accessibility under email client rendering constraints. Covers table-based layout, inline styling, image blocking fallbacks, sem162skills.sh installs
4jerrar670 avatarimplement_lenis_scrolljerrar670/surf-websiteInstructions for implementing Lenis smooth scrolling in a Next.js or React application.162skills.sh installs
5solar-luna avatarwechat-article-formattersolar-luna/fully-automatic-article-generation-skill将Markdown文章转换为美化的HTML格式，适配微信公众号发布。应用专业CSS样式、代码高亮、优化排版。当用户说"美化这篇文章"、"转换为HTML"、"优化公众号格式"、"生成公众号HTML"时使用。157skills.sh installs
6oimiragieo avatardiagram-generatoroimiragieo/agent-studioGenerates architecture, database, and system diagrams using Mermaid syntax. Creates visual representations of system architecture, database schemas, component r146skills.sh installs