Design & Media Agent Skills for Windsurf (legacy)

Use when the user requests diagrams, flowcharts, architecture diagrams, ER diagrams, UML / sequence / class diagrams, SysML / MBSE…

A type-and-color system for a culture magazine relaunch — the grid, the tri-tone palette, and the layout kit.

Game-inspired fantasy aesthetic with bold, premium visuals, rich color palettes, and immersive thematic elements.

Team-management dashboard skill in the FlowAI aesthetic — three tabs (Team Members, Team Details, Activity Log), KPI stat row, member…

MUST USE for frontend/web UI/UX/visual work: building, styling, redesigning pages/components, React setup, performance audits, visual QA…

Frontend UI: pages, apps, components, polished non-generic design.

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

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files.

A multi-frame gamified mobile-app prototype — three phone frames on a dark showcase stage.

Generate transient or saved inline chat UI with Alpine/Tailwind controls, outputs, app state, and extensions.

Mandatory design-brief gate for clarifying the product and outcome.

Web typography from choosing fonts to spacing, wrapping and accessibility.

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

Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive…

Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching.

Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText…

Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers.

Official GSAP skill for gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe.

Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup.

Official GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount.

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