Design & Media Agent Skills for VS Code

Use this plugin when the user wants an immersive, scroll-driven fashion / collection landing page with a full-bleed background video, an…

Guides synthesizing raw qualitative user research into defensible themes using affinity mapping (the KJ method) and conducting…

Guides React and Next.js development with structured quality gates, state modeling, performance optimization, and UI refinement.

Use when designing expensive agency-grade interfaces with premium fonts, spatial rhythm, soft depth, and fluid microinteractions.

A user may ask you to create, edit, or analyze the contents of a .pptx file.

Opinionated, evolving constraints to guide agents when building interfaces

Generate UX microcopy in StyleSeed's Toss-inspired voice for buttons, empty states, errors, toasts, confirmations, and form guidance.

Use this skill whenever a design has too much or too little visual content competing for attention — when a screen "feels noisy," "looks…

Create and edit images using OpenAI image generation API with GPT image models (gpt-image-1, gpt-image-1-mini, gpt-image-2 and later).

Own product requirement through approved UI design via Google Stitch, produce a Design Contract, then hand off to draft-technical-tickets.

Analyze any website's design system — detects UI framework, extracts colors, typography, and component patterns.

Deconstruct any live website into reusable recipe — extract HTML, CSS, JS, design tokens, animations.

Use Sites to build websites, including landing pages, portfolios, dashboards, portals, trackers, hubs, and internal tools.

Draw UI proposals, redesigns, and flow diagrams as hand-drawn Excalidraw/tldraw-style HTML boards — before/after screen mockups, annotated…

Open a Fabric.js-based SVG editor in the browser for collaborative visual prototyping.

Converts any block of text into a conceptual sketch image.

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

Create skeuomorphic web UI surfaces with layered gradients, stacked inner and outer shadows, reflective gradient borders, micro texture…

Emulate giallo color, gloves, and set-piece kills.

Trigger: When creating, refactoring, or modifying Angular components, modules, or templates.

Use systematic spacing with 25% minimum jumps, start with excess whitespace