Design & Media Agent Skills for VS Code

Elite website image-to-code skill for Codex.

Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows.

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

Generic, low-effort, look-the-same AI output.

Generate and edit images using Google Gemini image models.

Create technical and product diagrams — architecture, flowchart, sequence, state machine, ER / data model, timeline, swimlane, quadrant…

UI/UX design intelligence for web and mobile.

Apply professional font and color themes to artifacts including slides, docs, reports, and HTML landing pages.

DDOS v1.1 archetype + theme selection layer.

Master catalog of 68 design system themes (bento, sleek, glassmorphism, neobrutalism, material, shadcn, etc.).

How to create and customize the Material UI theme (v9): createTheme + ThemeProvider + CssBaseline, full dark mode (current default…

Production-ready skill for integrating TheSys C1 Generative UI API into React applications.

Designs, builds, or refactors user-facing web or application interfaces with deliberate visual direction, typography, color and spacing…

Add accessible animated AI loading and agent-status indicators with the React thinking-orbs library.

Three.js and WebGL adapter patterns for HyperFrames.

Scaffold and build interactive 3D visualizations using Three.js with emphasis on algorithmic art, sacred geometry, temporal animations…

Create 3D scenes, interactive experiences, and visual effects using Three.js.

Use when building or debugging interactive 3D scenes on the web with Three.js (scene/camera/renderer, lights/materials, GLTF loading…

YouTube thumbnails, video covers, and article header images via AI image generation and code generation.

Build distinctive, production-grade frontend interfaces with a strong visual point of view.

Drive and script tldraw offline canvases with an agent.