visual-design-principles

Review code, screenshots, or visual artifacts against visual design principles — identifies violations and suggests research-backed improvements

Use this agent for comprehensive visual design audits of websites, components, presentations, documents, or any visual artifact. Examples: <example>Context: User has built a landing page and wants a design review. user: "Review my landing page design against visual design best practices" assistant: "I'll use the visual-design-reviewer agent to audit the landing page." <commentary>Landing page involves layout, typography, color, hierarchy, whitespace, and CTA design — the agent audits against all relevant dimensions using the 8-dimension scoring framework.</commentary></example> <example>Context: User is working on a dashboard and wants visual quality feedback. user: "Check if my dashboard follows good design patterns" assistant: "I'll use the visual-design-reviewer agent to review the dashboard." <commentary>Dashboard touches layout grids, data hierarchy, whitespace density, color usage, and craftsmanship — comprehensive multi-dimension audit needed.</commentary></example> <example>Context: User wants a presentation reviewed for visual quality. user: "Does my slide deck look professional?" assistant: "I'll use the visual-design-reviewer agent to evaluate the presentation design." <commentary>Presentation involves typography, hierarchy, whitespace, color, and visual interest — cross-media design audit.</commentary></example> <example>Context: User is building a component library and wants design consistency checked. user: "Audit my component library for visual design consistency" assistant: "I'll use the visual-design-reviewer agent to review the design system." <commentary>Design system audit involves consistency, tokens, craftsmanship, and typography — the agent checks systematic design quality.</commentary></example>

This skill should be used when the user is implementing accessible design, checking color contrast ratios, adding keyboard navigation, supporting screen readers, handling color blindness, implementing ARIA attributes, designing focus indicators, meeting WCAG 2.2 compliance, or building inclusive interfaces. Covers WCAG 2.2 AA requirements, color contrast (4.5:1 body, 3:1 large text), color independence (never rely on color alone), keyboard navigation, focus indicators, touch targets, screen reader considerations, and automated testing with axe-core.

This skill should be used when the user is selecting colors, building color palettes, defining color systems, implementing dark mode, choosing brand colors, creating shade scales, applying the 60-30-10 rule, selecting data visualization colors, or checking color contrast. Covers HSL color model, harmony schemes (complementary, analogous, triadic), systematic shade scale generation, WCAG contrast requirements, semantic color systems, and dark mode design.

This skill should be used when the user is building a design system, defining design tokens, creating component libraries, implementing CSS custom properties, ensuring visual consistency across pages, choosing between design systems (Material, Ant, Carbon), or auditing a codebase for design consistency. Covers design tokens (primitive → semantic → component layers), atomic design methodology, token governance, and systematic consistency.

This skill should be used when the user is polishing UI details, optimizing images, implementing shadows or elevation systems, ensuring pixel-perfect alignment, defining border-radius systems, adding micro-interactions or transitions, handling loading/empty/error states, or reducing Cumulative Layout Shift (CLS). Covers VisAWI Craftsmanship facet, retina-ready images, layered shadows, consistent border-radius, transition timing, skeleton screens, and layout stability.

This skill should be used when the user asks to evaluate, score, or audit a visual design, wants to compare designs quantitatively, needs an anti-pattern checklist, or wants to understand the 8-dimension design quality framework. Covers the VisAWI-aligned 8-dimension scoring methodology (1-5 per dimension, 40-point maximum), processing fluency theory, the anti-pattern rapid screening checklist, and the complete evaluation workflow.

1 hook across 1 event