SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场21st-registry

21st-registry

编程与开发

查看项目

更新于 10-15 08:33

技能介绍

用途

21st-registry 用于在 21st.dev 上发布和管理你自己的作品，全部通过统一的 21st CLI（包名 @21st-dev/cli，命令为 21st）在终端完成。可发布的对象包括 React 组件、主题和模板，并可对已发布内容进行查看、编辑、下架或删除。

主要能力

  • 发布组件到团队库或公开目录，支持自动检测名称、slug、标签和演示。
  • 发布主题（CSS 文件，需同时定义 :root 和 .dark 的 token 值）为公开社区主题。
  • 发布模板（元数据列表，包含 URL 而非文件），进入草稿等待审核。
  • 查看组件与草稿清单，支持按状态（all/draft/published/private）和范围（all/personal/team:<uuid>）过滤。
  • 通过稳定引用（component:<id> 或 draft:<uuid>）打开 Studio 草稿或创建/恢复 CLI Review 修订。
  • 编辑已发布组件的元数据（描述、标签、可见性），团队管理员可管理队友组件的元数据。
  • 删除或下架内容：组件和主题为可逆的下架，模板为永久硬删除。
  • 目录审核操作：submit、withdraw、resubmit、remove-from-catalog。
  • 管理个人主页的 bento 看板，支持 component、library、social、note、hire、image、divider 等区块类型。
  • 查看团队、团队库、团队共享书签列表和团队组件。
  • 通过 21st init 写入 MCP 配置（支持 cursor、claude、codex、vscode、devin）。

使用方式

发布前必须认证。组件发布、清单、检出、元数据编辑和下架接受 21st 登录会话或 21st_sk_… API Key；主题/模板命令仍需要真实 API Key，可通过 --api-key、TWENTYFIRST_TOKEN 或 API_KEY_21ST 传入。

发布前建议先搜索（21st search "<query>"）以避免重复。

常用命令示例：

  • 查看组件：21st components
  • 查看草稿：21st components --status draft --scope personal --json
  • 打开组件：21st open component:123
  • 打开草稿：21st open draft:<uuid> --no-open
  • 发布组件：21st publish ./Component.tsx --to default --description "1-2 sentences: what it does and when to use it"
  • 更新已有组件：21st publish ./Component.tsx --component component:123 --description "What changed"
  • 发布主题：21st publish-theme ./my-theme.css --name "Midnight" [--tags dark,minimal]
  • 发布模板：21st publish-template "SaaS Starter" --site https://demo.example.com --preview https://example.com/thumb.png [--description "…"] [--price 49] [--buy-url https://…] [--video https://…] [--tags 1,2]
  • 编辑组件：21st edit component:<id> --type component --visibility published|private [--description "…"] [--tags a,b]
  • 删除组件：21st delete component:<id> --type component --yes
  • 提交目录：21st submit <slug>
  • 个人主页：21st profile get [--json]、21st profile set --file board.json、21st profile set --clear、21st profile upload ./cover.png
  • 团队：21st teams、21st team <teamId>、21st team-lists <teamId>、21st team-components <teamId> [--library <id>]
  • 初始化 MCP：21st init --client cursor|claude|codex|vscode|devin [--write]

发布组件时，位置参数文件路径会触发自动检测：名称来自导出的组件，slug 来自文件名，标签来自导入，演示自动查找或合成。对于新 slug 或自有修订，命令会验证依赖、安装并构建组件、创建 Studio 草稿、打开专用 CLI Review 并等待。发布控制的是访问权限（默认 published），目录精选始终是独立的审核操作。

演示可提供实时控件（knobs 面板）：在演示代码中声明一个模块级 settings 对象，并让默认导出接收 props，发布管线会据此生成实时面板。数值类型生成滑块，布尔值生成开关，CSS 颜色字符串生成颜色选择器，颜色字符串数组生成可编辑调色板，其他短字符串生成文本框。最多 24 个控件，键必须是普通标识符，值必须是字面量。

适用场景

  • 将 React 组件发布到团队库或 21st.dev 公开目录。
  • 管理已发布的组件、主题和模板，包括编辑元数据、下架或删除。
  • 从终端恢复和继续编辑旧的组件草稿或已发布组件。
  • 发布社区主题和模板。
  • 管理个人主页的 bento 看板布局。
  • 查看团队及其库、书签列表和组件。
  • 为支持的客户端写入 MCP 配置。

限制

  • 主题/模板命令必须使用真实 API Key，登录会话不适用。
  • 只有原始组件作者才能检出代码；团队管理员可编辑或下架队友组件的元数据。
  • 当保留的源码、依赖、样式、支持文件或默认演示无法安全复现时，检出会失败关闭。
  • 当前 CLI 命令只发送一个组件文件和一个演示，额外的本地文件和 21st.json 尚不被接受。
  • --registry-dep 尚不被 CLI Review 支持，创建新组件或自有修订前需移除。
  • 模板可见性由审核控制，--visibility 对模板被忽略；主题重命名用 --name，仅支持 public|private。
  • 封面生成是硬性发布门槛，必须等待；可选视频为后台尽力生成，发布不会等待。
  • 生成媒体不能替代对实时组件的审查。
  • 删除模板为永久硬删除，不可逆。
  • 个人主页 set 为完全替换，需先读取当前看板以保留现有内容。
  • 不得捏造描述，不得发布含 API 密钥、机密或未保存编辑的文件。
  • 对已有作品应先查看清单并使用其稳定引用，不要凭 slug 猜测。
  • 发布前应始终先搜索、提供有用的演示、验证构建与依赖、完成实时预览和主题 token 审查，并等待必需的封面。