Design & Media Agent Skills for Claude Desktop

Production-readiness pass — audits and implements the full non-happy-path matrix: loading skeletons, empty states, error messages, partial…

Design web pages and app UIs with Efecto — create sessions, build layouts with JSX and Tailwind CSS, manage artboards, and push real-time…

Create world-class PowerPoint presentations with professional design, consistent branding, sophisticated animations, and polished visual…

Review UI code for alignment with the emcn design system — components, tokens, patterns, and conventions

Use when a repository needs deterministic pull-request checks for new accessibility, design-token, component-structure, responsive, and…

Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.

Create Excalidraw diagram JSON files that make visual arguments.

Generate an Excalidraw whiteboard in Sean's hand-drawn video style (Excalifont, roughness 1, green signature, socials + watermark, source…

Apply when facing a novel UI interaction or architectural decision with no precedent in the codebase.

Apply when product, UX, or feature-scope tradeoffs come up.

Create high-quality animated explainer visuals for essays and blog posts.

Vibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure.

How extensions render as widgets inside other apps via named UI slots — the framework's optional extension system.

Use when the user says "setup", "setup bridge", "extract", "extract DS", "onboard", "build knowledge base", "initialize bridge", or is…

This skill should be used when the user asks about "UI design", "UX design", "user interface", "user experience", "wireframes", "mockups"…

A playful, energetic, cartoonesque interface inspired by friendly children's-book illustrations — warm cream backgrounds, big bold custom…

Preflight a Figma file for design-to-code fidelity BEFORE generating React.

Every Figma endpoint, plus codegen-ready frame extracts, comments audit, orphans finder, tokens diff Trigger phrases: `extract a figma…

Translate a Figma design into React code that matches the target project's own styling approach, design tokens, and components.

Track drift between Figma designs and generated code with the figma-sync CLI — map components to Figma nodes, baseline design + code…

Use this skill when designing, building, structuring, or reviewing any UI for a complex B2B financial-services web app — the FP&A…