Skills Beta

Skills combine Chromatic MCP server tools with your code changes into workflows that automate common tasks, such as: fixing accessibility violations or reviewing visual changes.

Your agent selects a skill automatically when your request fits. And skills are also available as slash commands.

Get the skills

The Chromatic plugin for Claude Code, Codex, and Cursor includes all skills. If you installed the plugin, you already have them.

Without the plugin, install the skills with the skills CLI:

# Choose skills from a list
npx skills add chromaui/chromatic-plugins

# Add one skill
npx skills add chromaui/chromatic-plugins --skill fix-accessibility-violations

# Update the skills you installed
npx skills update

Add --global to install the skills for every project rather than the current one.

Or copy the folders under plugins/chromatic/skills/ in chromaui/chromatic-plugins into your agent’s skills folder, such as ~/.claude/skills for Claude Code.

In Claude Code, /mcp shows the server, its tools, and your login, and /plugin manages the plugin. Tools are never slash commands; ask for them in plain words.

Run a skill

To run a skill by name:

• In Claude Code, type /chromatic: and the skill name, such as /chromatic:get-latest-build.
• In Codex, type $ and the name, such as $get-latest-build.
• In Claude Code, when you installed the skills with the skills CLI or copied them into your skills folder, drop the prefix: /get-latest-build.

What the plugin runs on its own

In Claude Code, the plugin adds two hooks so your agent checks Chromatic without being asked. After git push or gh pr create, a short model call reads the command and its result. If a commit was pushed or a pull request was opened, the agent is told to check the Chromatic build for that commit before it ends its turn. The note applies only in a repository with a chromatic.config.json.

The hooks only add a note for the agent. They start no build, call no Chromatic tool, change nothing in Chromatic, and send nothing to Chromatic.

Codex and Cursor get no hooks from the plugin. When Codex, Cursor, or any other agent connects, the server sends it a short guide that tells it to check the build after a push, so you can still ask “I pushed. What does Chromatic say about this branch?”

All skills

The plugin ships these skills:

• get-latest-build reports the latest Chromatic build for your project, on the current branch unless you name another.
• check-merge-readiness says whether your branch is ready to merge from Chromatic’s side, by checking whether the latest build is current and finished, then looking for broken or denied tests, changes waiting for review, open comments, and new accessibility violations. It reports what’s left and changes nothing.
• review-visual-changes compares each changed snapshot with the code change on your branch, and reports which changes look intended and which look like regressions.
• address-review-feedback reads the open reviewer comment threads on a build, makes the changes the reviewers asked for, and drafts a reply for each thread. It can’t post replies or resolve threads, so you do that in Chromatic.
• fix-broken-stories finds the stories a build could not capture, fixes the cause, and checks the fix on the next build.
• fix-accessibility-violations finds the accessibility violations a build reports, fixes them in your component source, and checks the fix on the next build.
• triage-flaky-stories finds quarantined and unstable stories, fixes what makes them flaky, and quarantines or brings one back when you ask. See unstable tests and quarantine tests.
• find-existing-component checks your repository and your project’s published Storybook on Chromatic for a component that already does what you need, and reports the closest matches with links to their stories.
• run-build runs a Chromatic build for just the stories you are changing. It needs CHROMATIC_PROJECT_TOKEN in your shell and asks before each build.
• reduce-snapshot-usage shows where a build’s snapshots go, by component, story, mode, and browser, and proposes story parameter changes that cut snapshot usage, with the coverage each one gives up. It shows you each edit and makes none until you agree.
• connect-project finds your Chromatic project ID from your Git remote, or asks you for a project link, and saves it to chromatic.config.json.
• check-project-setup checks that your repository is connected to the right Chromatic project by comparing the project’s framework, linked repository, enabled features, and recent builds with your config, CI, and Git remote. It reports what doesn’t line up and changes nothing.
• query-chromatic answers questions about your Chromatic data, such as a build by its number or which tests are pending, by running a read-only GraphQL query. It never reads your project token.

For details on each skill, see the chromaui/chromatic-plugins README. For examples of what to ask, see Try out a workflow.