Design & Media Agent Skills for Claude Code

Build responsive, mobile-first web applications.

Use realistic mock data in frontend development with clear separation from production data.

Extracts design specifications from mock images including colors, typography, spacing, and component details

Guides safe modification of the TaxonomicFilter — PostHog's multi-tab picker for events, actions, properties, cohorts, and more.

Generate a WCAG 2.2 accessibility audit checklist and remediation suggestions for any UI or design.

Advanced motion patterns for React / Next.js — drag & drop, gestures, text animations, SVG path drawing, custom hooks, imperative…

Build sophisticated React animations with Motion (formerly Framer Motion) - declarative animations, gestures (drag, hover, tap), scroll…

Motion design creation skill that works across any connected generation platform (Higgsfield, Runway, Magnific, Arcads, Ideogram…

Build React animations with Motion (formerly Framer Motion) - gestures (drag, hover, tap), scroll effects, spring physics, layout…

Motion tokens, spring presets, performance rules, device adaptation, accessibility enforcement, and SSR safety for React / Next.js using…

Use this skill to review animations, transitions, parallax, scroll effects, reveals, carousels, and micro-interactions in a website or…

Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and…

Pixel-based motion and UI change analysis from frame sequences or screenshots using computer vision and visual comparison.

Generate images and videos with MuAPI's schema-driven asynchronous media API while protecting keys, polling, and output downloads.

Build standalone HTML prototypes for new, modified, or migrated pages.

Create professional AWS-themed PowerPoint presentations with two theme options: dark (reInvent 2023/2025 with gradient backgrounds) and…

Product content designer for UI copy. Use when writing, reviewing, or auditing user-facing text: button labels, error messages, tooltips, empty states, modal copy, placeholder text, confirmation…

Generate or edit images with Google's Nano Banana 2 (`gemini-3.1-flash-image-preview`).

REQUIRED for all image generation requests.

A formalized skill for generating hyper-realistic, highly-controlled images using the Nano Banana 2 (Gemini 3.1 Flash) model through…

AI image generation and editing using Google Gemini models (Nano Banana).