Design & UX

16-column grid, one saturated accent, and 22 locked layouts (Klein Blue, Lemon, Mint, Safety Orange).

Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.

A cross-cutting cognitive mode for sitting with design problems before rushing to solve them. Part of the Intent design strategy system. Activates expansive brainstorming: hyperassociativity, beginner's mind, cross-doma…

Rethinks experiences for different platforms and contexts — not just resizing, but reconceiving. Part of the Intent design strategy system. When an experience moves from desktop to mobile, web to TV, consumer app to kio…

This skill should be used when the user asks to "add an animated background", "build a mesh/gradient background", "make an aurora/shader background", "add constellation/particle background", "animated hero background",…

Locked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template.

Warm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography.

Lightweight 3D effects for decorative elements and micro-interactions using Zdog, Vanta.js, and Vanilla-Tilt.js. Use this skill when adding pseudo-3D illustrations, animated backgrounds, parallax tilt effects, decorativ…

WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.

NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).

SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.

Design printable, fill-in-ready worksheets—practice sets, graphic organizers, lab records, reflections, or gap-closure forms—from learning goals and source material. Use when the user asks for a worksheet, handout with…

Create beautiful, performant SVG animations and illustrations. Use this skill when the user asks to create SVG graphics, icons, illustrations, animated logos, path animations, morphing shapes, loading spinners, or any a…

When the user wants to improve their app's onboarding experience, increase activation rate, reduce Day 1 drop-off, or optimize the first-run flow. Use when the user mentions "onboarding", "first-run", "activation", "tut…

Stripped-back design emphasizing whitespace, clean typography, and restrained color for maximum clarity and focus.

Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use `critiqu…

UI copy and microcopy guidelines. Use for user-facing copy, buttons, errors, empty states, onboarding, i18n wording, translation, or copy improvements in Chinese or English.

Evidence-first design review of a PR's UI. Walks the changed screens in a real browser, performs the user's tasks, and posts findings ranked by user impact, each with evidence, a pattern, a trade-off and an acceptance c…

This skill should be used when the user asks to "respect prefers-reduced-motion", "honor reduced motion", "make my animations accessible", "fix vestibular / motion-sickness issues", "add a useReducedMotion hook", "gate…

Simplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter.

Create a six-frame storyboard that shows a user's journey from problem to solution. Use when you need a fast narrative for alignment, concept reviews, or demos.

Paid Gemini image generation for blog heroes, inline illustrations, and OG cards (direct API by default, optional MCP for edits). Asks for explicit consent before the first paid call. Runs only on an explicit request: /…

This skill should be used when the user asks to "fix janky CSS animation", "make animation 60fps", "stop layout thrashing", "animate width/height/top/left smoothly", "convert animation to transform", "animate box-shadow…

Follow-up design polish skill inspired by Impeccable. Use after a web or HTML artifact exists to audit, critique, polish, animate, harden, and prepare the page for a live/share pass.

Design and evaluate presentations that communicate effectively. Use when designing a presentation, creating slides, getting presentation feedback, structuring a talk, or reviewing slides. Keywords: presentation, slides,…

Comprehensive GLSL shader techniques for creating stunning visual effects — ray marching, SDF modeling, fluid simulation, particle systems, procedural generation, lighting, post-processing, and more.

Blueprint multi-page print publications—brochures, magazines, catalogs, annual reports, lookbooks—for designer handoff with spread-aware story flow, typed editorial blocks, and art direction before layout. Use when the…

Define an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use `icon-system` (design-systems).

Establish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use `critique-visual-hierarchy` (visual-critiq…

Extract the repository's design contract (tokens, component registry, screen archetypes, conventions) into .uxproof/ so every UX skill judges against THIS repo's design system, whatever it is — including one shipped by…

Design a high-CTR YouTube thumbnail — striking imagery, bold text placement, and emotional face/subject if needed.

Turn event details, offers, or brand notes into a single-page flyer with a scannable headline, one primary call to action, and mood-matched visual intent—not a brochure, slide deck, or poster wall. Use when the user ask…

Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.

Turn a vague product, UI/UX, or AI feature idea into a decided direction. Use when shaping a feature, simplifying an overcomplicated flow, deciding whether and how to use AI, defining screen states, planning validation,…

Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.

This skill should be used when the user asks to "animate an SVG", "make a line draw itself on", "do a stroke draw-on / signature animation", "morph one shape into another", "move an element along a path", "animate an ic…

Build a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use `dark-mode-design`; for chart palettes use `data-v…

Comprehensive game design theory covering MDA framework, player psychology, balance principles, and progression systems. Master why games are fun.

Turn event facts and tone notes into print or digital invitations with ceremonial copy, layered logistics, and suite-consistent visual intent—not posters, programs, or slide decks. Use when the user asks for a wedding i…

Shadcn/ui-inspired design with minimal, clean components, monochrome palette, and utility-first patterns.

Modern take on brutalism with bold borders, vivid accent colors, and raw, high-contrast layouts on warm surfaces.

This skill should be used when the user asks to "add a hover/press effect", "animate a toggle or switch", "build an animated like button", "make a toast/snackbar slide in", "animate a drawer or modal", "animate list reo…

Adapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use `color-system`.

Carefully curated, modern minimal style with elegant serif typography and understated, sophisticated palettes.

Polished, business-ready design with modern typography, structured layouts, and a trustworthy visual identity.

Produce a distinctive, LOCKED design language plus an implementation-ready UX/UI spec, written to `.ulpi/design/`: a per-brief visual identity (palette, type, signature), the design system to build on, user flows and st…

Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.

Contemporary editorial style with serif typography, minimal palettes, and clean layouts for polished digital products.

Narrative-driven design using visuals, copy, and interaction to guide users through engaging, emotionally resonant journeys.

Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.