Design & Media Agent Skills for Grok Build

Frontend engineer — UI components, dashboards, design system implementation, and frontend audits.

Product design analysis from context and screenshots.

Documents the reasoning behind design decisions including alternatives considered, trade-offs evaluated, and principles applied.

Product interaction and UX expert. Use when reviewing UI/UX, conducting heuristic evaluations, designing user journeys, applying cognitive…

Generates brand-aligned, production-ready PowerPoint presentations using curated design systems and standardized business archetypes.

Use this skill when deciding *what to surface* and *what to tuck* — the editorial choices behind progressive disclosure.

Define and document prototype interactions, transitions, and hotspots

Use this skill when laying out a form, fixing a confusing form, or building a form layout convention for a design system.

Generate complete Python scripts that build polished PowerPoint decks with python-pptx and real slide content.

A brutalist poster-series case study for a music festival — the concept, the system, and how it scaled across formats.

Build and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcement

React 19 patterns with React Compiler. Trigger: When writing React 19 components/hooks in .tsx (React Compiler rules, hook patterns, refs…

High-quality React component authoring focused on single responsibility, low coupling, and English-only code and comments.

Use this skill when designing surfaces that accelerate repeat tasks through recents, frequently-used items, and contextual suggestions.

Use this skill whenever the user must locate or choose something from many possibilities — pickers, command palettes, navigation menus…

Upgrades existing websites and apps to premium quality.

Material UI v9 Quick Reference Cheatsheet — Which component to use, correct import (@mui/material/X), essential props and table of…

Primary/default skill for UI design, product design, web design, landing pages, dashboards, product screens, redesigns, visual polish…

Programmatic video creation with React. Useful for branded explainers, social cuts, dashboards-to-video, and reproducible motion graphics.

Port an existing Remotion (React) composition''s source to HyperFrames HTML.

Use when building, reviewing, or refactoring a Remotion project, especially parameterized launch or demo videos with shared props schemas…