Design & Media Agent Skills for Windsurf (legacy)

Create a new blank Figma Design or FigJam file.

Write a structured design brief for a Figma design task from a product requirement or feature request.

Runs a PM-perspective design critique focused on product outcomes and user goals, not aesthetics.

Runs a pre-handoff QA checklist on a Figma design before it goes to engineering.

Migrate design systems between Figma files, or from other tools to Figma

Configure Figma API access across dev, staging, and production environments.

Optimize Figma REST API performance with caching, partial fetches, and

Plan prototype interactions and flows for user testing in Figma.

Design a spacing and layout token system for a Figma design system.

Figma-to-Odoo design workflow and complete page template reference.

Use when the user wants to extract Figma designs into production-ready React or Next.js components with TypeScript, Tailwind CSS, and…

Apply Fitts's Law — target acquisition time depends on size and distance.

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

Apply Flowkit CSS naming system in Webflow.

Applies React/TypeScript-specific technical decision criteria, anti-pattern detection, debugging, and frontend quality gates.

Ensures stable and consistent Vue/React frontend modifications by enforcing strict layout, data-binding, and styling constraints.

Establishes standardized frontend architecture, security protocols, and testing requirements for production-ready React applications.

Builds production-quality, accessible, responsive user-facing UIs.

Designer-turned-developer who crafts stunning UI/UX even without design mockups

Expert skill for G2 legend development - provides comprehensive knowledge about legend rendering implementation, component architecture…

Generate and edit images using the Gemini API (Nano Banana).