Skip to main content
skill CX Codex

meticulous-test — Claude Code skill: visual tests for frontend changes

Runs a Meticulous test run after a frontend change, then hands the result to meticulous-review so each visual diff gets classified.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add alwaysmeticulous/skills --skill meticulous-test -a claude-code
Open on GitHub

What meticulous-test does

The skill walks the agent through the whole loop: build the frontend the same way CI does, upload the artefact as a reusable deployment with agent upload-build, and capture the deploymentId. Then agent trigger-test-run compares that build against a base and prints a testRunId. The build is uploaded once — the same deploymentId can be re-triggered against a different base without rebuilding or re-uploading.

A base is required. The command infers it from the current directory (merge-base with the origin default branch) or takes --baseSha. By default the run blocks until it finishes, and a Failure status means visual differences were detected — a normal verdict, not an error. Pass --dontWaitForTestRunToComplete to return right away.

The catch is uncommitted changes. With a dirty working tree the run is recorded against an ephemeral commit rather than your HEAD, so commands that resolve a run from the local checkout won't find it — always pass --testRunId explicitly to the review step in that case. Untracked files are rejected, so git add them first. Before starting, the skill suggests running meticulous-cli-update unless it already ran earlier in the conversation.

What it helps with

  • build the frontend the way CI does and upload the artefact in one step
  • re-run a visual test against a different base without rebuilding
  • classify each visual change as intended or unintended
  • test a feature end-to-end before opening a PR, with changes still uncommitted
  • capture the testRunId and hand it to the visual diff review

Example prompts for the agent

  • run meticulous-test after my component changes and show me what shifted visually
  • trigger a test run against the main base and hand the result to meticulous-review
  • my working tree is dirty — run meticulous-test and pass --testRunId to the review

How to install meticulous-test

1Skills CLI (Vercel)

npx skills add alwaysmeticulous/skills --skill meticulous-test -a claude-code

2Manually: put the files in place

~/.claude/skills/meticulous-test/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/meticulous-test/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about meticulous-test

How do I install meticulous-test in Claude?

Run npx skills add alwaysmeticulous/skills --skill meticulous-test -a claude-code. The skill lands at ~/.claude/skills/meticulous-test/SKILL.md.

What does meticulous-test do?

It guides the agent through building the frontend, uploading the artefact, triggering a Meticulous run, and passing the testRunId to the meticulous-review skill for classifying visual changes.

Why can't the review find my test run?

If you tested with uncommitted changes, the run is tied to an ephemeral commit instead of HEAD. Pass --testRunId explicitly to the review step in that case.

Source text

SKILL.md · ISC
---
name: meticulous-test
description: Run a Meticulous test run after implementing a frontend change, then hand off to the `meticulous-review` skill to classify each visual change as intended or unintended. Uploads the build once — the same build can be re-triggered against different bases without rebuilding — and it works with uncommitted changes. Use when implementing a feature autonomously end-to-end before creating a PR.
user-invocable: true
---

To test a frontend change using Meticulous, follow the workflow below step by step, using the CLI or MCP commands as described.

> Before starting, run the `meticulous-cli-update` skill to ensure the Meticulous CLI and skills are up to date — unless it has already run earlier in this conversation, in which case skip it.

If you are already given a test run id, skip to Step 4.

## Step 1 -- Build the frontend

1. Find out what build artefact Meticulous expects by checking your CI config for the corresponding step:
   - GitHub: `.github/workflows/*.yml` for `uses: alwaysmeticulous/report-diffs-action/upload-assets@v1` (build assets) or `upload-container@v1` (docker image)
   - GitLab: `.gitlab-ci.yml` (or an included `.gitlab/ci/*.yml`) for `npx @alwaysmeticulous/cli ci upload-assets` (build assets) or `ci upload-container` (docker image)
   - Bitbucket: `bitbucket-pipelines.yml` for the same `npx @alwaysmeticulous/cli ci upload-assets` / `ci upload-container` step
2. Build the frontend following the same instructions as used in that CI config.

## Step 2 -- Upload the build

Register the build as a reusable deployment with `agent upload-build`. This uploads the artefact and prints a `deploymentId` to stdout — it does **not** trigger a run yet.

