Setup & Installation
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
Version History
Add version metadata
What This Skill Does
loopwind is a CLI tool that generates images and videos from React JSX templates styled with Tailwind CSS. Templates live in a .loopwind/ directory and render via Satori. It is designed for use with AI coding agents like Claude Code.
Developers write image and video templates in familiar React and Tailwind syntax instead of using graphical editors or low-level canvas APIs.
When to use it
- Generating OG images for blog posts automatically
- Creating animated intro videos for YouTube channels
- Building consistent social media cards across a project
- Rendering branded banners using project color tokens
- Automating image output in CI/CD pipelines
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: Create an OG image for a blog post titled 'TypeScript Tips' with the description 'Practical patterns for everyday use'
- 1Runs `loopwind init` to create .loopwind/loopwind.json with project theme colors
- 2Installs the official image template with `loopwind add image-template`
- 3Creates a JSX template at .loopwind/og-image/template.tsx defining title and description props
- 4Renders the final image with `loopwind render og-image '{"title":"TypeScript Tips","description":"Practical patterns for everyday use"}'`
A 1200x630 PNG file saved in the current directory
Requirements
Accounts, API keys, or tools you or your AI assistant may need to set up while using this skill.