Blackwork

Skill

为 AI Agent 安装 Blackwork 使用指南,辅助页面开发和检查。

Skill

需要 Agent 开发或检查使用 blackwork 的页面时安装此 Skill。项目实际安装的版本和导出内容仍是唯一依据;Skill 负责提供检查顺序和项目约定。

让 AI Agent 开发 Blackwork 页面时,需要先确认项目安装的版本、可用组件和样式配置。blackwork-ui Skill 提供这些使用指引,并帮助 Agent 检查页面的间距、标题层级和主题效果。

官方 shadcn Skill 侧重查找上游组件和使用 CLI;Blackwork Skill 则说明如何在项目中使用 blackwork 包,以及如何组合布局和组件。两者可以配合使用。

安装

使用 Skills CLI 安装:

Bash
pnpm dlx skills add chengpeiquan/blackwork --skill blackwork-ui

如需只为某个 Agent 安装,可在命令中指定 Agent。后续更新使用 Skills CLI 的更新命令,在安装 Skill 的项目中执行即可。

什么时候使用

以下任务适合使用这个 Skill:

  • 开发或检查使用 blackwork 的页面
  • 搭建博客、文档站、内容列表或文章页
  • 开发产品页、设置面板、仪表盘、编辑器或实时预览
  • 调整标题层级、间距、响应式布局、深色模式或图标按钮的无障碍说明

Skill 会先检查项目安装的 Blackwork 版本和实际导出内容。不同版本的组件和导入入口可能不同,这一步可以减少套用旧示例带来的问题。

页面开发时会检查什么

  • 是否已有合适的 Blackwork 组件或 variant,可以直接复用。
  • 页面标题、面板标题和工具栏操作是否容易区分。
  • 页头、工具栏等界面是否使用主题变量;编辑器生成内容的颜色是否由业务状态单独管理。
  • 纯图标按钮是否有无障碍名称,以及 Tooltip 等可见提示。
  • 固定比例的预览是否设置宽高比,并在容器内处理溢出内容。
  • 桌面和手机布局是否可用,支持的浅色和深色主题是否都已检查。
  • 项目自行维护的 shadcn 源码是否与 npm 安装的 Blackwork 分开,避免用 shadcn CLI 覆盖包内文件。

Skill 附带三份参考文档,Agent 会按任务需要读取:

  • package-contract.md:版本、导出入口、样式、主题、服务端组件、表单,以及与 shadcn 源码的关系
  • content-and-product.md:博客、文档、列表、文章和产品页面
  • workbench.md:设置面板、工具栏、画布、预览和响应式检查

是否需要 MCP?

只使用已发布的 blackwork npm 包时,无需额外配置 MCP。Skill 本身由指引和参考文档组成,安装后即可使用。

如果项目还需要搜索、查看或安装 shadcn registry 中的组件和 blocks,可以另行配置 shadcn MCP。具体用法见 shadcn MCP 文档;需要搭建自己的 registry 时,参考 registry MCP 指南。