Design & Media Agent Skills

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…

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

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

Transforms MasterGo design mockups into production-ready React and TypeScript components with strict design token mapping and component…

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

Use this to read the MUI (Material UI) documentation.

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

AI image generation and editing. Use when users ask to generate, create, or draw images with AI, or edit and modify existing images.

Design thinking maestro for human-centered design processes.

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

Configure MeiGen plugin provider and API keys.

Use when a Grok Build task involves UI design, interface understanding, Figma, design systems, shadcn/ui, Tailwind, UX audits, Atomic…