← ClaudeAtlas

visual-communicationlisted

Visual communication audits UI screenshots, golden images, and visual diffs for hierarchy, readability, contrast, capture state, and test-harness artifacts. Do not use for screenshot generation/export, CSS, Figma, or styling.
Xopoko/plug-n-skills · ★ 11 · AI & Automation · score 77
Install: claude install-skill Xopoko/plug-n-skills
# Visual Communication Use when users cannot tell what matters, where to look, what changed, or what to do next. Judge visual design as communication of structure and priority, not decoration. ## Core Principles Communicate: - Priority: most important item is visually first. - Grouping: related items look related. - Sequence: task-order scanning. - Contrast: meaningful differences are visible. - Balance: stable, readable layout. - Recognition: familiar patterns look familiar. - Comprehension: legible text, icons, numbers, data. Use Gestalt principles carefully: - proximity for grouping; - similarity for shared meaning; - continuity for scan paths; - common region for scoped groups; - closure only when ambiguity is low. Ground recommendations in perception and task comprehension. Heuristic source -> likely perception risk; live/user evidence -> observed effect. ## Review Questions - What is the first thing the user should notice? - What is the first thing they actually notice? - Does the hierarchy match task importance? - Are labels, values, controls, and feedback visually connected? - Is the amount of information proportionate to the task? - Does the interface rely on color alone? - Is typography readable and consistent with the product surface? - Are dense tables, dashboards, forms, and lists structured for comparison? - Do empty, loading, disabled, and error states communicate clearly? ## Surface-Specific Communication - Forms: show question grouping, required ve