Design & Media Agent Skills for Codex CLI

Master microinteractions, animations, transitions, and feedback systems.

Extract design systems from reference UI images and generate implementation-ready UI design prompts.

Use when creating elaborate, multi-component claude.ai HTML artifacts with React, Tailwind CSS, shadcn/ui, state management, routing, or…

Add small, clear motion to an approved brand raster and deliver layers, loops, or first and last frames.

Turn a method, sequence, maturity model, or grouped idea into a small family of separate brand assets.

Make one integrated brand scene with several visual parts and deliberate room for copy.

Apply concrete design-engineering details that make interfaces feel polished.

Make or reuse one brand-matched raster asset with one clear meaning.

Adds collapsible floating parameter panels to single-file HTML prototypes for live real-time adjustments of colors, typography, layout…

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