Design & Media Agent Skills for Claude Code

Use this skill when laying out a form, fixing a confusing form, or building a form layout convention for a design system.

Facilitates collaborative public space co-design workshops to capture stakeholder needs, iterate visual prototypes, and generate…

Publish your own work to 21st.dev and manage it from the terminal with the `21st` CLI (`@21st-dev/cli`): publish a React component to a…

Dynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality.

Generate localized cover images and reusable image prompts from the shared Punk style library for articles, Xiaohongshu notes, WeChat…

Generate complete Python scripts that build polished PowerPoint decks with python-pptx and real slide content.

Build and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcement

React 19 patterns with React Compiler. Trigger: When writing React 19 components/hooks in .tsx (React Compiler rules, hook patterns, refs…

Scaffolds enterprise-grade React 19 and Ant Design v6 admin applications in an NX and Yarn Berry monorepo workspace.

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

High-quality React component authoring focused on single responsibility, low coupling, and English-only code and comments.

Use this skill when designing surfaces that accelerate repeat tasks through recents, frequently-used items, and contextual suggestions.

Use this skill whenever the user must locate or choose something from many possibilities — pickers, command palettes, navigation menus…

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…

Programmatic video creation with React. Useful for branded explainers, social cuts, dashboards-to-video, and reproducible motion graphics.

Structure Remotion markup for interactivity

Remotion Map animation knowledge

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

Preview a Remotion video