Design & Media Agent Skills

Build visually stunning geospatial demo webapps with MapLibre globe, DuckDB-WASM, and a warm dark HUD aesthetic.

Design gesture interactions for touch and pointer — swipe, drag, long-press, and their discoverability.

Guide and conduct user research — from planning through synthesis.

Use when creating frosted glass effects, transparent overlays, or modern glass UI.

Generates high-impact digital glitch and data-corruption title frames for video transitions and cyberpunk-themed interfaces.

Generate and edit images using OpenAI's GPT Image 1.5 model.

Generates and edits high-quality visual assets using GPT Image 2 with 80+ structured prompt templates across three flexible execution modes.

Sketch UI/design ideas with throwaway HTML mockups, or propose what to sketch next (frontier mode)

Implements onboarding and help systems including product tours, interactive tutorials, tooltips, checklists, help panels, and progressive…

Generates elegant, magazine-style e-ink presentation decks with minimalist layouts and premium serif typography.

Generate Guizang-style social card image sets, Live Photo motion cards, material-first Live Photo puzzle layouts, triple Live Photo…

Generate hand-drawn Excalidraw diagrams from a prompt — animated SVG, hosted edit link, and PNG export.

Write the implementation handoff — measurements, behaviours, assets, states, and edge cases.

Elite frontend image-direction skill for generating premium, conversion-aware website design references.

Frontend development. Use for React, Next.js, Raycast extensions, Vite-based frontend projects.

Apply Hick's Law — decision time grows with the number of simultaneous choices.

Advanced motion patterns for React / Next.js — drag & drop, gestures, text animations, SVG path drawing, custom hooks, imperative…

Builds production-ready frontend interfaces and components inspired by top-tier tech design systems like Stripe, Vercel, and Apple.

Use to review a generated HTML deck or single-page artifact for visual quality and structural correctness.

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

HTML presentation with a cream-colored blueprint architecture style.