Skill catalog

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.

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).

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

Paper-textured, print-inspired design with minimal colors, clean serif/sans typography, and tactile surface qualities.

Generous whitespace, consistent padding, and grid-based layouts for clean, readable, and breathing interfaces.

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…

Hand-drawn, sketch-like style with doodles, handwritten fonts, and imperfect lines for a playful, informal feel.

Define a responsive grid — columns, gutters, margins, and breakpoint behaviour. Use when establishing page structure. For the spacing scale inside components use `spacing-system`; for cross-device behaviour use `respons…

Playful, character-driven design with expressive typography and bold graphics for landing pages and creative projects.

Run an expert review against Nielsen's heuristics and domain criteria, with severity ratings. Use when you need findings without recruiting participants. For a facilitated team feedback session, use `design-critique` (d…

Smooth color transitions and gradient-rich surfaces for modern, playful interfaces with visual depth.

Vibrant, high-contrast palettes and gradients for engaging, memorable, and modern user experiences.

Approachable, intuitive design with rounded elements, ample whitespace, and soft pastel color palettes.

Strong visual presence with heavyweight typography, high-contrast colors, and commanding layouts.

Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements.

High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.

Design the structural anatomy of screens at wireframe fidelity — what goes where and why, before anyone argues about how it looks. Part of the Intent design strategy system. Produces lo-fi idea boards for divergent expl…

Structured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications.

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…

Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces.

High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention.

Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience.

1950s-1990s nostalgia with skeuomorphic touches, grainy textures, retro color palettes, and pixel-style typography.

Game-inspired fantasy aesthetic with bold, premium visuals, rich color palettes, and immersive thematic elements.

Monospace-driven, matrix-inspired design with high-contrast elements, compact density, and a hacker-chic aesthetic.

Lively, colorful design with bold playful typography, warm accents, and dynamic visual energy.

Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.

Conversion-focused design that removes friction and guides users toward action through clarity, trust, and speed.

Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.

Electric neon glow effects with high-contrast color pairings for bold, attention-grabbing interfaces.

Real-world mimicry with textured surfaces, 3D effects, and familiar physical metaphors for intuitive digital interfaces.

Vibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure.

Spatial depth design with isometric views, vanishing points, and layered elements that guide attention through 3D-like realism.

Design-for-manufacturing review of a part for sheet metal, CNC machining, or injection molding - bends, reliefs and flat patterns; machining access, internal corners, deep features and setups; draft, undercuts and proje…

Playful, minimal design with bright colors, rounded shapes, tactile 3D borders, and friendly illustrations for approachable interfaces.

Retro arcade-inspired design with pixel fonts, dotted borders, playful high-contrast colors, and 8-bit game aesthetics.

Classic block-game inspired design with playful colors, bold display fonts, and compact, high-energy layouts.

A research-journal aesthetic printed on warm stone — authoritative, editorial, almost achromatic. Pages live on warm ivory parchment (never pure white), with near-black slate as the dominant ink.

An immersive, interactive, exhibit-style interface that blends storytelling, animation, and gamified elements to create a playful, experience-driven journey. The entire app sits on a single continuous brand-colored canv…

Common style patterns, layer configurations, and recipes for typical mapping scenarios including restaurant finders, real estate, data visualization, navigation, delivery/logistics, and more. Use when implementing speci…

Create a spacing scale from a base unit with rules for when each step applies. Use when standardising padding and margins. For page-level columns and gutters, use `layout-grid`.

Guided journey from an app idea to a deliberate architecture: boundaries, domain model, data decisions, and resilience, making only the expensive-to-reverse decisions and deferring the rest. Orchestrates eight skills ph…

Design layouts and interactions that adapt across screen sizes and input methods. Use when one design must serve many viewports. For the underlying column grid use `layout-grid`; for OS-specific patterns use `platform-c…

Use before creative or constructive work (features, architecture, behavior). Transforms vague ideas into validated designs through disciplined reasoning and collaboration.

A friendly, hand-drawn sketch interface inspired by pencil illustrations on warm cream paper. Soft teal brand accents, hand-written display headings, rounded pill controls.

Create tiny no-text Milvus-style sticker memes for technical marketing, WeChat-style article moments, community posts, and developer-group reactions. Use when the user wants an original meme/sticker with an abstract Mil…

WHAT: Draws a code change or part of a codebase as an animated architecture or data-flow diagram, on its own or in a pull request. WHEN: asked to diagram, visualise or explain a change or a system, or when a pull reques…

A modern, graphic, editorial-poster aesthetic — warm and confident — built on alternating cream and burnt orange sections, an amber brand color.