All authors
Claude Skills by jangles-byte
github.com/jangles-byte7 skills0 installs12 views
- ColorBuild 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 color looks off", "improve the theme", "what color should the chart series be", or whenever you ar...Votes: 0GitHub stars: 2
- CritiqueA 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 landing page", or comparing two design options. ALWAYS run this skill as the final step of any visu...Votes: 0GitHub stars: 2
- Design DirectionEstablish 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 that a design looks generic, bland, "AI-generated", or like a template. This skill produces a sho...Votes: 0GitHub stars: 2
- Generative MotionMake 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", "something generative", "abstract motion", "particle effect", "flow field", "noise animation", ...Votes: 0GitHub stars: 2
- MotionBuild 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 that "feels dead", "floaty", "janky", or "cheap". Use this skill for ANY animation work: adding or t...Votes: 0GitHub stars: 2
- Performance CraftDesign 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 ladder — what to cut first when the frame budget is blown. Use this skill whenever animation stutte...Votes: 0GitHub stars: 2
- Typography And LayoutTypography 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 when a design "feels cramped", "feels empty", "looks flat", or "the hierarchy is off". Trigger ev...Votes: 0GitHub stars: 2