Skip to content

✨ Update Claude plugin to v0.3.0 with full CLI support #205

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Robdel12 merged 2 commits into from
Feb 5, 2026
Merged

✨ Update Claude plugin to v0.3.0 with full CLI support #205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
df890ca
✨ Update Claude plugin to v0.3.0 with full CLI support
Robdel12 Feb 5, 2026
2d724e0
📝 Address PR feedback on CLI command docs
Robdel12 Feb 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .claude-plugin/marketplace.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
"plugins": [
{
"name": "vizzly",
"version": "0.2.0",
"description": "Visual regression testing with Vizzly - debug failures, check test status, and learn visual testing best practices",
"version": "0.3.0",
"description": "Visual regression testing with Vizzly - debug failures, check test status, review changes, and learn visual testing best practices",
"source": "./vizzly-plugin/plugins/vizzly",
"category": "testing"
}
Expand Down
8 changes: 8 additions & 0 deletions vizzly-plugin/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,14 @@ Then restart Claude Code.
- `/vizzly:setup` - Initialize Vizzly in a project
- `/vizzly:suggest-screenshots` - Analyze tests and suggest where to add visual screenshots

### CLI Integration

The plugin teaches Claude how to use the full Vizzly CLI:
- TDD commands: `vizzly tdd start`, `vizzly tdd run`, `vizzly baselines`
- Cloud commands: `vizzly run`, `vizzly status`, `vizzly builds`
- Review commands: `vizzly approve`, `vizzly reject`, `vizzly comment`
- Setup commands: `vizzly init`, `vizzly login`, `vizzly project:select`

## Structure

```
Expand Down
4 changes: 2 additions & 2 deletions vizzly-plugin/plugins/vizzly/.claude-plugin/plugin.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "vizzly",
"description": "Visual regression testing with Vizzly - debug failures, check test status, and learn visual testing best practices",
"version": "0.2.0",
"description": "Visual regression testing with Vizzly - debug failures, check test status, review changes, and learn visual testing best practices",
"version": "0.3.0",
"author": {
"name": "Vizzly Team",
"url": "https://vizzly.dev"
Expand Down
16 changes: 8 additions & 8 deletions vizzly-plugin/plugins/vizzly/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,14 +88,14 @@ The homepage screenshot is failing, can you help debug it?

This plugin is **skills-first, not tools-first**.

Instead of complex MCP servers, the plugin teaches Claude:
- How to read `.vizzly/report-data.json` for test results
- How to view screenshot images with the Read tool
- How to run CLI commands like `vizzly tdd start`
- When and where to add visual tests
- Visual testing best practices

Claude uses its built-in capabilities (Read, Bash, etc.) - the plugin just provides the knowledge.
The plugin teaches Claude how to work with Vizzly:
- Read `.vizzly/report-data.json` for test results
- View screenshot images with the Read tool
- Run CLI commands like `vizzly tdd start`
- Review and approve visual changes via the CLI
- Understand visual testing best practices

Claude uses its built-in capabilities (Read, Bash, etc.) combined with the Vizzly CLI - the plugin provides the knowledge to use them effectively.

---

Expand Down
8 changes: 5 additions & 3 deletions vizzly-plugin/plugins/vizzly/commands/setup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,16 +100,18 @@ Check the project to determine which SDK to recommend:
For local TDD mode, no token is needed!
Just run: vizzly tdd start

For cloud features, create a .env file:
VIZZLY_TOKEN=your-api-token-here
For cloud features, authenticate with your account:
vizzly login

Add .env to .gitignore
Then select a project for your directory:
vizzly project:select
```

**For CI/CD:**

```
Add VIZZLY_TOKEN as a secret in your CI provider.
Get your project token with: vizzly project:token

Example GitHub Actions:
env:
Expand Down
17 changes: 13 additions & 4 deletions vizzly-plugin/plugins/vizzly/skills/check-visual-tests/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,15 +134,24 @@ The TDD server doesn't appear to be running. To start visual testing:
http://localhost:47392
```

## Alternative: CLI Status Command
## Alternative: CLI Status Commands

You can also run the CLI command to get status:
You can also run CLI commands to get status:

**For local TDD:** (use when running `vizzly tdd start`)
```bash
vizzly tdd status
vizzly tdd status # Show current test status
vizzly baselines # List and query baselines
```

This shows the same information in the terminal.
**For cloud builds:** (use when running `vizzly run` in CI)
```bash
vizzly status <build-id> # Check specific build status (build ID from CI output)
vizzly builds # List recent builds to find build IDs
vizzly comparisons # Query and search comparisons
```

These commands show the same information in the terminal.

## Example Full Response

Expand Down
11 changes: 7 additions & 4 deletions vizzly-plugin/plugins/vizzly/skills/debug-visual-regression/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,9 @@ Based on what you observe, suggest likely causes:

**If the change is intentional:**
Explain that they can accept the new baseline:
- Via the dashboard at `http://localhost:47392`
- Or by copying the file: `cp .vizzly/current/<name>.png .vizzly/baselines/<name>.png`
- Via the TDD dashboard at `http://localhost:47392`
- Via CLI (cloud): `vizzly comparisons -b <build-id>` to find ID, then `vizzly approve <id>`
- Via file copy (local TDD): `cp .vizzly/current/<name>.png .vizzly/baselines/<name>.png`

**If the change is unintentional:**
Help them investigate:
Expand Down Expand Up @@ -133,8 +134,10 @@ Check recent changes to header styles:
Run: `git diff HEAD~3 -- "*.css" | grep -A5 -B5 "header\|nav"`

**If intentional:**
Accept the new baseline via the dashboard or run:
`cp .vizzly/current/homepage.png .vizzly/baselines/homepage.png`
Accept the new baseline:
- TDD dashboard at `http://localhost:47392`
- Cloud: `vizzly comparisons -b <build-id>` → `vizzly approve <id>`
- Local TDD: `cp .vizzly/current/homepage.png .vizzly/baselines/homepage.png`
```

## When TDD Server Isn't Running
Expand Down
55 changes: 50 additions & 5 deletions vizzly-plugin/plugins/vizzly/skills/vizzly-knowledge/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,26 +71,64 @@ This is the primary source of truth for test results. Read it to understand test

## CLI Commands

**TDD Mode:**
**TDD Mode (Local Development):**
```bash
vizzly tdd start # Start TDD server (background)
vizzly tdd run "npm test" # Run tests with ephemeral server
vizzly tdd status # Show current test status
vizzly tdd stop # Stop the TDD server
vizzly baselines # List and query local baselines
```

**Cloud Mode:**
**Cloud Mode (CI/CD):**
```bash
vizzly run "npm test" # Run tests and upload to cloud
vizzly run "npm test" --wait # Wait for cloud processing
vizzly status <build-id> # Check build status
vizzly builds # List and query builds
vizzly finalize <parallel-id> # Finalize parallel builds
vizzly comparisons # Query and search comparisons
```

**Review Commands (approve/reject visual changes):**
```bash
vizzly comparisons -b <build-id> # List comparisons for a build
vizzly comparisons --name "Button*" --status changed # Search by name/status
vizzly approve <comparison-id> # Approve a comparison
vizzly approve <comparison-id> -m "LGTM" # Approve with comment
vizzly reject <comparison-id> -r "reason" # Reject (reason required)
vizzly comment <build-id> "message" # Add comment to a build
```

**Project Setup:**
```bash
vizzly init # Create vizzly.config.js
vizzly config # Display current configuration
vizzly doctor # Run diagnostics to check environment
```

**Account & Authentication:**
```bash
vizzly login # Authenticate with Vizzly cloud
vizzly project link # Link to a cloud project
vizzly logout # Clear stored authentication tokens
vizzly whoami # Show current auth status
vizzly orgs # List organizations you have access to
vizzly projects # List projects you have access to
```

**Project Configuration:**
```bash
vizzly project:select # Configure project for current directory
vizzly project:list # Show all configured projects
vizzly project:token # Show project token for current directory
vizzly project:remove # Remove project configuration
```

**Advanced:**
```bash
vizzly api <method> <endpoint> # Make raw API requests
vizzly upload # Upload screenshots directly
vizzly preview # Upload static files as preview
```

## Taking Screenshots in Tests
Expand All @@ -113,12 +151,19 @@ await vizzlyScreenshot('homepage', await page.screenshot(), {

When a screenshot changes intentionally, you need to accept it as the new baseline:

**Via Dashboard:**
**Via TDD Dashboard (Local):**
1. Open `http://localhost:47392`
2. Review the visual diff
3. Click "Accept" on screenshots you want to update

**Via File Operations:**
**Via CLI (Cloud builds):**
```bash
vizzly comparisons -b <build-id> # List comparisons for a build
vizzly approve <comparison-id> # Approve a comparison
vizzly reject <comparison-id> -r "reason" # Reject (reason required)
```

**Via File Operations (Local TDD):**
Copy the current screenshot to baselines:
```bash
cp .vizzly/current/homepage.png .vizzly/baselines/homepage.png
Expand Down