Design & Media Agent Skills for VS Code

Svelte template directives ({@attach}, {@html}, {@render}, {@const}, {@debug}).

Animate SVG character rigs with GSAP, CSS transforms, Remotion frame control, and HyperFrames-compatible browser previews.

Optimize SVG assets, generate sprites, and convert to React components

Swiss-inspired creative-mode presentation template skill with bold editorial typography, high-contrast geometric cards, interactive slide…

Generates minimalist, grid-based presentation decks inspired by the rationalist Swiss International typographic style.

Swiss-style user-research narrative template in warm-paper editorial aesthetics.

Sync design system components between Figma and code using Code Connect mappings

Synthesize user research from interviews, surveys, and feedback into structured insights.

Pilot the v1 research guide against synthetic personas —every trait marked as evidence or assumption, at least one skeptic— to find broken…

Use this skill when distinguishing the two mental-model types — system models (how the user thinks the system works) and interaction…

Design and review production data tables for SaaS, admin, reporting, billing, audit, and operational interfaces.

Tailwind CSS patterns and conventions. Use when writing responsive designs, implementing dark mode, creating reusable component styles…

Use when designing/implementing UI with Tailwind CSS (layout, typography, responsive, theming, component patterns).

Tailwind CSS v4 usage guide and v3-to-v4 differences.

Use when writing HTML/JSX with Tailwind CSS for common UI patterns like heroes, forms, lists, navbars, modals, cards, or any standard web…

Create and audit presentations (Beamer or Quarto RevealJS).

OKR tracker page — quarter banner, three objectives with their key results as progress bars, owner avatars, status pills, and a "this…

Think like a skeptical technical recruiter when working on the daily.dev Recruiter platform.

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

Generate matching visuals from text via Picsart gen-ai.

Turn a supplied photograph into a vertical editorial artwork inspired by the visual language of Teamfight Tactics Set 18: Enchanted Wilds…