Design & Media Agent Skills for VS Code

Create masked staggered word reveals on scroll with GSAP ScrollTrigger.

Reference-first frontend design workflow.

Implement Google's Material Design 3 (Material You) UI system.

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

Convert photographs of materials-testing equipment into scientifically faithful, moderately simplified, isometric 3D schematics for SCI…

A cyber-slick, dark-only Matrix-inspired interface defined by minimalist fashion, high-tech digital elements

When to activate: accessibility, ARIA, WCAG, screen reader, keyboard navigation, focus management, a11y audit

When to activate: CSS animations, GSAP, Framer Motion, scroll-driven animations, Web Animations API, transitions, motion

Measure and diagnose one specific difference between a rendered React screen and its Figma design export — which mechanism to use, how to…

Create a futuristic, premium, clean dark-blue mesh-gradient design system across background rendering, hero shell, navigation, floating…

User experience design principles for developers

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

Design editorial product UI inspired by Notion and Linear: warm monochrome palette, typographic contrast, flat bento grids, muted pastel…

Vector icon libraries ecosystem guide covering 10+ major libraries with

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

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

GATEWAY — load FIRST before composing any HyperFrames animation or video.

A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand…

Web (CSS/JS/React + GSAP/Motion): classify UI motion as communicative (sequence is the content) or decorative (decorating a result), then…

This skill should be used when the user asks to "make this animation feel natural", "fix motion that feels stiff/floaty/cheap", "my…

Audit and improve web accessibility following WCAG 2.1 guidelines.