skills.rest
marcoguillermaz
marcoguillermazCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

visual-audit

Score UI pages on typography, spacing, color, and interaction polish across themes.

3|Updated Mar 17, 2026
Search Tags:#typography#aesthetics#spacing#dark-mode#web-design#visual-audit#color-discipline
One-click install
npx skills add https://github.com/marcoguillermaz/claude-dev-kit --skill visual-audit-marcoguillermaz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-audit
Source: https://github.com/marcoguillermaz/claude-dev-kit/tree/main/packages/cli/templates/tier-m/.claude/skills/visual-audit
Command: npx skills add https://github.com/marcoguillermaz/claude-dev-kit --skill visual-audit-marcoguillermaz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual audit provides a structured method to measure and improve the visual quality of web pages by applying a consistent rubric across typography, spacing, color discipline, and interactive polish.

Core Features & Use Cases

  • Automated visual quality scoring across routes and themes.
  • Per-page observations with concrete improvement guidance.
  • Supports standard, quick, full, and critique modes for flexible auditing workflows.

Quick Start

Run the visual-audit skill in standard mode against your sitemap to generate per-page visual quality reports and concrete improvement recommendations.

Frequently Asked Questions about visual-audit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate visual quality audits for web pages across multiple routes?▼

Automate visual quality audits by measuring typography, spacing, color discipline, and interaction polish across all sitemap routes, generating per-page scores with actionable remediation notes for both light and dark themes.

What inputs do I need to run an automated visual audit on a web application?▼

To run an automated visual audit, you must provide the sitemap or route list, global styles, theme styles, and necessary credentials required to load pages and capture screenshots for evaluation.

Can I evaluate both light and dark mode themes during a UI visual audit?▼

Yes, you can evaluate both light and dark mode themes. The visual audit applies its evaluation rubric across all provided routes in both themes to ensure consistent visual quality and interaction polish.

What is the best way to measure typography and color discipline in web design?▼

The best way to measure typography and color discipline is using an automated visual audit that scores these dimensions against a defined rubric, delivering specific per-page observations and improvement guidance.

Does the visual audit support different modes for flexible auditing workflows?▼

Yes, the visual audit supports standard, quick, full, and critique modes, allowing you to flexibly adjust the depth of the visual quality evaluation based on your specific workflow needs.

Related Skills

Explore More Design & Creative Skills→
josecontijoseconti
2

twentytwentyfive

Configure WordPress Twenty Twenty-Five theme Global Styles and style variations via MCP APIs.

Community
Advanced
TioSavichTioSavich

design-review

Audit live-site design for visual inconsistencies and generate remediation reports.

Community
Advanced
richardaumrichardaum

design-review

Evaluate UI design implementation for visual hierarchy, consistency, responsiveness, and accessibility.

Community
Advanced
edfentonedfenton
3

nean-design-review

Capture UI screenshots across breakpoints with Playwright and evaluate against the nean-styleguide.

Community
Advanced