SuperAPI AI 工具集

create-element

通用与其它

查看项目

更新于 10-15 20:29

技能介绍

用途:为 Elements 注册表(tryelements.dev)创建新的 UI 元素,适用于新增按钮、输入框、卡片等基础组件,或主题切换、支付等集成型功能块。

主要能力:提供脚手架脚本生成目录结构,按组件模式实现代码,构建并注册到注册表,并支持通过 Context7 获取外部依赖(如 radix-ui、next-themes、cmdk 等)的最新文档。元素类型分为 registry:ui(基础 UI 原语)、registry:block(功能完整块)、registry:example(用法示例)。

使用方式:先执行 bun run .claude/skills/create-element/scripts/scaffold-element.ts <category> <name> 生成脚手架;再参考 references/component-patterns.md 实现组件;随后运行 bun run build:registry && bun run dev 构建并预览。涉及外部依赖时,先用 mcp__context7__resolve-library-id 与 mcp__context7__query-docs 查询文档。目录结构为 registry/default/blocks/{category}/{component-name}/,含 registry-item.json、components/elements/{component}.tsx 及可选 routes。

适用场景:向注册表添加新组件、构建集成组件、创建新分类(需配置 provider 分组与 MDX 文档)。

限制与注意:使用 hooks 的组件需加 "use client";避免硬编码颜色,使用 CSS 变量;主题相关组件需处理 hydration;修改后必须运行 build:registry;新分类需在 registry-loader.ts、providers.tsx 等处配置 provider 元数据与图标,并创建对应 MDX 文档。具体收费、平台支持等信息暂未提供。