visual-design
Use when choosing or reviewing how a screen, flow, or page looks — colour palette, typography, spacing, cards and surfaces, buttons, icons, illustration and imagery, onboarding and paywall visuals, dark mode — or when a UI looks generic, flat, cluttered, dated, or inconsistent across screens, or someone asks to make it look premium or modern. Picks a visual direction and expresses it as tokens for web/SaaS, Apple platforms (iOS, iPadOS, macOS, visionOS, watchOS, tvOS), Android, and React Native/Expo. Reviews screenshots and mockups as well as code. Not for UX behaviour (use ux-psychology), accessibility audits, or animation timing.
- License
- MIT
- Compatibility
- Any UI project; detects the platform and any existing design system (tokens, theme files, Tailwind config, component library, asset catalog, MaterialTheme) and builds on it. Can review screenshots and mockups before code exists
Pinned to revision a677d8a98fe3, so it is the text this page describes rather than whatever the author pushed since.
Pre-approved tools experimental
Experimental field. Support varies between clients, so this list is what the author declared, not what your client will enforce.
- Read
- Glob
- Grep
Files
- skills/visual-design/SKILL.md
- skills/visual-design/references/android.md
- skills/visual-design/references/apple.md
- skills/visual-design/references/cross-platform.md
- skills/visual-design/references/web.md
- skills/visual-design/rules/actions.md
- skills/visual-design/rules/color.md
- skills/visual-design/rules/decoration.md
- skills/visual-design/rules/generic-defaults.md
- skills/visual-design/rules/hierarchy.md
- skills/visual-design/rules/iconography.md
- skills/visual-design/rules/imagery.md
- skills/visual-design/rules/real-screenshots.md
- skills/visual-design/rules/reference-designs.md
- skills/visual-design/rules/spacing-layout.md
- skills/visual-design/rules/surfaces.md
- skills/visual-design/rules/typography.md
Every link opens the file at its source, pinned to the revision this page describes.