oborchers/using-visual-design-principles
visual-design-principles/skills/using-visual-design-principles/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add oborchers/fractional-cto using-visual-design-principlesInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 22, 2026, 5:55 AM119.6s1 file scanned
SKILL.md
- name:
- using-visual-design-principles
- description:
- 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.
- version:
- 1.0.0
<IMPORTANT>
When working on any visual artifact — websites, landing pages, dashboards, presentations, CVs, documents, or components — invoke the relevant visual-design-principles skill BEFORE writing or reviewing code or providing design feedback.
These are research-backed, opinionated principles grounded in VisAWI (Moshagen & Thielsch), Gestalt psychology, Refactoring UI, WCAG 2.2, Material Design, Apple HIG, and decades of empirical aesthetics research. </IMPORTANT>
How to Access Skills
Use the Skill tool to invoke any skill by name. When invoked, follow the skill's guidance directly.
Available Skills
| Skill | Triggers On |
|-------|-------------|
| visual-design-principles:layout-spatial-structure | Grid systems, 12-column grid, CSS Grid/Flexbox, alignment, 8px spacing, card layouts, spatial composition |
| visual-design-principles:typography | Font selection, type scales, font pairing, line height/length, headings, web fonts, responsive type |
| visual-design-principles:color-theory-application | Color palettes, HSL, harmony schemes, 60-30-10, shade scales, dark mode, contrast, data viz colors |
| visual-design-principles:whitespace-density | Spacing systems, padding/margins, content density, section gaps, vertical rhythm, separation techniques |
| visual-design-principles:visual-hierarchy | Focal points, 3-tier hierarchy, CTA design, scanning patterns, label-data, emphasis, de-emphasis |
| visual-design-principles:consistency-design-systems | Design tokens, component libraries, atomic design, CSS custom properties, cross-screen consistency |
| visual-design-principles:craftsmanship-polish | Pixel alignment, image optimization, shadows, border-radius, micro-interactions, loading/empty states, CLS |
| visual-design-principles:visual-interest-expression | Brand personality, illustrations, photography, motion, visual motifs, layout variety, template independence |
| visual-design-principles:responsive-design | Mobile-first, breakpoints, fluid grids, container queries, touch targets, responsive images/tables |
| visual-design-principles:accessibility-inclusive-design | WCAG 2.2, contrast ratios, color blindness, keyboard nav, screen readers, focus indicators, testing |
| visual-design-principles:design-evaluation-scoring | 8-dimension scoring, design audits, anti-pattern detection, evaluation workflow, quality benchmarks |
When to Invoke Skills
Invoke a skill when there is even a small chance the work touches one of these areas:
- Building or modifying any visual element listed above
- Reviewing existing designs for quality
- Making decisions about layout, typography, color, or spacing
- Creating presentations, documents, or CVs
- Evaluating or scoring visual design quality
The Three Meta-Principles
All eleven principles rest on three foundations:
-
Structure over style — Structural clarity (grid, typography, whitespace, hierarchy) drives 80%+ of perceived visual quality. Color and expression are secondary amplifiers.
-
Systematic over arbitrary — Design tokens, modular scales, and spacing systems eliminate guesswork. Every value should come from a defined scale.
-
Measure, don't guess — The 8-dimension scoring framework makes quality objective and evaluable. Use the scoring rubrics, not subjective opinions.
The 25 Quick-Reference Rules
Layout & Structure
- Use a 12-column grid with 8px base spacing
- Gestalt proximity: internal spacing ≤ 50% of external spacing
- All padding/margin as multiples of 4px or 8px
Typography
- Maximum 2-3 font families
- Modular type scale: Major Third (1.25) or Perfect Fourth (1.333) from 16px
- 45-75 characters per line (max-width: 65ch), line height 1.4-1.6
- Body text minimum 16px
Color
- 60-30-10 color distribution
- 3-6 distinct hue families
- WCAG AA contrast: body ≥4.5:1, large text ≥3:1
- No pure black (#000) — tint grays with brand hue
Whitespace
- Whitespace ratio 30-50% for standard sites
- Separate with space, not borders
- Start with too much whitespace, then remove
Hierarchy
- One dominant element per screen
- 3 clear tiers of importance
- Emphasize by de-emphasizing
Consistency
- Design tokens for everything (primitive → semantic → component)
- Consistent border-radius: 3-4 values maximum
- Identical components are identical
Craftsmanship
- Retina-ready images (2x minimum)
- Subtle layered shadows, 4-5 elevation levels
- CLS < 0.1
Expression & Accessibility
- Design personality calibrated to context
- Never rely on color alone
Related Skills
oborchers/using-planning-tools
tools
VerifiedTrustedCommunity
This skill should be used when the user invokes any /plan-* command from the planning-tools plugin (/plan-context, /plan-master, /plan-open-questions, /plan-verify, /plan-tick, /plan-progress, /plan-delete), asks how Claude Code's plan files work, asks where plans are stored, asks to author or audit a multi-phase master planning document, asks how to walk through a plan's Open Questions interactively, asks how to write progress entries, or mentions ~/.claude/plans/ or .claude/planning-tools.local.md. Provides the index of planning-tools commands, the master-plan workflow lifecycle, the v0.3.0+ list-shape mandate (phases and questions as headings + bulleted scope items, never tables), the v0.3.2+ plain-bullet shape (no `- [ ]` checkboxes — heading emoji is the sole tick signal), the progress-entry methodology, and the mechanics of Claude Code's plan-mode file storage.
14SKILL.mdUpdated May 13, 2026
oborchers/whitespace-density
testing
VerifiedTrustedCommunity
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.
12SKILL.mdUpdated May 22, 2026
oborchers/visual-interest-expression
development
VerifiedTrustedCommunity
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.
12SKILL.mdUpdated May 22, 2026
oborchers/visual-hierarchy
development
VerifiedTrustedCommunity
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.
12SKILL.mdUpdated May 22, 2026