Design & Media Agent Skills for Windsurf (legacy)

A modern dark-themed React UI system using Tailwind CSS and Framer Motion.

Big-tech style (Stripe, Vercel, Apple) UI development.

Use when implementing, refactoring, or reviewing frontend UI across SwiftUI, React, React Native, Flutter, web, or mobile apps.

提供公司级前端 UI/UX 设计知识库，覆盖产品类型、视觉方向、设计 token、布局、 交互、可访问性、动效与交付检查。当前端任务需要统一设计语言或体验门禁时使用。

Automate Gamma tasks via Rube MCP (Composio).

Generate presentations, documents, and webpages via Gamma API.

Anti-slop frontend skill for landing pages, portfolios, and redesigns.

[Trigger] When PPT workflow needs SVG slide layout and aesthetic optimization via Gemini. [Output] Structured optimization suggestions…

Use this skill for generative video editing, text-to-video, image-referenced video generation, first-frame-to-video, first-and-last-frame…

Remove the visible Gemini AI watermark from images using reverse alpha blending.

Generate AI images, videos, audio via Picsart gen-ai CLI.

Generate Figma Code Connect mappings that link React components to their Figma counterparts.

Generate an image from a text prompt using OpenAI's gpt-image-2 API and save it into the project.

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

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.

Production-ready UI motion system for React/Next.js.

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

Translates Figma designs into production-ready application code with 1:1 visual fidelity.

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