AI Plugin Index
image
Skill by vercel-labs · updated · ★ 19k
Image renderer for json-render that turns JSON specs into SVG and PNG images via Satori. Use when working with @json-render/image, generating OG images from JSON, creating social cards, or rendering AI-generated image specs. image is published by vercel-labs on GitHub.
Install image
Built from the published package, never by AIgit clone --depth 1 https://github.com/vercel-labs/json-render /tmp/json-render && mkdir -p ~/.claude/skills && cp -r /tmp/json-render/skills/image ~/.claude/skills/imageRun in your terminal. Claude Code loads skills from ~/.claude/skills automatically.
git clone --depth 1 https://github.com/vercel-labs/json-render /tmp/json-render && mkdir -p ~/.gemini/antigravity-cli/skills && cp -r /tmp/json-render/skills/image ~/.gemini/antigravity-cli/skills/imageAntigravity CLI loads skills from ~/.gemini/antigravity-cli/skills, or .agents/skills for one project.
Skills can run scripts on your machine. Some need an API key: check the README.
Last commit in the past day
Apache-2.0: permissive, fine for commercial use
Clear description, installs from GitHub, 18,773 stars, original repository
No risky patterns in the files we checked
Weekly newsletter
Like image? Get the best new skills every week
The best new tools, security warnings before you install something risky, and one practical tip. Free, three minute read.
Security check
ANo download-and-run commands, hidden instructions or signs of sending keys out were found.
Checked automatically: skills/image/SKILL.md. This looks for known risky patterns and is not a full audit. How grades work
Inside the skill
-
SKILL.md3 KB
Alternatives to image
All alternatives →
Help the user understand the current topic visually with concise diagrams, code-shape sketches, and focused HTML artifacts.
Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize CSS file size. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
Use when reviewing stylesheets, component styles, and responsive behavior related to Order CSS files correctly. Check the rendered layout across breakpoints and interaction states before proposing a fix.
Use when reviewing stylesheets, component styles, and responsive behavior related to Inline critical CSS for faster rendering. Check the rendered layout across breakpoints and interaction states before proposing a fix.
Use when an app uses @pierre/highlights to generate syntax-highlighted HTML or tokens, stream code, incrementally tokenize edits, or apply Zed-compatible themes and CSS variables.
Plan review flow — evaluate an implementation plan before it is executed, delegating the review to a subagent that follows the plan-review-criteria skill. Use it when the user asks to review a plan, in any phrasing.
image: common questions
How do I install image?
Run the command above to copy the skill into ~/.claude/skills/. Claude Code picks it up automatically.
Is image free?
The code is published under the Apache-2.0 licence. The service it connects to may have its own pricing.
Is image safe to use?
It scores 89 of 100. Grades: maintenance A, licence A, quality A. Security check: grade A, no risky patterns found in the files checked. Review the code before you install. How grades work.
What are alternatives to image?
Similar skills: show-me, css-file-size, css-order, css-critical.