Design & Media Agent Skills for OpenAI Agents SDK

Create Manim animations for demo videos.

Configuring fonts and glyphs for MapLibre GL JS and MapLibre Native — the style's `glyphs` URL, self-hosting or generating font PBFs, the…

Apply the principle of Mapping — designing the relationship between controls and their effects so the connection between input and output…

Apply natural mapping — the strongest form of mapping, in which the spatial position, motion, or shape of a control directly corresponds…

Create or improve production-quality frontend UI/UX in code, including React, Next.js, Tailwind CSS, shadcn/Radix, responsive layouts…

Use the MasterGo MCP server to fetch DSL, component documents, site metadata, D2C output, or code-to-design sync data from MasterGo.

Independently review UI implementation fidelity against a MasterGo design or DSL, for iOS (UIKit/SwiftUI, static review) and React Web…

Google's comprehensive open-source design system providing guidelines, components, and tools for building high-quality digital experiences

Material UI Installation and Setup (v9, 2026-08).

Implement UI using Material Design 3 with Material Web (`@material/web`) based on the official quick-start flow.

When to activate: React 19, hooks, RSC, Server Components, Context, portals, error boundaries, performance optimization

When to activate: responsive design, mobile-first, breakpoints, fluid typography, container queries, viewport units, clamp

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.

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