devhashfortheweb/vibe-img
skills/vibe-img/SKILL.md
Generate AI images in HTML with a single tag. Use when adding AI-generated images to websites, landing pages, or prototypes. Currently supports OpenAI and Recraft providers, image-to-image editing, upscaling, background removal, vectorization, and consistent theming across multiple images.
$ install --global
skillsauthnpx skillsauth add devhashfortheweb/vibe-img vibe-imgInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 24, 2026, 7:50 AM4.2s1 file scanned
SKILL.md
- name:
- vibe-img
- description:
- Generate AI images in HTML with a single tag. Use when adding AI-generated images to websites, landing pages, or prototypes. Currently supports OpenAI and Recraft providers, image-to-image editing, upscaling, background removal, vectorization, and consistent theming across multiple images.
vibe-img
AI image generation via <vibe-img> web component. One tag, any provider, cached by default on CDN servers.
When to use this skill
- User asks to build or prototype a website, webapp, or UI component
- User wants visually consistent image sets (cards, features, galleries)
- User wants image editing (img2img, background removal, upscaling, vectorization)
The goal is to speed up the prototyping phase with custom-tailored, non-stock assets.
Setup
Add the script tag in <head>:
<script src="https://cdn.jsdelivr.net/npm/vibe-img@1/dist/vibeimg.js"></script>
No build step. No npm install. Works in any HTML page.
Critical rules
- Always use closing tags.
<vibe-img />breaks the DOM — siblings get swallowed. Always:<vibe-img ...></vibe-img> - Ask the user which provider before generating tags. They need their own API key (
openaiorrecraft). <vibe-img>attributes are cache keys. Every attribute is hashed into a cache key. Changing any attribute — even a single character inprompt— regenerates the image and discards the cached version. If the user asks for CSS/layout changes only, do not modify<vibe-img>attributes.- Style goes in
img-style, not inprompt. Keep prompts focused on content. - Use
<vibe-theme>for style consistency across 2+ images. It appends a shared style prompt to every child<vibe-img>'s prompt at generation time. Use it to wrap card grids, feature sections, galleries — anywhere images should look cohesive.
Minimal example
<vibe-img model="recraft" prompt="mountain lake at dawn" img-style="illustration" aspect="wide"></vibe-img>
Provider suggestions
Both providers work for most tasks. If the user doesn't have a preference:
| Need | Suggestion |
|------|------------|
| Illustrations, icons, brand imagery, style control | model="recraft" |
| Photorealistic, complex scenes | model="openai" or model="recraft" with img-style="realistic" |
| Transparent background | recraft + op="remove-bg" or openai + params='{"background":"transparent"}' format="png" |
| SVG output | recraft + op="vectorize" |
| Upscaling | recraft + op="upscale" |
Prompt writing
- Subject first (what is in the image)
- Context (where, when, lighting)
- Composition (angle, framing, focal point)
- Style via
img-styleattribute, NOT in the prompt
Themed groups
<vibe-theme prompt="isometric diorama, clay style, soft studio lighting, pastel palette">
<vibe-img model="recraft" prompt="small coffee shop" aspect="square" img-style="3d"></vibe-img>
<vibe-img model="recraft" prompt="city park with fountain" aspect="square" img-style="3d"></vibe-img>
</vibe-theme>
Image chaining
<vibe-img id="photo" model="recraft" prompt="a cat on a windowsill"></vibe-img>
<vibe-img model="recraft" op="upscale" img-ref="#photo"></vibe-img>
The second element automatically waits for the first to finish before starting. On subsequent page loads both are served from cache instantly — no regeneration, no waiting.
Full attribute and operation reference
See references/api.md for the complete attribute table, all operations, styles, provider-specific params, and common mistakes.
Related Skills
openclaw/openclaw-secret-scanning-maintainer
development
VerifiedTrustedCommunity
Maintainer-only workflow for handling GitHub Secret Scanning alerts on OpenClaw. Use when Codex needs to triage, redact, clean up, and resolve secret leakage found in issue comments, issue bodies, PR comments, or other GitHub content.
357,764SKILL.mdUpdated Apr 15, 2026
openclaw/openclaw-release-maintainer
development
VerifiedTrustedCommunity
Maintainer workflow for OpenClaw releases, prereleases, changelog release notes, and publish validation. Use when Codex needs to prepare or verify stable or beta release steps, align version naming, assemble release notes, check release auth requirements, or validate publish-time commands and artifacts.
357,764SKILL.mdUpdated Apr 10, 2026
openclaw/openclaw-qa-testing
development
VerifiedTrustedCommunity
Run, watch, debug, and extend OpenClaw QA testing with qa-lab and qa-channel. Use when Codex needs to execute the repo-backed QA suite, inspect live QA artifacts, debug failing scenarios, add new QA scenarios, or explain the OpenClaw QA workflow. Prefer the live OpenAI lane with regular openai/gpt-5.4 in fast mode; do not use gpt-5.4-pro or gpt-5.4-mini unless the user explicitly overrides that policy.
357,764SKILL.mdUpdated Apr 10, 2026
openclaw/openclaw-parallels-smoke
development
VerifiedTrustedCommunity
End-to-end Parallels smoke, upgrade, and rerun workflow for OpenClaw across macOS, Windows, and Linux guests. Use when Codex needs to run, rerun, debug, or interpret VM-based install, onboarding, gateway smoke tests, latest-release-to-main upgrade checks, fresh snapshot retests, or optional Discord roundtrip verification under Parallels.
357,764SKILL.mdUpdated Apr 10, 2026