Design & Media Agent Skills for VS Code

Generate an MCP App widget (self-contained HTML) for an MCP tool.

Evaluates UI/UX design plans, user flows, UI states, responsiveness, and accessibility before frontend implementation.

Apply the Gestalt principle of Similarity — elements that share visual attributes (color, shape, size, orientation) are perceived as…

Dark glassmorphism design with frosted panels, backdrop blur, and vibrant mint-green/indigo accents on deep navy background.

Generates cyberpunk-style title frames featuring digital glitch effects, chromatic aberration, and data-corruption artifacts for video…

Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays

Automate Google Slides tasks via Rube MCP (Composio): create presentations, add slides from Markdown, batch update, copy from templates…

Turn travel photos into 3:4 opaque-gouache posters using a split photo/still-life layout, a full-canvas object still life, or a full-scene…

Render Graphviz DOT graphs to images with multiple layout algorithms

Use Grok 4.5 as the required external design advisor when a task needs UI critique, UX critique, component-choice review, interaction-flow…

A municipal urban-tree-canopy policy proposal — the public need, the evidence, the options, and the funding decision.

Use when implementing Disney's 12 animation principles with GSAP (GreenSock Animation Platform)

Package sketch design findings into a persistent project skill for future build conversations

Generate UI design contract (UI-SPEC.md) for frontend phases

Retroactive 6-pillar visual audit of implemented frontend code

Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots.

Turn uploaded photos into full-canvas 3:4 handcrafted travel diorama posters.

Automate Happy Scribe tasks via Rube MCP (Composio).

Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management.

Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.