Design & Media Agent Skills for Windsurf (legacy)

Prepare a Bitwarden design handoff — the Figma file in Ready-for-Dev state and the Jira state transitions that go with it.

Creates zero-dependency, animation-rich HTML presentations from scratch or by converting PowerPoint files.

A standalone pricing page — header, plan tiers, feature comparison table, and an FAQ.

Use when asked for framework-specific best practices, implementation guidelines for React/Vue/Svelte/Next.js, or stack-specific patterns.

Generates professional-grade, production-ready frontend interfaces using advanced design principles and a systematic design language.

Design and build a prototype that tests a product idea before it is built — takes a PRD, story, or rough idea as its source, picks the…

Provides React patterns for hooks, effects, refs, and component design.

Adjust an already-implemented UI in-session with verification against the design source

Generates realistic, high-fidelity Reddit post card visualizations for social media sharing and video overlays.

Use this plugin when the user has an existing OpenDesign artifact and wants targeted critique, patching, brand tightening, responsive…

Generate a polished HTML presentation page and Obsidian Canvas for big releases — new products, takeovers, major migrations.

Use when an agent is about to build or refactor interface code and needs a compact, repository-specific brief covering existing tokens…

A neighborhood zine on the disappearing corner shops — portraits, voices, and what a block loses when they close.

Use when user wants a standalone HTML diagram in flat engineering blueprint style — architecture diagrams, system flows, technical spec…

Create interface designs, wireframes, and design systems.

S2 multi-dimensional cross-analysis table development assistant (Expert Skill).

Single-page SaaS landing with hero, features, social proof, pricing, and CTA.

A cherry-blossom-season travel photo essay through Kyoto — the arrival, the peak bloom, and the moment that made the trip.

Visual design intelligence and UI aesthetics.

Generate mermaid diagrams — flowcharts for architecture, sequence diagrams for interactions.

Build speculative worlds, neon, and future surfaces.