Design & Media Agent Skills for Windsurf (legacy)

Use this skill to review animations, transitions, parallax, scroll effects, reveals, carousels, and micro-interactions in a website or…

Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and…

Create distinctive, production-grade frontend interfaces with high design quality.

Build standalone HTML prototypes for new, modified, or migrated pages.

Create distinctive, production-grade frontend interfaces with high design quality.

Product content designer for UI copy. Use when writing, reviewing, or auditing user-facing text: button labels, error messages, tooltips, empty states, modal copy, placeholder text, confirmation…

Generates AI images using the nano-banana CLI (Gemini 3.1 Flash default, Pro available).

A formalized skill for generating hyper-realistic, highly-controlled images using the Nano Banana 2 (Gemini 3.1 Flash) model through…

Generates high-quality images with state-of-the-art Korean typography for card news, posters, and marketing creatives.

Generate or edit images via Gemini 3 Pro Image (Nano Banana Pro).

Generate, remix, or edit images with Nanobanana / Nano Banana 2 through the bundled Gemini CLI wrapper.

AI-powered PPT generation with document analysis and styled images

Install and wire registry blocks and components into HyperFrames compositions.

Teaches the AI to design like a high-end agency.

Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component…

Design and review web application information architecture, navigation hierarchy, routes, tabs, sidebars, breadcrumbs, deep links, browser…

Modern take on brutalism with bold borders, vivid accent colors, and raw, high-contrast layouts on warm surfaces.

Create a container-in-container layout system using nested frames.

Initializes a new BrandArtisan visuals project by laying down its reference guidelines.

Scaffolds a new visual (.tsx) in an existing BrandArtisan project, aligned with its brand.md guidelines.

Scaffold a new Next.js project with a full stack and set of conventions.