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 指南。