Design & Media Agent Skills for Claude Desktop

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.

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).