Skill catalog

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.

Specify an icon system — grid, sizing, stroke weight, naming, categories, and implementation. Use when standardising iconography. For broader illustration, use `illustration-style` (ui-design).

Modern minimalist aesthetic with clean lines, intentional color palette, subtle interactions, and consistent spacing.

Diagram screen-level paths, decision points, and branch logic. Use when specifying how a feature is traversed. For the emotional end-to-end arc, use `journey-map` (design-research).

Comprehensive skill for Adobe Substance 3D Painter texturing and material creation workflow. Use this skill when creating PBR materials, exporting textures for web/game engines, optimizing 3D assets for real-time render…

Current-era minimalist design with bento grids, dark mode support, and high-performance accessible layouts.

Professional, brand-aligned design with structured grids, minimalist layouts, and consistent enterprise patterns.

Turn an object or character reference image into a quality-gated, animation-ready procedural Three.js model built in code. Use for image-to-3D reconstruction, detail-accurate object rebuilds, stylized/likeness-maximized…

Google's Material Design with layered surfaces, dynamic theming, built-in motion, and responsive cross-platform patterns.

Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.

Forward-looking design with tech-inspired typography, modern layouts, and a sleek, innovation-driven aesthetic.