Design & Media Agent Skills for Windsurf (legacy)

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…

Turn travel or lifestyle photos into 4:5 memory-diary pages pairing real photography with a watercolor and colored-pencil interpretation…

Audit and refine landing pages to avoid generic AI-generated visual quality problems using Meng To's frontend design checklist.

Use this skill whenever the design will be used by people who bring prior expectations — which is essentially every design.

Change theme, output format, or check plugin dependencies

Improve Mermaid diagrams through a render, inspect, and refine loop.

Analyze a design against all 10 Refactoring UI skills and generate a comprehensive assessment with specific fixes

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration.

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel.