Design & Media Agent Skills for Claude Code

Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and…

Use this skill when assessing design system maturity, evaluating adoption health, analyzing component duplication, or calculating design…

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

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files.

Anti-slop frontend skill for landing pages, portfolios, and redesigns.

Create a monochrome technical wireframe design system with exploded 3D structure, connector annotations, sparse information labels, and…

Classic block-game inspired design with playful colors, bold display fonts, and compact, high-energy layouts.

Use this skill when designing text-alignment and numeric-alignment decisions — choosing between left, right, center, and justified text…

Turn a supplied photograph into a vertical editorial artwork inspired by the visual language of Teamfight Tactics Set 18: Enchanted Wilds…

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.

A cross-cutting cognitive mode for sitting with design problems before rushing to solve them.

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

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…

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.

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

Build a scroll-driven 3D product landing page using Three.js + GSAP ScrollTrigger.

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