SuperAPI AI 工具集

building-components

编程与开发

查看项目

更新于 10-15 23:31

技能介绍

用途:该资源是一份构建现代、可访问、可组合 UI 组件的指南,适合在新建组件、实现无障碍支持或设计可组合 API 时参考。其结构采用“渐进披露”方式,每份参考文件按需加载,仅在任务需要该深度时读取其中一份。

主要能力:提供多个主题的参考文件,包括:definitions.mdx(产物分类:primitives、components、blocks、templates 及各自适用场景)、principles.mdx(单一职责、组合优于配置、最小 API 面等核心设计原则)、accessibility.mdx(ARIA 角色与属性、键盘导航、焦点管理、WCAG 合规模式)、composition.mdx(插槽模式、render props、受控/非受控状态、复合组件)、as-child.mdx(Radix 风格的 asChild 多态模式,避免包裹 div)、polymorphism.mdx(as 属性、泛型多态组件、TypeScript 类型推断)、types.mdx(可辨识联合、泛型 props、ComponentPropsWithoutRef、forwardRef 等类型模式)、state.mdx(受控与非受控状态、useControllableState、默认值模式)、data-attributes.mdx(用 data-* 属性驱动 CSS 状态、测试钩子与样式变体)、design-tokens.mdx(CSS 自定义属性令牌系统、主题、暗色模式、命名约定)、styling.mdx(CSS Modules、Tailwind、CSS-in-JS、CVA、样式封装)、registry.mdx(shadcn/ui 风格注册表分发、components.json、CLI 可安装组件)、npm.mdx(npm 包发布:入口点、打包、peer 依赖、package.json 字段)、marketplaces.mdx(通过 Shadcn 注册表、v0 等组件市场分发)、docs.mdx(编写组件文档:props 表、用法示例、Storybook stories)。

使用方式:按需读取单个参考文件,而非一次性全部加载;具体在该页面的 references 目录下查阅对应文件。各文件用途已在其说明中标注,便于按任务匹配选择。

适用场景:构建新组件、实现无障碍、创建可组合 API、设计组件类型、设置设计令牌、选择样式方案、发布组件库或编写组件文档时。

限制:资料未提供具体安装命令、代码示例细节、收费或价格信息,相关内容暂未提供。