@vizzly-testing/cli 0.11.2 β†’ 0.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,32 +1,35 @@
1
- # Vizzly CLI
1
+ # 🐻 Vizzly CLI
2
2
 
3
- > Visual review platform for UI developers and designers
3
+ > Visual development workflow platform for UI teams
4
4
 
5
5
  [![npm version](https://img.shields.io/npm/v/@vizzly-testing/cli.svg)](https://www.npmjs.com/package/@vizzly-testing/cli)
6
6
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
7
 
8
8
  ## What is Vizzly?
9
9
 
10
- Vizzly is a visual review platform designed for how modern teams work. Instead of recreating your
11
- components in a sandboxed environment, Vizzly captures screenshots directly from your functional
12
- tests. This means you test the *real thing*, not a snapshot.
10
+ Vizzly makes visual quality part of your development process, not an afterthought. Iterate locally
11
+ with `vizzly tdd`, collaborate on automatic CI/CD builds, and ship with visual confidence.
13
12
 
14
- It's fast because we don't render anythingβ€”we process the images you provide from any source. Bring
15
- screenshots from web apps, mobile apps, or even design mockups, and use our collaborative dashboard
16
- to streamline the review process between developers and designers.
13
+ Unlike tools that recreate your components in sandboxed environments, Vizzly works with screenshots
14
+ from your *actual* tests - whether that's Playwright in CI, BrowserStack for cross-browser testing,
15
+ or your local development environment. No rendering inconsistencies. No "it works in my app but not
16
+ in the testing tool."
17
+
18
+ The result? Visual quality integrated into development, not bolted on afterward.
17
19
 
18
20
  ## Features
19
21
 
20
- - πŸ“Έ **Smart Screenshots** - Automatic deduplication and intelligent diffing
21
- - 🎨 **Any Screenshot** - Web, mobile, desktop, design mockups, or any visual content
22
- - πŸƒ **TDD Mode** - Local visual comparison for rapid development
23
- - πŸ“Š **Beautiful Dashboard** - Intuitive web interface for reviewing changes
24
- - πŸ‘₯ **Team Collaboration** - Built for UI developers and designers to work together
25
- - πŸ”„ **CI/CD Ready** - GitHub, GitLab, CircleCI, and more
22
+ - πŸ”„ **Local TDD Workflow** - Iterate on visual changes instantly with `vizzly tdd`, see exactly what changed as you code
23
+ - πŸ’¬ **Advanced Collaboration** - Position-based comments, review rules, mentions, and deep links for team coordination
24
+ - 🍯 **Honeydiff Engine** - Purpose-built diffing with dynamic content detection, SSIM scoring, and smart AA filtering
25
+ - πŸ“Έ **Flexible Screenshots** - Works with any screenshot source: Playwright, BrowserStack, Sauce Labs, local dev
26
+ - βœ… **Seamless CI/CD** - Automatic builds from every commit, no manual steps
26
27
 
27
28
  ## Quick Start
28
29
 
29
- Requirements: Node.js 20 or newer.
30
+ **Requirements:** Node.js 22 or newer.
31
+
32
+ > **Note:** Vizzly supports [active LTS versions](https://nodejs.org/en/about/previous-releases) of Node.js.
30
33
 
31
34
  ```bash
32
35
  # Install globally
@@ -38,623 +41,163 @@ vizzly init
38
41
 
39
42
  ### Authentication
40
43
 
41
- Vizzly supports two authentication methods:
42
-
43
- **Option 1: User Authentication (Recommended for local development)**
44
+ **Local Development:**
44
45
  ```bash
45
- # Authenticate with your Vizzly account
46
- vizzly login
47
-
48
- # Optional: Configure project-specific token
49
- vizzly project:select
50
-
51
- # Run tests
52
- vizzly run "npm test"
46
+ vizzly login # OAuth login with your Vizzly account
47
+ vizzly project:select # Optional: configure project token for this directory
53
48
  ```
54
49
 
55
- **Option 2: API Token (Recommended for CI/CD)**
50
+ **CI/CD:**
56
51
  ```bash
57
- # Set via environment variable
58
52
  export VIZZLY_TOKEN=your-project-token
59
-
60
- # Run tests
61
53
  vizzly run "npm test"
62
54
  ```
63
55
 
64
- For local development with `.env` files:
65
- ```
66
- VIZZLY_TOKEN=your-project-token
67
- ```
68
-
69
- Then add `.env` to your `.gitignore` file. For CI/CD, use your provider's secret management system.
56
+ See [authentication guide](./docs/authentication.md) for token priority and `.env` file setup.
70
57
 
71
- **Token Priority:**
72
- 1. CLI flag (`--token`)
73
- 2. Environment variable (`VIZZLY_TOKEN`)
74
- 3. Project mapping (configured via `vizzly project:select`)
75
- 4. User access token (from `vizzly login`)
76
-
77
- ### Upload existing screenshots
58
+ ### Basic Usage
78
59
 
60
+ **TDD Mode** (local development - the fast iteration loop):
79
61
  ```bash
80
- vizzly upload ./screenshots --build-name "Release v1.2.3"
62
+ vizzly tdd start # Start server, see changes in real-time
63
+ npm test -- --watch # Run your tests
64
+ # Open dashboard at http://localhost:47392
81
65
  ```
82
66
 
83
- ### Integrate with your tests
84
-
67
+ **Run Mode** (CI/CD - for team collaboration):
85
68
  ```bash
86
- # Run tests with Vizzly integration
87
- vizzly run "npm test"
88
-
89
- # Use TDD mode for local development
90
- vizzly tdd run "npm test"
69
+ vizzly run "npm test" # Run tests, upload to cloud
70
+ vizzly run "npm test" --wait # Wait for results, fail on visual changes
91
71
  ```
92
72
 
93
- ### In your test code
94
-
73
+ **In your test code:**
95
74
  ```javascript
96
75
  import { vizzlyScreenshot } from '@vizzly-testing/cli/client';
97
76
 
98
- // Option 1: Using a Buffer
99
77
  const screenshot = await page.screenshot();
100
78
  await vizzlyScreenshot('homepage', screenshot, {
101
79
  browser: 'chrome',
102
80
  viewport: '1920x1080'
103
81
  });
104
-
105
- // Option 2: Using a file path
106
- await page.screenshot({ path: './screenshots/homepage.png' });
107
- await vizzlyScreenshot('homepage', './screenshots/homepage.png', {
108
- browser: 'chrome',
109
- viewport: '1920x1080'
110
- });
111
82
  ```
112
83
 
113
- > **Multi-Language Support**: Currently available as a JavaScript/Node.js SDK with Python, Ruby, and
114
- > other language bindings coming soon. The client SDK is lightweight and simply POSTs screenshot
115
- > data to the CLI for processing.
84
+ See [test integration guide](./docs/test-integration.md) for Playwright, Cypress, and other frameworks.
116
85
 
117
- ## Commands
86
+ ## Client SDKs & Plugins
118
87
 
119
- ### Authentication Commands
88
+ Vizzly provides specialized clients and plugins for various frameworks and languages:
120
89
 
121
- ```bash
122
- vizzly login # Authenticate with your Vizzly account
123
- vizzly logout # Clear stored authentication tokens
124
- vizzly whoami # Show current user and authentication status
125
- vizzly project:select # Configure project-specific token
126
- vizzly project:list # Show all configured projects
127
- vizzly project:token # Display project token for current directory
128
- vizzly project:remove # Remove project configuration
129
- ```
130
-
131
- #### Login Command
132
- Authenticate using OAuth 2.0 device flow. Opens your browser to authorize the CLI with your Vizzly account.
133
-
134
- ```bash
135
- # Interactive browser-based login
136
- vizzly login
137
-
138
- # JSON output for scripting
139
- vizzly login --json
140
- ```
141
-
142
- **Features:**
143
- - Browser auto-opens with pre-filled device code
144
- - Secure OAuth 2.0 device authorization flow
145
- - 30-day token expiry with automatic refresh
146
- - Tokens stored securely in `~/.vizzly/config.json` with 0600 permissions
147
-
148
- #### Logout Command
149
- Clear all stored authentication tokens from your machine.
150
-
151
- ```bash
152
- # Clear all tokens
153
- vizzly logout
154
-
155
- # JSON output
156
- vizzly logout --json
157
- ```
158
-
159
- Revokes tokens on the server and removes them from local storage.
160
-
161
- #### Whoami Command
162
- Display current authentication status, user information, and organizations.
163
-
164
- ```bash
165
- # Show user and authentication info
166
- vizzly whoami
167
-
168
- # JSON output for scripting
169
- vizzly whoami --json
170
- ```
90
+ ### Official Client SDKs
171
91
 
172
- Shows:
173
- - Current user email and name
174
- - Organizations you belong to
175
- - Token status and expiry
176
- - Project mappings (if any)
92
+ - **[Ruby Client](./clients/ruby)** - Lightweight Ruby SDK for RSpec, Capybara, and other test frameworks
93
+ - **[Vitest Plugin](./clients/vitest)** - Drop-in replacement for Vitest's native visual testing with `toMatchScreenshot`
94
+ - **[Storybook Plugin](./clients/storybook)** - Capture screenshots from Storybook builds with interaction hooks
95
+ - **[Static Site Plugin](./clients/static-site)** - Visual testing for static sites (Gatsby, Astro, Next.js, Jekyll, etc.)
177
96
 
178
- #### Project Commands
179
- Configure directory-specific project tokens for multi-project workflows.
97
+ Each client is designed to integrate seamlessly with your existing workflow while providing the full
98
+ power of Vizzly's visual testing platform.
180
99
 
181
- ```bash
182
- # Select a project for current directory
183
- vizzly project:select
184
-
185
- # List all configured projects
186
- vizzly project:list
187
-
188
- # Show token for current directory
189
- vizzly project:token
190
-
191
- # Remove project configuration
192
- vizzly project:remove
193
- ```
194
-
195
- **Use case:** Working on multiple Vizzly projects? Configure each project directory with its specific token. The CLI automatically uses the right token based on your current directory.
196
-
197
- ### Upload Screenshots
198
- ```bash
199
- vizzly upload <directory> # Upload screenshots from directory
200
- vizzly upload ./screenshots --wait # Wait for processing
201
- vizzly upload ./screenshots --upload-all # Upload all without deduplication
202
- vizzly upload ./screenshots --parallel-id "ci-run-123" # For parallel CI builds
203
- ```
204
-
205
- ### Run Tests with Integration
206
- ```bash
207
- vizzly run "npm test" # Run with Vizzly integration
208
- vizzly run "pytest" --port 3002 # Custom port
209
- vizzly run "npm test" --wait # Wait for build completion
210
- vizzly run "npm test" --allow-no-token # Run without API token
211
- vizzly run "npm test" --parallel-id "ci-run-123" # For parallel CI builds
212
- ```
213
-
214
- #### Run Command Options
215
-
216
- **Server Configuration:**
217
- - `--port <port>` - Port for screenshot server (default: 47392)
218
- - `--timeout <ms>` - Server timeout in milliseconds (default: 30000)
219
-
220
- **Build Configuration:**
221
- - `-b, --build-name <name>` - Custom build name
222
- - `--branch <branch>` - Git branch override
223
- - `--commit <sha>` - Git commit SHA override
224
- - `--message <msg>` - Commit message
225
- - `--environment <env>` - Environment name (default: test)
226
-
227
- **Processing Options:**
228
- - `--wait` - Wait for build completion and exit with appropriate code
229
- - `--threshold <number>` - Comparison threshold (0-1, default: 0.01)
230
- - `--upload-timeout <ms>` - Upload wait timeout in ms
231
- - `--upload-all` - Upload all screenshots without SHA deduplication
232
-
233
- **Parallel Execution:**
234
- - `--parallel-id <id>` - Unique identifier for parallel test execution (also via `VIZZLY_PARALLEL_ID`)
235
-
236
- **Development & Testing:**
237
- - `--allow-no-token` - Allow running without API token (useful for local development)
238
- - `--token <token>` - API token override
239
-
240
- ## TDD Command
241
-
242
- For local visual testing with immediate feedback, use the dedicated `tdd` command:
243
-
244
- ```bash
245
- # Start interactive TDD dashboard (runs in background)
246
- vizzly tdd start
247
-
248
- # Run your tests in watch mode (same terminal or new one)
249
- npm test -- --watch
250
-
251
- # View the dashboard at http://localhost:47392
252
- ```
253
-
254
- **Interactive Dashboard:** The TDD dashboard provides real-time visual feedback:
255
- - **Live Updates** - See comparisons as tests run
256
- - **Visual Diff Modes** - Overlay, side-by-side, onion skin, and toggle views
257
- - **Baseline Management** - Accept/reject changes directly from the UI
258
- - **Test Statistics** - Real-time pass/fail metrics
259
- - **Dark Theme** - Easy on the eyes during long sessions
260
-
261
- **TDD Subcommands:**
262
-
263
- ```bash
264
- # Start the TDD dashboard server
265
- vizzly tdd start [options]
266
-
267
- # Run tests in single-shot mode
268
- vizzly tdd run "npm test" [options]
269
-
270
- # Stop a running TDD server
271
- vizzly tdd stop
272
- ```
273
-
274
- **TDD Command Options:**
275
- - `--set-baseline` - Accept current screenshots as new baseline
276
- - `--baseline-build <id>` - Use specific build as baseline (requires API token)
277
- - `--threshold <number>` - Comparison threshold (0-1, default: 0.1)
278
- - `--port <port>` - Server port (default: 47392)
279
- - `--timeout <ms>` - Server timeout (default: 30000)
280
- - `--open` - Auto-open dashboard in browser (start command only)
281
-
282
- ### Setup and Status Commands
283
- ```bash
284
- vizzly init # Create vizzly.config.js with defaults
285
- vizzly status <build-id> # Check build progress and results
286
- vizzly status <build-id> --verbose # Detailed build information
287
- vizzly status <build-id> --json # Machine-readable output
288
- vizzly finalize <parallel-id> # Finalize parallel build after all shards complete
289
- vizzly doctor # Fast local preflight (no network)
290
- vizzly doctor --api # Include API connectivity checks
291
- ```
100
+ ## Commands
292
101
 
293
- #### Init Command
294
- Creates a basic `vizzly.config.js` configuration file with sensible defaults. No interactive
295
- prompts - just generates a clean config you can customize.
102
+ ### Core Commands
296
103
 
297
104
  ```bash
298
- vizzly init # Create config file
299
- vizzly init --force # Overwrite existing config
105
+ vizzly run "npm test" # Run tests and upload to cloud
106
+ vizzly tdd start # Start local TDD server with dashboard
107
+ vizzly upload ./screenshots # Upload existing screenshots
108
+ vizzly status <build-id> # Check build status
109
+ vizzly init # Create vizzly.config.js
300
110
  ```
301
111
 
302
- #### Status Command
303
- Check the progress and results of your builds. Shows comprehensive information including:
304
- - Build status and progress
305
- - Screenshot and comparison counts (new, changed, identical)
306
- - Git branch and commit details
307
- - Direct web dashboard link
308
- - Timing and execution information
112
+ See [API reference](./docs/api-reference.md) for all options.
309
113
 
310
- ```bash
311
- # Basic status check
312
- vizzly status abc123-def456-build-id
313
-
314
- # Detailed information for debugging
315
- vizzly status abc123-def456-build-id --verbose
316
-
317
- # JSON output for CI/CD integration
318
- vizzly status abc123-def456-build-id --json
319
- ```
320
-
321
- ### Doctor
322
- - Purpose: Quickly validate your local setup without network calls by default.
323
- - Checks: Node.js version (>= 20), `apiUrl` format, comparison `threshold`, effective `port` (default 47392).
324
- - Optional: Add `--api` to verify connectivity using your `VIZZLY_TOKEN`.
114
+ ### Authentication
325
115
 
326
- Examples:
327
116
  ```bash
328
- # Local-only checks
329
- vizzly doctor
330
-
331
- # Include API connectivity
332
- VIZZLY_TOKEN=your-token vizzly doctor --api
333
-
334
- # JSON output for tooling
335
- vizzly doctor --json
117
+ vizzly login # OAuth login
118
+ vizzly logout # Clear tokens
119
+ vizzly whoami # Show current user
120
+ vizzly project:select # Configure project token for directory
336
121
  ```
337
122
 
338
- The dedicated `tdd` command provides fast local development with immediate visual feedback. See the
339
- [TDD Mode Guide](./docs/tdd-mode.md) for complete details on local visual testing.
123
+ See [authentication guide](./docs/authentication.md) for details.
340
124
 
341
125
  ## Configuration
342
126
 
343
- Create a `vizzly.config.js` file with `vizzly init` or manually:
344
-
345
127
  ```javascript
128
+ // vizzly.config.js
346
129
  export default {
347
- // Server configuration
348
- server: {
349
- port: 47392,
350
- timeout: 30000
351
- },
352
-
353
- // Comparison configuration
354
- comparison: {
355
- threshold: 0.1,
356
- ignoreAntialiasing: true
357
- },
358
-
359
- // Upload configuration
360
- upload: {
361
- concurrency: 5,
362
- timeout: 30000
363
- }
130
+ server: { port: 47392 },
131
+ comparison: { threshold: 0.1 },
132
+ upload: { concurrency: 5 }
364
133
  };
365
134
  ```
366
135
 
367
- Run `vizzly init` to generate this file automatically with sensible defaults.
368
-
369
- ## Config Reference
370
-
371
- For the full configuration schema and CLI options, see docs/api-reference.md.
372
-
373
- ## Framework Examples
374
-
375
- ### Playwright
376
- ```javascript
377
- import { vizzlyScreenshot } from '@vizzly-testing/cli/client';
378
-
379
- test('homepage test', async ({ page }) => {
380
- await page.goto('/');
381
- const screenshot = await page.screenshot();
382
- await vizzlyScreenshot('homepage', screenshot, {
383
- browser: 'chrome',
384
- viewport: '1920x1080'
385
- });
386
- });
387
- ```
388
-
389
- ### Cypress
390
- ```javascript
391
- // cypress/support/commands.js
392
- Cypress.Commands.add('vizzlyScreenshot', (name, properties = {}) => {
393
- cy.screenshot(name, { capture: 'viewport' });
394
- cy.readFile(`cypress/screenshots/${name}.png`, 'base64').then((imageBase64) => {
395
- const imageBuffer = Buffer.from(imageBase64, 'base64');
396
- return vizzlyScreenshot(name, imageBuffer, {
397
- browser: Cypress.browser.name,
398
- ...properties
399
- });
400
- });
401
- });
402
- ```
136
+ Run `vizzly init` to generate this file. See [API reference](./docs/api-reference.md) for all options.
403
137
 
404
138
  ## CI/CD Integration
405
139
 
406
- For CI/CD pipelines, use the `--wait` flag to wait for visual comparison results and get appropriate exit codes:
140
+ Every commit creates a team build automatically - your development workflow becomes your review workflow.
407
141
 
408
- ### GitHub Actions
142
+ **GitHub Actions:**
409
143
  ```yaml
410
144
  - name: Visual Tests
411
145
  run: npx vizzly run "npm test" --wait
412
146
  env:
413
147
  VIZZLY_TOKEN: ${{ secrets.VIZZLY_TOKEN }}
414
- # Optional: Provide correct git information from GitHub context
415
- VIZZLY_COMMIT_MESSAGE: ${{ github.event.pull_request.head.commit.message || github.event.head_commit.message }}
416
- VIZZLY_COMMIT_SHA: ${{ github.event.pull_request.head.sha || github.event.head_commit.id }}
417
- VIZZLY_BRANCH: ${{ github.head_ref || github.ref_name }}
418
- ```
419
-
420
- ### Parallel Builds in CI
421
-
422
- For parallel test execution, use `--parallel-id` to ensure all shards contribute to the same build:
423
-
424
- ```yaml
425
- # GitHub Actions with parallel matrix
426
- jobs:
427
- e2e-tests:
428
- strategy:
429
- matrix:
430
- shard: [1/4, 2/4, 3/4, 4/4]
431
- steps:
432
- - name: Run tests with Vizzly
433
- run: |
434
- npx vizzly run "npm test -- --shard=${{ matrix.shard }}" \
435
- --parallel-id="${{ github.run_id }}-${{ github.run_attempt }}"
436
- env:
437
- VIZZLY_TOKEN: ${{ secrets.VIZZLY_TOKEN }}
438
-
439
- finalize-e2e:
440
- needs: e2e-tests
441
- runs-on: ubuntu-latest
442
- if: always() && needs.e2e-tests.result == 'success'
443
- steps:
444
- - name: Finalize parallel build
445
- run: |
446
- npx vizzly finalize "${{ github.run_id }}-${{ github.run_attempt }}"
447
- env:
448
- VIZZLY_TOKEN: ${{ secrets.VIZZLY_TOKEN }}
449
148
  ```
450
149
 
451
- ### GitLab CI
150
+ **Parallel builds** (for faster test suites):
452
151
  ```yaml
453
- visual-tests:
454
- stage: test
455
- image: node:20
456
- script:
457
- - npm ci
458
- - npx vizzly run "npm test" --wait
459
- variables:
460
- VIZZLY_TOKEN: $VIZZLY_TOKEN
152
+ - run: npx vizzly run "npm test -- --shard=${{ matrix.shard }}" --parallel-id="${{ github.run_id }}"
153
+ - run: npx vizzly finalize "${{ github.run_id }}" # After all shards complete
461
154
  ```
462
155
 
463
- The `--wait` flag ensures the process:
464
- - Waits for all screenshots to be processed
465
- - Exits with code `1` if visual differences are detected
466
- - Exits with code `0` if all comparisons pass
467
- - Allows your CI to fail appropriately when visual regressions occur
468
-
469
- ## API Reference
470
-
471
- ### `vizzlyScreenshot(name, imageBuffer, properties)`
472
- Send a screenshot to Vizzly.
473
- - `name` (string): Screenshot identifier
474
- - `imageBuffer` (Buffer | string): Image data as Buffer, or file path to an image
475
- - `properties` (object): Metadata for organization
476
-
477
- **File Path Support:**
478
- - Accepts both absolute and relative paths
479
- - Automatically reads the file and converts to Buffer internally
480
- - Works with any PNG image file
481
-
482
- ### `isVizzlyEnabled()`
483
- Check if Vizzly is enabled in the current environment.
484
-
485
- ## AI & Editor Integrations
486
-
487
- ### Claude Code Plugin
488
-
489
- Vizzly includes built-in support for [Claude Code](https://claude.com/code), Anthropic's official CLI tool. The integration brings AI-powered visual testing workflows directly into your development environment.
490
-
491
- **Features:**
492
- - πŸ€– **AI-assisted debugging** - Get intelligent analysis of visual regressions
493
- - πŸ“Š **TDD status insights** - Check dashboard status with contextual suggestions
494
- - πŸ” **Smart diff analysis** - AI helps determine if changes should be accepted or fixed
495
- - ✨ **Test coverage suggestions** - Get framework-specific screenshot recommendations
496
- - πŸ› οΈ **Interactive setup** - Guided configuration and CI/CD integration help
497
-
498
- **Getting Started with Claude Code:**
499
-
500
- 1. **Install Claude Code** (if you haven't already):
501
- ```bash
502
- npm install -g @anthropic-ai/claude-code
503
- ```
504
-
505
- 2. **Install the Vizzly plugin** via Claude Code marketplace:
506
- ```
507
- /plugin marketplace add vizzly-testing/cli
508
- ```
509
-
510
- 3. **Use AI-powered workflows** with slash commands:
511
- ```
512
- /vizzly:tdd-status # Check TDD dashboard with AI insights
513
- /vizzly:debug-diff homepage # Analyze visual failures with AI
514
- /vizzly:suggest-screenshots # Find test coverage gaps
515
- /vizzly:setup # Interactive setup wizard
516
- ```
156
+ The `--wait` flag exits non-zero on visual changes, so your CI fails appropriately. See [CI/CD
157
+ examples](./docs/getting-started.md#cicd-integration) for GitLab, CircleCI, and more.
517
158
 
518
- The plugin works seamlessly with both local TDD mode and cloud builds, providing contextual help based on your current workflow.
159
+ ## Plugin System
519
160
 
520
- ## Plugin Ecosystem
521
-
522
- Vizzly supports a powerful plugin system that allows you to extend the CLI with custom
523
- commands. Plugins are automatically discovered from `@vizzly-testing/*` packages or can be
524
- explicitly configured.
525
-
526
- ### Official Plugins
527
-
528
- - **Claude Code Integration** *(built-in)* - AI-powered visual testing workflows for Claude Code
529
- - **[@vizzly-testing/storybook](https://npmjs.com/package/@vizzly-testing/storybook)** *(coming
530
- soon)* - Capture screenshots from Storybook builds
531
-
532
- ### Using Plugins
533
-
534
- Plugins under the `@vizzly-testing/*` scope are auto-discovered:
161
+ Vizzly's plugin system allows extending the CLI with custom commands. Plugins under `@vizzly-testing/*` are auto-discovered:
535
162
 
536
163
  ```bash
537
- # Install plugin
538
164
  npm install @vizzly-testing/storybook
539
-
540
- # Use immediately - commands are automatically available!
541
- vizzly storybook ./storybook-static
542
-
543
- # Plugin commands show in help
544
- vizzly --help
165
+ vizzly storybook ./storybook-static # Command automatically available
545
166
  ```
546
167
 
547
- ### Creating Plugins
548
-
549
- You can create your own plugins to add custom commands:
550
-
551
- ```javascript
552
- // plugin.js
553
- export default {
554
- name: 'my-plugin',
555
- version: '1.0.0',
556
- register(program, { config, logger, services }) {
557
- program
558
- .command('my-command')
559
- .description('My custom command')
560
- .action(async () => {
561
- logger.info('Running my command!');
562
- });
563
- }
564
- };
565
- ```
566
-
567
- Add to your `vizzly.config.js`:
568
-
569
- ```javascript
570
- export default {
571
- plugins: ['./plugin.js']
572
- };
573
- ```
168
+ **Official Plugins:**
169
+ - **Claude Code** *(built-in)* - AI-powered debugging and test suggestions
170
+ - **[@vizzly-testing/storybook](./clients/storybook)** - Storybook screenshot capture
171
+ - **[@vizzly-testing/static-site](./clients/static-site)** - Static site testing
172
+ - **[@vizzly-testing/vitest](./clients/vitest)** - Vitest integration
574
173
 
575
- See the [Plugin Development Guide](./docs/plugins.md) for complete documentation and examples.
174
+ See [plugin development guide](./docs/plugins.md) to create your own.
576
175
 
577
176
  ## Documentation
578
177
 
579
178
  - [Getting Started](./docs/getting-started.md)
580
179
  - [Authentication Guide](./docs/authentication.md)
581
- - [Upload Command Guide](./docs/upload-command.md)
582
180
  - [Test Integration Guide](./docs/test-integration.md)
583
181
  - [TDD Mode Guide](./docs/tdd-mode.md)
584
- - [Plugin Development](./docs/plugins.md)
585
182
  - [API Reference](./docs/api-reference.md)
586
- - [Doctor Command](./docs/doctor-command.md)
587
-
588
- **AI & Editor Integrations:**
589
- - Claude Code Plugin - Built-in support (see [AI & Editor Integrations](#ai--editor-integrations) above)
183
+ - [Plugin Development](./docs/plugins.md)
590
184
 
591
185
  ## Environment Variables
592
186
 
593
- ### Authentication
594
- - `VIZZLY_TOKEN`: API authentication token (project token or access token). Example: `export VIZZLY_TOKEN=your-token`.
595
- - For local development: Use `vizzly login` instead of manually managing tokens
596
- - For CI/CD: Use project tokens from environment variables
597
-
598
- ### Core Configuration
599
- - `VIZZLY_API_URL`: Override API base URL. Default: `https://app.vizzly.dev`.
600
- - `VIZZLY_LOG_LEVEL`: Logger level. One of `debug`, `info`, `warn`, `error`. Example: `export VIZZLY_LOG_LEVEL=debug`.
187
+ **Common:**
188
+ - `VIZZLY_TOKEN` - API authentication token (use `vizzly login` for local dev)
189
+ - `VIZZLY_PARALLEL_ID` - Identifier for parallel CI builds
601
190
 
602
- ### Parallel Builds
603
- - `VIZZLY_PARALLEL_ID`: Unique identifier for parallel test execution. Example: `export VIZZLY_PARALLEL_ID=ci-run-123`.
604
-
605
- ### Git Information Override
606
- For enhanced CI/CD integration, you can override git detection with these environment variables:
607
-
608
- - `VIZZLY_COMMIT_SHA`: Override detected commit SHA. Useful in CI environments.
609
- - `VIZZLY_COMMIT_MESSAGE`: Override detected commit message. Useful in CI environments.
610
- - `VIZZLY_BRANCH`: Override detected branch name. Useful in CI environments.
611
- - `VIZZLY_PR_NUMBER`: Override detected pull request number. Useful for PR-specific builds.
612
-
613
- **Example for GitHub Actions:**
614
- ```yaml
615
- env:
616
- VIZZLY_COMMIT_MESSAGE: ${{ github.event.pull_request.head.commit.message || github.event.head_commit.message }}
617
- VIZZLY_COMMIT_SHA: ${{ github.event.pull_request.head.sha || github.event.head_commit.id }}
618
- VIZZLY_BRANCH: ${{ github.head_ref || github.ref_name }}
619
- VIZZLY_PR_NUMBER: ${{ github.event.pull_request.number }}
620
- ```
191
+ **Git Overrides (for CI):**
192
+ - `VIZZLY_COMMIT_SHA`, `VIZZLY_COMMIT_MESSAGE`, `VIZZLY_BRANCH`, `VIZZLY_PR_NUMBER`
621
193
 
622
- These variables take highest priority over both CLI arguments and automatic git detection.
194
+ See [API reference](./docs/api-reference.md) for complete list.
623
195
 
624
196
  ## Contributing
625
197
 
626
- We welcome contributions! Whether you're fixing bugs, adding features, or improving documentation,
627
- your help makes Vizzly better for everyone.
628
-
629
- ### Getting Started
630
-
631
- 1. Fork the repository on [GitHub](https://github.com/vizzly-testing/cli)
632
- 2. Clone your fork locally: `git clone https://github.com/your-username/cli.git`
633
- 3. Install dependencies: `npm install`
634
- 4. Run tests to ensure everything works: `npm test`
635
-
636
- ### Development Workflow
637
-
638
- 1. Create a feature branch: `git checkout -b feature/your-feature-name`
639
- 2. Make your changes and **add tests** for any new functionality
640
- 3. Run the linter: `npm run lint`
641
- 4. Run tests: `npm test`
642
- 5. Commit your changes using [gitmoji](https://gitmoji.dev/) format: `git commit -m '✨ Add your feature'`
643
- 6. Push to your fork: `git push origin feature/your-feature-name`
644
- 7. Open a Pull Request
645
-
646
- ### Reporting Issues
647
-
648
- Found a bug or have a feature request? Please [open an issue](https://github.com/vizzly-testing/cli/issues) with:
649
-
650
- - A clear description of the problem or request
651
- - Steps to reproduce (for bugs)
652
- - Your environment details (OS, Node.js version, etc.)
653
-
654
- ### Development Setup
655
-
656
- The CLI is built with modern JavaScript and requires Node.js 20+ (LTS). See the development scripts
657
- in `package.json` for available commands.
198
+ We'd love your help making Vizzly better! Whether you're fixing bugs, adding features, or improving
199
+ docs - contributions are welcome. Check out the [GitHub repo](https://github.com/vizzly-testing/cli)
200
+ to get started.
658
201
 
659
202
  ## License
660
203