Mmcp.market

doncheli-visual-test skill

by doncheli·doncheli/don-cheli-sdd·57 stars·Apache-2.0

Run visual regression tests by comparing UI screenshots against baselines. Activate when user mentions "visual test", "screenshot", "UI regression", "visual diff", "pixel diff", "visual snapshot".

A100/100content scan

Is the doncheli-visual-test skill safe?

Clean: nothing in its files matched our rules. We read 1 file in the folder on 2026-09-28.

No findings.

Install the doncheli-visual-test skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/doncheli/don-cheli-sdd.git /tmp/don-cheli-sdd
mkdir -p ~/.claude/skills
cp -r /tmp/don-cheli-sdd/.opencode/skills/doncheli-visual-test ~/.claude/skills/doncheli-visual-test
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

Don Cheli: Visual Test

Instructions

  1. Detect the visual testing tool in use: Playwright, Cypress, Percy, Chromatic, Storybook, or custom
  2. Run the visual test suite and capture screenshots of the current state
  3. Compare against the stored baseline snapshots
  4. Report each visual difference:
  • Component / page name
  • Diff percentage (pixels changed vs. total)
  • Category: layout shift, color change, missing element, new element
  1. Classify severity:
  • > 5% diff → blocker (likely regression)
  • 1-5% diff → warning (review required)
  • < 1% diff → info (minor or anti-aliasing)
  1. For new snapshots (no baseline exists), prompt the user to approve them as the new baseline
  2. Never auto-approve baselines — always require explicit human confirmation
  3. Generate a visual diff report with image paths or URLs if available
  4. Save report to .dc/visual-test-report-.md

Output Format

## Visual Test Report — 2026-03-28T15:00Z

### Summary
- Compared: 24 snapshots
- Passed:   21
- Diffs:     3 (1 blocker, 2 warnings)

### Blocker 🔴
- CheckoutPage/desktop — 12.3% diff
  Category: layout shift — payment form moved 40px down
  Baseline: .visual/baselines/checkout-desktop.png
  Current:  .visual/current/checkout-desktop.png

### Warnings 🟡
- Button/primary — 2.1% diff — color shift (likely theme variable change)
- NavBar/mobile — 1.8% diff — font rendering difference (check font loading)

### New Snapshots (approval required)
- VoiceModal/desktop — no baseline found — run with --approve to set baseline

More skills from doncheli/don-cheli-sdd

  • Adoncheli-api-contractDesign complete API contracts covering endpoints, auth, rate limiting, error handling, retries, circuit breaker and idempotency. Activate when user mentions "api contract", "api design", "endpoint", "webhook", "REST", "GraphQL", "OpenAPI", "design the API".
  • Adoncheli-api-contractDesign complete API contracts covering endpoints, auth, rate limiting, error handling, retries, circuit breaker and idempotency. Activate when user mentions "api contract", "api design", "endpoint", "webhook", "REST", "GraphQL", "OpenAPI", "design the API".
  • Adoncheli-audit-trailRecord and query the decision log for a project. Activate when user mentions "audit", "trail", "log decisions", "decision history", "why was this decided", "ADR", "architecture decision".
  • Adoncheli-audit-trailRecord and query the decision log for a project. Activate when user mentions "audit", "trail", "log decisions", "decision history", "why was this decided", "ADR", "architecture decision".
  • Adoncheli-changelogAuto-generate CHANGELOG.md entries from git commit history. Activate when user mentions "changelog", "release notes", "what changed", "generate changelog", "CHANGELOG", "release history".
  • Adoncheli-changelogAuto-generate CHANGELOG.md entries from git commit history. Activate when user mentions "changelog", "release notes", "what changed", "generate changelog", "CHANGELOG", "release history".
  • Adoncheli-context-healthReport the current state of the context window and recommend compression or cleanup actions. Activate when user mentions "context health", "context window", "how much context", "context full", "running out of context", "compress context".
  • Adoncheli-context-healthReport the current state of the context window and recommend compression or cleanup actions. Activate when user mentions "context health", "context window", "how much context", "context full", "running out of context", "compress context".
  • Adoncheli-data-policyAudit and document what personal or sensitive data the project collects, processes, and stores. Activate when user mentions "privacy", "data policy", "what data", "GDPR", "personal data", "data retention", "PII".
  • Adoncheli-data-policyAudit and document what personal or sensitive data the project collects, processes, and stores. Activate when user mentions "privacy", "data policy", "what data", "GDPR", "personal data", "data retention", "PII".
  • Adoncheli-debateRun an adversarial multi-role debate to surface trade-offs and reach a reasoned decision. Activate when user mentions "debate", "discuss", "trade-off", "decision", "compare options", "pros and cons", "choose between".
  • Adoncheli-debateRun an adversarial multi-role debate to surface trade-offs and reach a reasoned decision. Activate when user mentions "debate", "discuss", "trade-off", "decision", "compare options", "pros and cons", "choose between".

All agent skills → · MCP servers