Design & Media Agent Skills for Zed

Enforces professional frontend architecture — component structure, CSS methodology, state management, performance, and React patterns.

Measure and diagnose one specific difference between a rendered React screen and its Figma design export — which mechanism to use, how to…

Optional visual planning assistant. Use when the user asks MeiGen to develop a creative idea, explore visual directions, improve a prompt…

Improve Mermaid diagrams through a render, inspect, and refine loop.

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind…

Toolkit for creating animated GIFs optimized for Slack, with validators for size constraints and composable animation primitives.

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling…

Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations.

Apply surface mimicry — making an interface element look like a familiar physical object to communicate its purpose at a glance.

Stripped-back design emphasizing whitespace, clean typography, and restrained color for maximum clarity and focus.

Convert photos (people, pets, objects, logos) into 4 animated GIF stickers with captions.

Use this skill when designing to prevent errors of intention — wrong actions taken because the user''s model of the situation was wrong.

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

Automate Modelry tasks via Rube MCP (Composio).

Build modern Shiny dashboards and applications using bslib (Bootstrap 5).

Use when a user asks Creative Production to generate several concept images, image options, visual directions, mood boards, visual…

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

Motion Canvas framework reference covering project setup, core concepts (generators, signals, refs, scene hierarchy, timing, utilities)…

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…