Design & Media Agent Skills

Generate elegant cover images for articles.

ALWAYS read this skill before generating or editing any image, or calling image_generate — text-to-image or image-to-image, simple or…

Restricted module for explicit Spatial Web, WebGPU, WebXR, PBR, compute shaders, spatial media and high-end editorial web experiences.

Svelte CSS styling patterns. Use for scoped styles, CSS custom properties, style: directive, :global, or styling child components.

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…