building-components

作者： vercel

現代化、可存取且可組合的UI元件全面指南。涵蓋元件分類（基礎元件、複合元件、區塊、模板）、核心設計原則，以及無障礙實作（包含ARIA、鍵盤導航與WCAG合規性）。包含可組合API模式、多型、受控/非受控狀態，以及用於彈性元素組合的as-child模式。提供設計標記、主題系統、樣式方法，以及使用...的指引。

npx skills add https://github.com/vercel/components.build --skill building-components

下載 ZIP GitHub

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

來自 vercel 的更多技能

benchmark-sandbox

在 Vercel Sandbox 中執行 vercel-plugin 評估場景，而非本機 WezTerm 面板。佈建搭載 Claude Code 與預裝外掛的臨時微型虛擬機器…

emil-design-eng

此技能編碼了 Emil Kowalski 關於 UI 打磨、元件設計、動畫決策，以及那些讓軟體體驗出色的隱形細節的設計哲學。

vercel-react-best-practices

來自 Vercel Engineering 的 React 與 Next.js 效能優化指南。在撰寫、審查或重構 React/Next.js… 時應使用此技能。

vercel-react-best-practices

來自 Vercel Engineering 的 React 與 Next.js 效能優化指南。在撰寫、審查或重構 React/Next.js… 時應使用此技能。

產出一份技術指南，透過漸進式範例教導真實世界的使用案例。概念僅在讀者需要時才引入。

發佈 vercel-plugin — 執行閘門、提升版本、生成產物、提交並推送。當被要求「發佈」、「出貨」、「提升並推送」或「切一個發佈」時使用。

針對 dev3000 的 Vercel 專案簽出執行 DeepSec。用於一鍵 DeepSec 設定、專案上下文引導啟動、有限制的初次處理，以及…

將已合併的 Next.js 拉取請求從 canary 回溯移植到先前的發行分支，例如 next-16-2。當使用者要求回溯移植、揀選提交或開啟…時使用。