Design & Media Agent Skills for Claude Code

Review a social-media service banner for message clarity, composition, legibility, accessibility, export readiness, and AI-generation…

Review visual work against approved art direction, hierarchy, composition, readability, consistency, production constraints, and intended…

Create or revise deterministic editorial visual-poetry posters in which exact crops from one source photograph become inline semantic…

Screenshot comparison QA for frontend development.

Structured visual QA verdict for screenshot-to-reference comparisons.

Author a vos animation program (VosConfigJson) from scratch or debug one — declarative configs compiling into deterministic Three.js +…

Decompose large Vue 3 components into focused SFCs and composables with explicit contracts, simple templates, and SSR-safe side effects.

Architects high-performance Vue 3 applications using Composition API, script setup, custom composables, and Pinia state management.

Scaffolds enterprise-ready Vue 3 admin frontends in an Nx monorepo with Vite, Element Plus, Pinia, and Yarn Berry.

Design intentional imperfection that reads as warmth — subtle asymmetry, hand-drawn elements, organic textures, intentional irregularities.

Apply wabi-sabi restraint — the discipline of leaving things out, of resisting decoration, of letting empty space and silence do design…

Creates vivid, varied, tactile wallpaper prompts with a clear visual thesis, intentional palette, atmospheric depth, and desktop-safe…

Establishes clear composition, adaptive detail, explicit orientation, and desktop-safe defaults for every wallpaper prompt.

Use this skill whenever a user must navigate within a non-trivial space — a multi-page web app, a documentation site, a hierarchical…

Establish project context - foundation for all design work

Create UX scenario outlines from Trigger Map through structured micro-steps

Generate visual and text assets from specifications through AI-powered creative production

Web Animations API adapter patterns for HyperFrames.

A minimalist CSS component library and design system (black-white-gray, dark mode, zero-build, wb-* prefix) to build the most BEAUTIFUL…

When to activate: web components, custom elements, Shadow DOM, HTML templates, slots, lit-element, custom HTML tags

Use for web interfaces, landing pages, product sites, dashboards, React, Next.js, Astro, Tailwind, frontend audits, responsive design…