SkillsAdd

heyeddi-com/heyeddi-skills

visual-auditor

Captures screenshots, reviews UI against product.md and design.md, runs WCAG contrast checks, fixes visual issues in code immediately, and documents every fix. Mandatory after implement/handoff. Auto-fix — never report-only unless user explicitly says audit-only.

First seen Jul 6, 2026

Installation

$ npx skills add heyeddi-com/heyeddi-skills --skill visual-auditor
View on skills.sh ↗ GitHub repository ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

azure-rbac Shared topics
microsoft/azure-skills 489K installs
firebase-security-rules-auditor Similar name
firebase/agent-skills

>- Audits Firebase (Firestore, Cloud Storage) security rules for vulnerabilities, privilege esc…

111K installs
firestore-security-rules-auditor Similar name
firebase/agent-skills 20.4K installs
supply-chain-risk-auditor Similar name
trailofbits/skills

Audits a project's dependencies for supply-chain risk: version-matched advisories for direct de…

6.6K installs
agentic-actions-auditor Similar name
trailofbits/skills

Audits GitHub Actions workflows for security vulnerabilities in AI agent integrations including…

5.8K installs
on-page-seo-auditor Similar name
aaron-he-zhu/seo-geo-claude-skills

on-page-seo-auditor — an installable skill for AI agents, published by aaron-he-zhu/seo-geo-cla…

5.4K installs

Also in this package

Other skills from heyeddi-com/heyeddi-skills · top by installs.

npx skills add heyeddi-com/heyeddi-skills
flutter-engineering 72 project-engineering 71 ux-flow-auditor 70 design-handoff-flutter 69 engineering-excellence 69 pre-merge-gate 69 design-system-generalizer 69 heyeddi-design 69 verify-build 69 primevue-openprops-architect 69

Browse all from heyeddi-com/heyeddi-skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

License LICENSE
Default branch main
Open issues 0
Status Active

Skill metadata

Parsed from SKILL.md frontmatter.

Version3.1.0

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 4,248 B
  • docs SUMMARY.md 287 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 69 installs

SKILL.md

Visual Auditor

See the UI. Compare to spec. Fix. Document. Re-verify.

You are a visual QA implementer: not a screenshot-only subagent. You read captures against product (persona, route intent, purpose) and design (tokens, mockup-brief, hierarchy), fix issues in Vue/CSS in the same turn, and log every change.

On marketing and app flagships, also apply the calm-wow lens in reference/visual-review.md (thesis hero, living atmosphere, brand-only status craft, reduced-motion).

Default behavior (no confirmation)

  • Always fix actionable visual issues in code in the same turn
  • Never deliver a bullet list of problems without fixing (exception: user explicitly said audit-only, no code)
  • Run automatically after every @heyeddi-handoff, @design-handoff-flutter, and stack implement pass

When to use

  • After @heyeddi-design craft or @heyeddi-handoff on a route
  • Green-on-green, illegible text, layout drift vs brief
  • Pre-merge visual gate with fixes, not a issue list alone
  • @heyeddi-product delegated legibility research: you fix, they synthesize

Mandatory pipeline

Read reference/visual-review.md and reference/fix-loop.md.

load_visual_context --route /path --write-review
capture_screenshots --route /path
audit_contrast --route /path
→ READ PNGs + product.md + design.md + mockup-brief + contrast report
→ FIX each error/actionable warn in code
→ append_fix_log (per fix)
finalize_visual_review --route /path --check

Never deliver only a bullet list of problems without fixing them. Report-only is allowed only when the user explicitly said audit-only / no code changes.

Review against specification

Lens Source
Product routeintent, page purpose, persona successfeeling
Design design.md tokens, mockup-brief.md regions, wireframe if no PNG
Legibility audit_contrast automated + your eyes on captures

Tools

Tool Role
loadvisualcontext Spec paths, captures, contrast summary; --write-review scaffolds review doc
capture_screenshots PNGs → .heyeddi/audits/visual/screenshots/
audit_contrast WCAG + motion-over-text
appendfixlog Document each fix with spec reference + files
finalizevisualreview Re-capture, contrast --check, close review

Subagents

Shell scripts for capture/contrast; you (main agent) read images, edit code, call appendfixlog. See reference/subagents.md.

Artifacts (.heyeddi/audits/visual/)

Path Purpose
screenshots/ Responsive captures
reviews/<feature>-review-<date>.md Review vs product + design
fix-log.md / fix-log.jsonl Every fix documented
<feature>-contrast-<date>.md Automated contrast

Env

  • DEVSERVERURL: Vue (default http://localhost:5173)
  • FLUTTERWEBURL: Flutter web

Chain

  • @primevue-openprops-architect: run after token/CSS fixes
  • @heyeddi-design polish: if IA problems remain after visual pass
  • @pre-merge-gate: after finalizevisualreview --check passes

When the task is complete: suggest next skills

When you have finished the user's request for this skill (not after every tool call or subagent phase), suggest what to run next:

  1. Run:

``bash python .agents/skills/heyeddi-orchestrator/scripts/suggestnextskill.py --current-skill visual-auditor --project-root . ``

Add --route /path if you worked a specific route.

  1. Include the script's ### Next step block in your final reply. The user copies the Prompt line into chat (e.g. @heyeddi-design craft /settings).

Pass --mode shape (or craft, audit, etc.) when you know which sub-command just finished.

See @heyeddi-orchestrator → reference/next-skill-handoff.md.