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.

This skill should be used when the user is building or reviewing page layouts, grid systems, column structures, card grids, sidebar layouts, CSS Grid or Flexbox decisions, element alignment, spatial composition, or responsive grid strategies. Covers the 12-column grid, 8-point spacing system, Gestalt proximity principle, visual weight distribution, and layout patterns from Material Design and Bootstrap.

This skill should be used when the user is implementing responsive layouts, choosing breakpoints, building mobile-first designs, using CSS container queries, implementing responsive images (srcset, picture), sizing touch targets, designing responsive navigation, or adapting tables for mobile. Covers mobile-first philosophy, breakpoint strategy, fluid grids with CSS Grid, container queries, responsive images, touch target sizing (44x44px minimum), and responsive tables.

This skill should be used when the user is selecting typefaces, defining font sizes, creating typographic scales, pairing fonts, setting line height or line length, building heading hierarchies, configuring web fonts, or implementing responsive typography. Covers modular type scales (Major Third, Perfect Fourth), the 2-3 font family limit, Bringhurst's line length rule (45-75 characters), and micro-typography.

This skill should be used when the user asks 'which visual design skill should I use', 'show me all design principles', 'help me evaluate a design', or at the start of any visual design conversation. Provides the index of all eleven principle skills and ensures the right ones are invoked before any visual design work begins.

This skill should be used when the user is establishing visual importance, designing headings, creating focal points, designing CTAs or buttons, arranging label-data relationships, implementing scanning patterns (F-pattern, Z-pattern), or ensuring one dominant element per screen. Covers the three levers of hierarchy (size, weight, color), three-tier information architecture, the 'emphasize by de-emphasizing' principle, CTA design, and label-data relationships.

This skill should be used when the user is defining brand personality in design, choosing between illustration and photography, adding motion or animation, creating visual motifs, ensuring layout variety, customizing CSS framework defaults, or calibrating the level of creative expression for a given context. Covers Lavie & Tractinsky's expressive aesthetics, the expression spectrum (restrained to bold), brand personality translation, illustration systems, photography direction, and template independence.

This skill should be used when the user is adjusting spacing, padding, margins, content density, section gaps, vertical rhythm, or separation between elements. Also applies when reviewing whether a design feels cramped or too sparse, choosing between borders and whitespace for separation, or defining a spacing system. Covers the 4px/8px spacing system, macro vs micro whitespace, content density spectrum, separation techniques (whitespace > background shifts > borders), and vertical rhythm.

1 hook across 1 event