Design & Media Agent Skills for Claude Code

React component decomposition, hook extraction, state machines, composition patterns, hydration safety, and React 19 APIs.

Guidance for implementing or refactoring React components — keep components focused on rendering, props, and events, and extract API…

Apply the principle of Readability — the ease with which sustained prose can be read, determined by line length, line height, paragraph…

Set line length (measure) for prose — capping the maximum width of body text so lines stay in the 45–75 character range that supports…

On-demand audit and targeted upgrade of an existing website or app's design.

Generate or edit images through the OpenAI-compatible relay configured in Codex config/auth files.

Remix a vos.so gallery program into your own — fetch its config, edit the declared knobs or code locally, validate with vos check, and…

Best practices for Remotion - Video creation in React

Create a new Remotion video

Structure Remotion markup for interactivity

Remotion Map animation knowledge

Content, animation and effects best practices

Generate programmatic motion design videos for social media (Instagram Reels, TikTok, YouTube Shorts) using Claude Code + Remotion.

Preview a Remotion video

Toolkit-specific Remotion patterns — custom transitions, shared components, and project conventions.

Create motion graphics and videos using Remotion (React) with audio sync, web fonts, and TailwindCSS.

Render a room floorplan PNG and perform a mandatory visual design critique of the result

Improve hierarchy, layout, typography, color, materials, icon consistency, and motion in an existing interface while preserving brand and…

Turn an open-source repository into an art-directed launch identity by generating complete ImageGen compositions with integrated…

Generate and edit images using Google Gemini 3 Pro Image (Nano Banana Pro).

Generates and edits high-density scientific schematics, technical flowcharts, and proposal diagrams with strict technical fidelity.