components-build by nolly-studio/components-build-skill
npx skills add https://github.com/nolly-studio/components-build-skill --skill components-build构建现代化、可组合且无障碍 UI 组件的全面指南。包含 16 个规则类别,涵盖从核心原则到分发的所有内容,由 Hayden Bleasel 和 shadcn 共同撰写。
在以下情况下参考本指南:
| 优先级 | 类别 | 重点 | 前缀 |
|---|---|---|---|
| 1 | 概述 | 规范范围与目标 | overview |
| 2 | 原则 | 核心设计理念 | principles |
| 3 | 定义 | 常用术语 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
definitions |
| 4 | 组合 | 分解复杂组件 | composition |
| 5 | 无障碍 | 键盘、屏幕阅读器、ARIA | accessibility |
| 6 | 状态 | 受控/非受控模式 | state |
| 7 | 类型 | TypeScript 属性与接口 | types |
| 8 | 多态性 | 使用 as 属性切换元素 | polymorphism |
| 9 | As-Child | Radix Slot 组合模式 | as-child |
| 10 | 数据属性 | data-state 和 data-slot | data-attributes |
| 11 | 样式 | Tailwind CSS、cn 工具函数、CVA | styling |
| 12 | 设计令牌 | CSS 变量与主题 | design-tokens |
| 13 | 文档 | 组件文档 | documentation |
| 14 | 注册表 | 组件注册表 | registry |
| 15 | NPM | 发布到 npm | npm |
| 16 | 市场 | 组件市场 | marketplaces |
overview - 规范范围、目标与理念principles - 可组合性、无障碍性、可定制性、透明度definitions - 常用术语(基础组件、复合组件、无头组件等)composition-root - 根组件,使用 Context 共享状态composition-item - 项目包装组件composition-trigger - 交互式触发器组件composition-content - 内容显示组件composition-export - 命名空间导出模式accessibility-semantic-html - 使用恰当的 HTML 元素accessibility-keyboard - 完整的键盘导航支持accessibility-aria - 正确的 ARIA 角色、状态和属性accessibility-focus - 焦点管理与恢复accessibility-live-regions - 屏幕阅读器播报accessibility-contrast - 颜色对比度要求state-uncontrolled - 内部状态管理state-controlled - 外部状态委托state-controllable - 使用 useControllableState 支持两种模式types-extend-html - 扩展原生 HTML 属性types-export - 导出属性类型供使用者使用types-single-element - 一个组件包装一个元素polymorphism-as-prop - 更改渲染的元素类型polymorphism-typescript - 类型安全的多态组件polymorphism-defaults - 语义化元素默认值as-child-slot - 用于属性合并的 Radix Slotas-child-composition - 与子组件组合data-attributes-state - 使用 data-state 表示样式状态data-attributes-slot - 使用 data-slot 定位子组件styling-cn-utility - 结合 clsx 和 tailwind-mergestyling-order - 基础样式 → 变体 → 条件样式 → 用户覆盖styling-cva - 使用 Class Variance Authority 处理变体styling-css-variables - 使用 CSS 变量处理动态值design-tokens-css-variables - 将设计令牌定义为 CSS 变量design-tokens-theming - 支持浅色/深色模式和主题documentation-props - 使用 JSDoc 记录所有属性documentation-examples - 提供使用示例registry-structure - 注册表文件结构registry-schema - 组件元数据模式npm-package-json - 包配置npm-exports - 模块导出marketplaces-distribution - 组件分发策略阅读单个规则文件以获取详细解释和代码示例:
rules/composition/SKILL.md
rules/accessibility/SKILL.md
rules/styling/SKILL.md
每个规则文件包含:
获取包含所有扩展规则的完整指南:AGENTS.md
cn() 工具函数结合 tailwind-merge共同作者:
改编为 AI 技能:
基于 components.build 规范。
每周安装数
111
代码仓库
GitHub 星标数
43
首次出现
2026 年 1 月 28 日
安全审计
已安装于
claude-code80
opencode71
codex69
cursor68
gemini-cli61
github-copilot60
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.
Reference these guidelines when:
| Priority | Category | Focus | Prefix |
|---|---|---|---|
| 1 | Overview | Specification scope and goals | overview |
| 2 | Principles | Core design philosophy | principles |
| 3 | Definitions | Common terminology | definitions |
| 4 | Composition | Breaking down complex components | composition |
| 5 | Accessibility | Keyboard, screen readers, ARIA | accessibility |
| 6 | State | Controlled/uncontrolled patterns | state |
| 7 | Types | TypeScript props and interfaces | types |
| 8 | Polymorphism | Element switching with as prop | polymorphism |
| 9 | As-Child | Radix Slot composition pattern | as-child |
| 10 | Data Attributes | data-state and data-slot | data-attributes |
| 11 | Styling | Tailwind CSS, cn utility, CVA | styling |
| 12 | Design Tokens | CSS variables and theming | design-tokens |
| 13 | Documentation | Component documentation | documentation |
| 14 | Registry | Component registries | registry |
| 15 | NPM | Publishing to npm | npm |
| 16 | Marketplaces | Component marketplaces | marketplaces |
overview - Specification scope, goals, and philosophyprinciples - Composability, accessibility, customization, transparencydefinitions - Common terminology (primitive, compound, headless, etc.)composition-root - Root component with Context for shared statecomposition-item - Item wrapper componentscomposition-trigger - Interactive trigger componentscomposition-content - Content display componentscomposition-export - Namespace export patternaccessibility-semantic-html - Use appropriate HTML elementsaccessibility-keyboard - Full keyboard navigation supportaccessibility-aria - Proper ARIA roles, states, and propertiesaccessibility-focus - Focus management and restorationaccessibility-live-regions - Screen reader announcementsaccessibility-contrast - Color contrast requirementsstate-uncontrolled - Internal state managementstate-controlled - External state delegationstate-controllable - Support both patterns with useControllableStatetypes-extend-html - Extend native HTML attributestypes-export - Export prop types for consumerstypes-single-element - One component wraps one elementpolymorphism-as-prop - Change rendered element typepolymorphism-typescript - Type-safe polymorphic componentspolymorphism-defaults - Semantic element defaultsas-child-slot - Radix Slot for prop mergingas-child-composition - Compose with child componentsdata-attributes-state - Use data-state for styling statesdata-attributes-slot - Use data-slot for targeting sub-componentsstyling-cn-utility - Combine clsx and tailwind-mergestyling-order - Base → Variants → Conditionals → User overridesstyling-cva - Class Variance Authority for variantsstyling-css-variables - Dynamic values with CSS variablesdesign-tokens-css-variables - Define tokens as CSS variablesdesign-tokens-theming - Support light/dark modes and themesdocumentation-props - Document all props with JSDocdocumentation-examples - Provide usage examplesregistry-structure - Registry file structureregistry-schema - Component metadata schemanpm-package-json - Package configurationnpm-exports - Module exportsmarketplaces-distribution - Component distribution strategiesRead individual rule files for detailed explanations and code examples:
rules/composition/SKILL.md
rules/accessibility/SKILL.md
rules/styling/SKILL.md
Each rule file contains:
For the complete guide with all rules expanded: AGENTS.md
cn() utility with tailwind-mergeCo-authored by:
Adapted as an AI skill by:
Based on the components.build specification.
Weekly Installs
111
Repository
GitHub Stars
43
First Seen
Jan 28, 2026
Security Audits
Gen Agent Trust HubWarnSocketPassSnykWarn
Installed on
claude-code80
opencode71
codex69
cursor68
gemini-cli61
github-copilot60
TanStack Query v5 完全指南:React 数据管理、乐观更新、离线支持
2,500 周安装