Design & Media Agent Skills for Claude Desktop

Designs, audits, and builds high-converting product showcase frontends with interactive workflow demos, design system tokens, and claim…

Polished, business-ready design with modern typography, structured layouts, and a trustworthy visual identity.

Create a layered CSS progressive blur (top or bottom) using multiple backdrop-filter masks for depth and softness.

Use this skill when picking the *mechanism* for revealing tucked content — accordion vs. modal vs. tab vs. separate page vs. tooltip.

Hide optional configuration fields behind subtle "+ Add X" CTAs that reveal inline editors when clicked, with a LivePreview strip as the…

Design QA audit — red flags, severity classification, visual quality scorecard.

Build throwaway, fixture-driven OpenClaw Clack or Pi TUI prototypes and compare multiple interactive variants side by side in tmux without…

Use this skill whenever the design has unknowns that need testing — when a sketch could resolve a debate, when assumptions about user…

Generate or edit raster images through a user-configured third-party OpenAI Images API-compatible endpoint when a task explicitly requests…

Use this skill whenever the question is how to make a composition feel organized — what belongs with what, where groups end, how related…

Use this skill when designing or fixing data tables and tabular layouts — row spacing, column spacing, header treatment, group separators…

Use this skill when designing or fixing navigation — sidebars, top nav, footer nav, mobile menus, breadcrumbs, tab bars, command palette…

Use this skill when designing constraints that work through perception, expectation, and learned convention — symbols, conventions…

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…

Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality.

Generate code screenshots via ray.tinte.dev API.

Generate beautiful code snippet images using ray.so.

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