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.
npx claudepluginhub oborchers/fractional-cto --plugin visual-design-principlesThis skill uses the workspace's default tool permissions.
<IMPORTANT>
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
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.
Use the Skill tool to invoke any skill by name. When invoked, follow the skill's guidance directly.
| 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 |
Invoke a skill when there is even a small chance the work touches one of these areas:
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.