Skills

Install the Skill when an agent needs to build or review a page that consumes blackwork. The package version and exported components remain the source of truth; the Skill supplies the inspection order and project conventions.

Before an AI agent builds a Blackwork page, it needs to check the installed version, available components, and style setup. The blackwork-ui skill provides that guidance and helps the agent review spacing, heading levels, and themes.

The official shadcn skill covers finding upstream components and using the CLI. The Blackwork skill explains how to use the blackwork package and combine its layouts and components. The two skills can work together.

Install

Install with the Skills CLI:

Bash

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

To install for a specific agent, specify the agent in the command. For later updates, run the Skills CLI update command from the project where the skill is installed.

When it applies

Use the skill for tasks such as:

building or reviewing pages that use blackwork
putting together blogs, documentation, content lists, or article pages
building product pages, settings panels, dashboards, editors, or live previews
adjusting heading levels, spacing, responsive layouts, dark mode, or accessible labels for icon buttons

The skill checks the installed Blackwork version and actual package exports first. Components and import paths can differ between releases, so this check helps avoid mistakes from outdated examples.

What it checks

Whether an existing Blackwork component or variant fits the task.
Whether page titles, panel titles, and toolbar actions are easy to distinguish.
Whether headers and toolbars use theme variables, with colors for generated content managed separately in application state.
Whether icon-only buttons have accessible names and visible hints such as tooltips.
Whether previews that need fixed proportions have an aspect ratio and keep overflowing content within the container.
Whether desktop and mobile layouts work, with both light and dark themes checked when supported.
Whether locally maintained shadcn source stays separate from npm-installed Blackwork, so the shadcn CLI does not overwrite package files.

The skill includes three references that the agent reads as needed:

package-contract.md: versions, exports, styles, themes, server components, forms, and the relationship with shadcn source
content-and-product.md: blogs, documentation, lists, articles, and product pages
workbench.md: settings panels, toolbars, canvases, previews, and responsive checks

Is MCP required?

No extra MCP setup is needed for projects that use the published blackwork npm package. The skill consists of instructions and reference documents and is ready to use after installation.

For projects that also need to search, view, or install components and blocks from a shadcn registry, shadcn MCP can be configured separately. See the shadcn MCP documentation for usage, or the registry MCP guide to set up a registry.