SuperAPI AI 工具集

component-creation

数据与分析

查看项目

更新于 10-16 09:46

技能介绍

用途:该技能用于指导在 NVIDIA Elements 项目中创建新组件,强调在创建或修改组件前必须先阅读组件创建指南。适用情形包括从零新建组件、了解组件必需的文件结构、搭建测试样板、选择基类或 mixin(ButtonFormControlMixin 还是 LitElement)、掌握组件元数据与注册模式,以及设置 JSDoc 注释。

工作流:先收集需求,确认组件名(kebab-case)、用途,以及直接使用 LitElement 还是为按钮类交互组件应用 ButtonFormControlMixin;再阅读最接近的参考组件以理解实际模式;然后在 projects/core/src/<component-name>/ 下创建 10 个必需文件,包括组件类与元数据、渲染方法、使用 CSS 自定义属性的样式、带 @summary JSDoc 的示例模板、单元测试、无障碍测试、视觉回归测试、SSR 测试、lighthouse 测试,以及 define.ts 注册和 index.ts 无副作用导出;接着按字母顺序把 import '@nvidia-elements/core/<component-name>/define.js' 加入 projects/core/src/bundle.ts;最后运行 pnpm run lint 和 pnpm run test 验证。

参考组件:button 为 ButtonFormControlMixin 模式示例,badge 为 LitElement 模式示例,card 为插槽组合示例。其他参考文档涉及 TypeScript、示例、测试、属性与样式设计指南。限制:资料未说明该技能的收费、价格、平台与具体效果,需查阅项目文档为准。