```bash
# CLI
meticulous agent upload-build --appDirectory <path-to-build>     # assets
meticulous agent upload-build --localImageTag <image-tag>        # container

# MCP (not 1:1 — request an upload URL, upload the artifact yourself, then register it)
request_asset_upload(size=<zipByteSize>)      # or request_container_upload() — no required args
# ... upload the zip/image to the returned URL/registry yourself ...
register_asset_build(uploadId="<id>", commitSha="<sha>")      # or register_container_build(uploadId="<id>", commitSha="<sha>")
```

- `--appDirectory` points to the build output directory (e.g. a `dist/` subfolder); `--localImageTag` is the local Docker image tag. The build mode is auto-detected.
- The build's commit defaults to the local git HEAD. If the working tree is dirty, it is captured as an **ephemeral commit** (printed as `commitSha (local, ephemeral due to dirty working tree): …`) — see the uncommitted-changes note below.
- Untracked files are rejected (they can't be captured) — `git add` them first.
- Capture the `deploymentId` from stdout (pass `--verbose` to also see progress on stderr).

## Step 3 -- Trigger a test run

Trigger a run for the deployment, comparing against a base. Run it from the repo directory to infer both the base (merge-base with the origin default branch) and the git diff automatically:

```bash
# CLI
meticulous agent trigger-test-run --deploymentId <deploymentId>

# MCP (never infers `baseSha`/`gitDiffOutput` — pass them explicitly — and always returns immediately without waiting for the run to finish)
trigger_test_run(deploymentId="<deploymentId>", baseSha="<sha>")
```

- A base is **required**. It's auto-inferred from the current directory, or pass `--baseSha <sha>` (and optionally `--gitDiffOutput`) to set it explicitly.
- Omit `--deploymentId` to use the most recent deployment already uploaded for the local HEAD commit instead — this requires a clean working tree (no uncommitted changes).
- The command **blocks until the run finishes** by default and prints the `testRunId` to stdout; the final status is `Failure` when visual differences were detected (a normal completed verdict, not an error). Pass `--dontWaitForTestRunToComplete` to return as soon as the run is triggered.
- **One build, many bases:** the same `deploymentId` can be re-triggered against different bases — just run `agent trigger-test-run` again with a different `--baseSha`. No rebuild or re-upload needed.

Note the `testRunId` from the output.

## Step 4 -- Review the visual changes

Follow the `meticulous-review` skill, passing the `testRunId` from Step 3. It fetches the diff summary, inspects representative screenshots / DOM diffs / timelines, and produces a final report classifying each visual change as intended or unintended.

> **Uncommitted changes:** if you built/tested with a dirty working tree, the run is recorded against an ephemeral commit that is not your HEAD (and isn't pushed). Commands that resolve a run from the local checkout — `meticulous-review` / `agent test-run-diffs` run with no `--testRunId` — won't find it by commit, so **always pass the explicit `--testRunId`** to the review step in that case.

© alwaysmeticulous · ISC · alwaysmeticulous/skills

Similar skills

All skills for Testing and QA →

From the same set9

meticulous-review Review Meticulous test-run results against the intended PR changes, flag possible regressions, and pass issues on for a separate fix pass. CX Codex +1 8,600installs meticulous-cli-update Checks whether @alwaysmeticulous/cli is installed and current, and updates it when it is not. Runs at the start of any other Meticulous skill. CX Codex +1 8,600installs meticulous-cli Guides AI assistants through running the Meticulous CLI to record user sessions, replay flows, and catch visual UI regressions. CX Codex +1 8,600installs meticulous-use-session-data Downloads recorded Meticulous session data and network mocks covering your branch changes. Use it to inspect user interactions and retrieve API mocks for tests. CX Codex +1 8,500installs meticulous-iterative-dev Runs a frontend change step by step and replays recorded Meticulous sessions after each one, so a visual regression shows up where it started. CX Codex +1 8,500installs meticulous-zero-diff-task Drives dependency upgrades and code refactors against Meticulous visual regression tests, iterating until zero unexpected UI diffs remain before opening a PR. CX Codex +1 4,500installs meticulous-fix This skill takes the diffs a reviewer rejected on a Meticulous test run and implements the fixes, following the review comments. Handy once review is done and the work starts. CX Codex +1 4,500installs meticulous-increase-coverage A Meticulous skill that traces under-covered files to a real UI action, drives it with a recorded browser session and proves the coverage gain against a baseline. CX Codex +1 2,400installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor