Skill catalog

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…

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…

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

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 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…

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

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

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

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

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

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

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

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

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

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

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

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

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

This skill should be used when the user asks to "add a glassmorphism effect", "frosted glass UI", "Apple liquid glass style", "frosted blur card", "translucent glass panel animation", "make a frosted nav bar", "build a…

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

When the user wants to plan, create, or repurpose visual content (images, infographics, social post images) across channels. Also use when the user mentions "content images," "social media images," "infographic," "visua…

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.

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

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.

Image editing and enhancement of an existing image. Covers background replacement, super-resolution upscaling, old photo restoration, colorization, person removal, portrait retouching (skin smoothing, blemish removal),…

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

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

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.

You MUST use this when a request needs design decisions before code - new features, product or UX behavior, architecture changes, unclear success criteria, or two materially different approaches. Explicitly specified me…

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

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

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…

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

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…

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

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…

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

Create a proto-persona from current research, market signals, and team knowledge. Use when you need a working customer profile before deeper validation.

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.

Motion-design follow-up skill inspired by Emil Kowalski's animation guidance. Use after an interface exists to add tasteful micro-interactions, state transitions, and page motion with product-grade restraint.

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…

Create beautiful infographics based on given text content. Use when users request to create infographics.

Creates a Tile Palette asset with a rectangular, hexagonal, or isometric Grid layout. Use when the user wants to organize tiles for 2D level design.

Specify one micro-interaction completely — trigger, rules, feedback, loops, and modes. Use when handing a single interaction to engineering. For motion craft alone use `animation-principles`; for multi-state components…

Specify wireframe layout — content priority, component placement, and annotation. Use when defining structure before visual design. For grid mechanics, use `layout-grid` (ui-design).

Turn company facts, brand inputs, and stakeholder goals into a polished company overview deck with clear positioning, proof, and contact-ready closure. Use when the user asks for a company deck, corporate overview, comp…