Design & Media Agent Skills for Windsurf (legacy)

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

Use Grok 4.5 as the required external design advisor when a task needs UI critique, UX critique, component-choice review, interaction-flow…

Turn uploaded photos into full-canvas 3:4 handcrafted travel diorama posters.

Automate Happy Scribe tasks via Rube MCP (Composio).

Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management.

Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.

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

iOS 26 Liquid Glass design system — dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and…

Use this skill whenever a design has *more* available than the user needs to see at this moment — settings panels with advanced options…

Author a Hermes color theme that skins every surface.

Use this skill when the question is what to *pre-select* in a list of options — radio groups, dropdowns, configuration UIs, plan pickers…

Generates event key visuals, interactive prototypes, and proposal decks using OpenDesign with multi-format export support.

Use this skill whenever creating a visual graphic as a PNG image — banners, cards, diagrams, infographics, section headers…

For consulting delivery work: turn diagnosis, frameworks, and project work into a client-adoptable action plan.

Converts documents, outlines, or notes into self-contained HTML slide decks with horizontal (Reveal.js) or vertical scroll navigation and…

Transforms raw content into standalone, responsive 16:9 HTML slide presentations with keyboard navigation and print support.

Generates low-fidelity, self-contained HTML wireframes in Japanese to validate UI structure, information hierarchy, and user task flows…

Build a throwaway prototype to answer a design question.

Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play…

The HyperFrames composition contract — build one renderable project.

Duplicates the selected FRAME or SECTION once per target language and translates every text node inside each copy — including text nested…