Design & Media Agent Skills for Cursor

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…

WHEN building React components/pages/apps; enforces scalable architecture, state management, API layer, performance patterns.

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.

A rating component for collecting user feedback with customizable icons, colors, and half-star support in Naive UI.

REQUIRED for all image generation requests.

NASApunk retro-futurist frontend design system with a Starfield-inspired modern layer — NASA golden age (1960s–1980s) aesthetic evolved…

Use when adding or reviewing UI navigation so internal routes preserve normal SPA behavior plus Cmd/Ctrl-click and middle-click new-tab…

Generates and refines realistic, smartphone-quality AI images by eliminating synthetic artifacts and plastic textures for social media.

Use when designing or auditing display items for a Nature Geoscience manuscript, where 4-6 figures/tables must carry the Earth-system…