Design & Media Agent Skills for Claude Desktop

Designs bespoke, self-contained HTML artifacts with distinctive typography, intentional palettes, and polished Japanese layout principles.

Apply foundational design principles: affordances, signifiers, constraints, feedback, and conceptual models.

User research reconnaissance — survey existing personas, research docs, interview notes, and feedback artifacts to establish what is…

Create award-winning, immersive web experiences at the level of Awwwards-featured agencies.

Production-ready Tailwind CSS patterns for common website components: responsive layouts, cards, navigation, forms, buttons, and typography.

Design any user-facing experience end-to-end: task flows, multi-step workflows, navigation structures, onboarding, settings, search…

Use when implementing or reviewing jQuery DOM selection, traversal, manipulation, and method chaining patterns with correct selector…

Check if a React component's prop interface is ready for json-render migration.

Generate guardrailed UI from natural language.

Create distinctive, production-grade frontend interfaces with high design quality.

Review UI code for Web Interface Guidelines compliance.

Create professional research posters in LaTeX using beamerposter, tikzposter, or baposter.

Build slide decks and presentations for research talks.

Produce a print-grade single-page kami (紙 / 纸) document — warm parchment canvas, ink-blue accent, serif at one weight, no italic, no cool…

Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback.

Official GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount.

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

Open Design's unit-economics and BYOK cost model: the assumptions, the sensitivity, and why it scales.

A mobile-app screen rendered inside a pixel-accurate iPhone 15 Pro frame on the page.

Port an existing Remotion (React) composition''s source to HyperFrames HTML.

Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites…