Color
Build perceptually coherent color systems in OKLCH — palettes, ramps, semantic tokens, dark/light theme families, and contrast discipline. Use this skill whenever choosing ANY colors for visual work: UI themes, brand palettes, data-visualization series colors, game graphics, generative art, slides, or syntax themes. Trigger on requests like "pick colors", "make a palette", "add dark mode", "this…
Critique
A structured design-critique protocol that turns "looks off" into ranked, concrete changes with exact values (px, ms, curves, colors) — never vibes. Use this skill whenever evaluating any rendered visual: reviewing a screenshot, judging your own just-built UI/chart/slide/game screen before shipping, responding to "does this look good?", "review this design", "why does this feel off?", "roast my l…
Typography And Layout
Typography with intent and composition with rhythm — type pairing, modular scale systems, grids (and when to break them), negative space, and visual hierarchy. Use this skill whenever setting ANY text styles or arranging ANY elements on a surface: choosing fonts, sizing headings, building a landing page or app screen layout, laying out a slide, spacing a dashboard, composing a poster or chart, or…
Motion
Build animation that feels alive — and watch it before shipping. Production recipes for interface motion (modals, drawers, toasts, tabs, lists, drag, tickers), view transitions (route changes, shared elements, scroll reveals), and procedural motion (particles, screen shake, hit-stop, springs, ambient fields), plus easing and spring mathematics usable in any language and a diagnostic for motion th…
Design Direction
Establish a deliberate aesthetic point of view before building anything visual. Use this skill FIRST whenever starting any visual work — a website, landing page, app UI, dashboard, data visualization, slide deck, game screen, generative art piece, poster, or component library — even if the user only says "make it look good", "build me a page", or "design a UI". Also use it when the user complains…
Generative Motion
Make beautiful algorithmic animation — flow fields, particle systems with trails, strange attractors, slime-mold and boid simulations, reaction-diffusion, domain-warped noise, and shader-driven motion. Use this skill for generative art, creative coding, ambient backdrops, music visualisers, hero backgrounds, screensavers, generative wallpaper, data-driven art, or any request for a "cool animation…
Performance Craft
Design that holds its frame rate — because janky motion is failed design, not a separate engineering concern. Per-platform rendering discipline: compositor-friendly CSS and GPU layers on the web; ProMotion/adaptive-refresh timing, Metal particle/overdraw budgets, and efficiency-core scheduling on Apple platforms; draw-call and fill-rate budgets in game engines. Includes the graceful-degradation l…