Skip to content

Commit 1735a71

Browse files
authored
📝 Tighten CLI README positioning (#278)
## Summary - Reframes the CLI README around Vizzly as a visual testing/regression platform instead of leading with agent context. - Removes the extra pitch-heavy "Why Vizzly?" section so the README gets to CLI usage faster. - Adds the Vizzly inspector mascot asset and includes docs assets in the npm package file list. - Aligns package metadata and CLI help copy with the new README framing. ## Validation - pnpm run build - node bin/vizzly.js --help - node bin/vizzly.js context --help - rg -n "Visual review for agents and teams|Vizzly CLI for visual review|Fetch build context for agents and reviewers" README.md package.json src dist - git diff --check - npm --cache .tmp/npm-cache pack --dry-run Full pnpm test was started and then intentionally skipped because this is a README/help/package metadata change.
1 parent b6ed8c4 commit 1735a71

4 files changed

Lines changed: 68 additions & 50 deletions

File tree

README.md

Lines changed: 62 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,73 @@
11
# Vizzly CLI
22

3-
> Visual review for agents and teams
3+
> Visual regression testing from your terminal
44
55
[![package version](https://img.shields.io/npm/v/@vizzly-testing/cli.svg)](https://www.npmjs.com/package/@vizzly-testing/cli)
66
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
77

8-
Vizzly keeps the visual truth behind your UI: approved baselines, meaningful diffs, review state, comments, and preview links in one place. That makes it useful for humans reviewing product changes and for LLM agents that need to understand what the UI is supposed to look like before they edit it.
8+
<p align="center">
9+
<img src="./docs/assets/vizzly-mascot-inspector.png" alt="Vizzly bear inspecting a screenshot" width="220" />
10+
</p>
911

10-
Unlike tools that re-render components in isolation, Vizzly captures screenshots directly from your functional tests: the real thing. Whether you're validating AI-generated code or testing manual changes, you get reviewed visual evidence before anything hits production.
12+
Vizzly is a visual testing and regression platform for teams that ship UI. It
13+
captures screenshots from your real tests, compares them to approved baselines,
14+
and gives you useful review data: meaningful diffs, comments, approvals, build
15+
status, and preview links.
1116

12-
## Why Vizzly?
13-
14-
**Local TDD workflow.** See changes as you type, not after CI. The `vizzly tdd` command runs a local dashboard that compares screenshots instantly and exposes the current workspace as local context.
15-
16-
**Meaningful diff metadata.** Vizzly stores rich diff evidence: changed regions, cluster metadata, fingerprints, hotspots, confirmed regions, and image URLs. Agents can inspect what changed instead of guessing from a pass/fail label.
17-
18-
**Any screenshot source.** Playwright, Cypress, Puppeteer, Selenium, native mobile apps, or even design mockups. If you can capture it, Vizzly can compare it.
19-
20-
**Approved baselines as truth.** Cloud context carries human review state. Local context carries the downloaded or generated baseline metadata. That is the bridge between TDD locally and collaborative review in Vizzly.
17+
This package is the CLI and local SDK surface. Use it to run local visual TDD,
18+
upload screenshots from CI, generate static reports, and fetch machine-readable
19+
build or diff data for scripts, automation, and coding agents.
2120

2221
## Quick Start
2322

24-
Requires Node.js 22+.
23+
You need Node.js 22+.
2524

2625
```bash
2726
pnpm install -g @vizzly-testing/cli
2827

2928
vizzly init
3029
```
3130

32-
### Local Development (TDD Mode)
31+
### Start Local TDD
3332

34-
Start the TDD server, run your tests in watch mode, and see visual diffs instantly at `http://localhost:47392`.
33+
Start the TDD server, run your tests, and open the dashboard at
34+
`http://localhost:47392`.
3535

3636
```bash
3737
vizzly tdd start
3838
pnpm test -- --watch
3939
```
4040

41-
The dashboard shows diffs in real-time. Accept or reject changes right from the UI.
41+
The dashboard shows screenshots, baselines, and diffs as they arrive. Accept or
42+
reject changes right from the UI.
4243

43-
### Cloud Integration (CI/CD)
44+
### Run With Cloud Review
4445

45-
For team collaboration and CI pipelines:
46+
Use cloud builds when you want shared baselines, team review, and CI status:
4647

4748
```bash
4849
vizzly login
4950
vizzly run "pnpm test" --wait
5051
```
5152

52-
The `--wait` flag polls for results and exits with code 1 if visual differences are detected.
53+
`--wait` blocks until Vizzly finishes processing the build. It exits with code
54+
`1` when visual differences need review.
5355

54-
For CI environments, set your project token:
56+
In CI, use a project token:
5557

5658
```bash
5759
export VIZZLY_TOKEN=your-project-token
5860
vizzly run "pnpm test" --wait
5961
```
6062

61-
### Visual Context For Agents
63+
### Inspect Builds And Diffs
6264

63-
Use `vizzly context` when you want Vizzly to act like a visual context store, not just a test runner.
65+
Use `vizzly context` when you need build, comparison, screenshot, or review
66+
queue data from the terminal.
6467

65-
This is especially useful for LLM agents, automation, and quick debugging loops. Instead of
66-
making a bunch of narrow API calls, you can ask for one build, comparison, screenshot, or review
67-
queue bundle and get the evidence in one place.
68+
This is useful for scripts, coding agents, and debugging loops. Instead of
69+
making a pile of narrow API calls, ask for one focused bundle and get the
70+
evidence in one place.
6871

6972
```bash
7073
# Cloud context for a build or comparison
@@ -75,15 +78,19 @@ vizzly context comparison def456 --json
7578
vizzly context build current --source local
7679
vizzly context build current --source local --agent
7780
vizzly context screenshot build-detail-screenshots --source local --json
81+
vizzly context review-queue --source local --json
7882
```
7983

80-
`--json` is the durable automation path. `--agent` gives a compact handoff for prompt assembly and local dogfooding. Add `--full` when an agent really needs the complete build context payload, or `--include screenshots,diffs,comments` when the compact JSON needs selected detail.
84+
`--json` is the durable automation path. `--agent` gives a compact handoff for
85+
prompt assembly. Add `--full` when you need the whole payload, or
86+
`--include screenshots,diffs,comments` when compact JSON needs selected detail.
8187

82-
Local context is read-only and file-backed. It reads your existing `.vizzly` workspace state from
83-
TDD runs, including screenshots, diffs, and any saved hotspot or region metadata.
88+
Local context is read-only and file-backed. It reads your existing `.vizzly`
89+
workspace state from TDD runs, including screenshots, diffs, and saved hotspot
90+
or region metadata.
8491

85-
Cloud context is also read-only right now. That is intentional. It keeps the trust model simple:
86-
Vizzly helps you see and inspect visual changes, while people still decide what gets approved.
92+
Cloud context is also read-only right now. That is intentional. Vizzly helps you
93+
see and inspect visual changes, while people still decide what gets approved.
8794

8895
## Capture Screenshots
8996

@@ -103,7 +110,14 @@ test('homepage looks correct', async ({ page }) => {
103110
});
104111
```
105112

106-
The client SDK is lightweight—it just POSTs to the local server. Works with any test runner. SDKs available for [JavaScript](https://docs.vizzly.dev/integration/sdk/javascript), [Ruby](https://docs.vizzly.dev/integration/sdk/ruby), [Swift](https://docs.vizzly.dev/integration/sdk/swift), and [more](https://docs.vizzly.dev/integration/sdk/overview).
113+
The client SDK is lightweight. It posts screenshots to the local Vizzly server
114+
or the cloud build wrapper. It works with any test runner.
115+
116+
SDKs are available for
117+
[JavaScript](https://docs.vizzly.dev/integration/sdk/javascript),
118+
[Ruby](https://docs.vizzly.dev/integration/sdk/ruby),
119+
[Swift](https://docs.vizzly.dev/integration/sdk/swift), and
120+
[more](https://docs.vizzly.dev/integration/sdk/overview).
107121

108122
Already saving screenshots to disk? Pass the file path instead:
109123

@@ -131,31 +145,34 @@ Or create `vizzly.config.js` manually:
131145
```javascript
132146
export default {
133147
comparison: {
134-
threshold: 2.0 // CIEDE2000 Delta E (0=exact, 2=recommended)
135-
}
148+
// CIEDE2000 Delta E. 0 is exact. 2 is a good default.
149+
threshold: 2.0,
150+
},
136151
};
137152
```
138153

139154
## Commands
140155

141-
| Command | Description |
142-
|---------|-------------|
143-
| `vizzly tdd start` | Start local TDD server with dashboard |
144-
| `vizzly tdd run "cmd"` | Run tests once, generate static report |
145-
| `vizzly run "cmd"` | Run tests with cloud integration |
146-
| `vizzly context ...` | Fetch visual context bundles for builds, comparisons, and screenshots |
147-
| `vizzly upload <dir>` | Upload existing screenshots |
148-
| `vizzly login` | Authenticate via browser |
149-
| `vizzly doctor` | Validate local setup |
156+
| Command | What it does |
157+
| --- | --- |
158+
| `vizzly tdd start` | Start the local TDD server and dashboard. |
159+
| `vizzly tdd run "cmd"` | Run tests once and generate a static visual report. |
160+
| `vizzly run "cmd"` | Run tests with cloud build and review integration. |
161+
| `vizzly context ...` | Fetch visual context for builds, comparisons, screenshots, and review queues. |
162+
| `vizzly upload <dir>` | Upload an existing folder of screenshots. |
163+
| `vizzly login` | Authenticate through the browser. |
164+
| `vizzly doctor` | Validate your local setup. |
150165

151166
## Documentation
152167

153-
Full documentation at **[docs.vizzly.dev](https://docs.vizzly.dev)**—including framework guides,
154-
CI/CD setup, configuration reference, and more.
168+
Full documentation lives at **[docs.vizzly.dev](https://docs.vizzly.dev)**.
169+
Start there for framework guides, CI setup, SDK examples, and the configuration
170+
reference.
155171

156172
## Contributing
157173

158-
Found a bug? Have an idea? [Open an issue](https://github.com/vizzly-testing/cli/issues) or submit a PR.
174+
Found a bug or have an idea?
175+
[Open an issue](https://github.com/vizzly-testing/cli/issues) or send a PR.
159176

160177
## License
161178

276 KB
Loading

package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@vizzly-testing/cli",
33
"version": "0.32.0",
4-
"description": "Visual review for agents and teams",
4+
"description": "Visual regression testing from your terminal",
55
"keywords": [
66
"llm-context",
77
"visual-context",
@@ -54,6 +54,7 @@
5454
"files": [
5555
"bin",
5656
"dist",
57+
"docs/assets",
5758
"README.md",
5859
"LICENSE"
5960
],

src/cli.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ const formatHelp = (cmd, helper) => {
9292
// Cute grizzly bear mascot with square eyes (like the Vizzly logo!)
9393
lines.push(c.brand.amber(' ʕ□ᴥ□ʔ'));
9494
lines.push(` ${c.brand.amber(c.bold('vizzly'))} ${c.dim(`v${version}`)}`);
95-
lines.push(` ${c.gray('Visual review for agents and teams')}`);
95+
lines.push(` ${c.gray('Visual regression testing from your terminal')}`);
9696
} else {
9797
// Compact header for subcommands
9898
lines.push(` ${c.brand.amber(c.bold('vizzly'))} ${c.white(cmd.name())}`);
@@ -332,7 +332,7 @@ function normalizeJsonArgv(argv, commandNames) {
332332

333333
program
334334
.name('vizzly')
335-
.description('Vizzly CLI for visual review')
335+
.description('Vizzly CLI for visual regression testing')
336336
.version(getPackageVersion())
337337
.option('-c, --config <path>', 'Config file path')
338338
.option('--token <token>', 'Vizzly API token')
@@ -768,11 +768,11 @@ Examples:
768768

769769
let contextCmd = program
770770
.command('context')
771-
.description('Fetch build context for agents and reviewers');
771+
.description('Fetch build and diff context');
772772

773773
contextCmd
774774
.command('build')
775-
.description('Fetch build context for agents and reviewers')
775+
.description('Fetch build context')
776776
.argument('<build-id>', 'Build ID to fetch context for')
777777
.option('--source <source>', 'Context source: auto, cloud, or local', 'auto')
778778
.option('--agent', 'Output compact context for LLM agents')

0 commit comments

Comments
 (0)