visual-language

name	visual-language
description	Use when choosing or reviewing colors, typography, spacing, component styling, or motion/animation for a user surface — establishing consistent visual semantics, bootstrapping a project design system (tokens, scales, recorded meanings), judging whether an animation is justified, or auditing a UI for visual drift and inconsistency.
metadata	{"owner":"tze","authors":["tze","Claude Fable 5"],"status":"active","last_reviewed":"2026-07-19"}

Visual Language

Color, type, spacing, and motion. The bar: clean and consistent — color is welcome, but every visual choice carries one meaning everywhere, and motion exists only to communicate.

Use This Skill When

• Picking a palette or assigning colors to states, categories, or actions
• Auditing a UI for visual drift: same concept styled differently, or same style meaning different things
• Judging whether an animation or transition should exist
• Setting typography, spacing, radius, or elevation conventions
• Bootstrapping a design system for a project that has none

Example trigger phrasings: "pick colors for this", "is this consistent", "is this animation necessary", "this UI looks messy", "set up design tokens", "set up a design system".

Do Not Use This Skill For

• What content appears and at what density — information-design
• Contrast ratios and non-color signaling as compliance concerns — accessibility (this skill still forbids inaccessible choices)
• Chart/series palette construction — /dataviz, under these semantics; a chart hue that contradicts the app's color meanings is this skill's finding