Loopwind
Generate OG images, social cards & videos from JSX templates with Tailwind CSS
What You Can Do
You can design and render image templates (OG images, social cards, thumbnails) and video templates (animated sequences, GIFs) using JSX and Tailwind CSS styling. The skill handles template management via the loopwind CLI, configuration setup, and batch rendering with dynamic props—outputting production-ready PNG, WebP, JPEG, SVG, MP4, and GIF files.
Features
Design OG images, social cards, and custom graphics using JSX + Tailwind CSS with Satori rendering
Build animated videos (MP4, GIF) with frame-by-frame control, duration, and FPS settings
Use full Tailwind utility classes (with known limitations on backdrop filters, 3D transforms, calc()) for responsive design
Pass variables like title, subtitle, colors, and images to templates for reusable designs
Install, list, validate, and render templates via loopwind CLI with format selection
Export as PNG, WebP, JPEG, SVG (images) or MP4, GIF (videos) from a single template
Store global colors, fonts, and design tokens in loopwind.json for consistent branding
Generate multiple image/video variants by passing different prop objects to a single template
Example Output
Example 1: OG Image Render
Input: loopwind render social-card '{"title":"My Blog Post","author":"Sarah"}'
Output: Generated 1200×630px PNG with title and author positioned via Tailwind flex layout
Example 2: Video Template
Input: loopwind render animated-intro '{"message":"Welcome"}
Output: 3-second MP4 at 30fps with fade-in animation applied to message text
Example 3: Multi-format Export
Input: loopwind render thumbnail '{"episode":5}' --format gif
Output: Animated GIF showing episode number with smooth transitions
What's Included
- SKILL.md instruction file: Complete loopwind CLI reference and usage patterns
- Image template scaffold: Ready-to-use JSX template with meta config, prop typing, and Tailwind styling example
- Video template scaffold: Video-specific template with fps, duration, and frame control setup
- CLI cheat sheet: All loopwind commands (init, add, list, render, validate) with common flags
- Design token framework: loopwind.json structure for managing colors, fonts, and global design variables
Who It's For
- Social media managers — Create dynamic social cards and promotional graphics at scale
- Content creators — Generate custom thumbnails, cover images, and video intros
- Marketing teams — Produce OG images and shareable cards for campaigns with dynamic content
- Web developers — Build template-based image/video pipelines for blogs, portfolios, and platforms
- Design engineers — Create reusable component-driven visual assets with code-first design systems
Best For
- Open Graph & social media images — OG tags for blog posts, articles, and web pages
- Dynamic social cards — Shareable graphics with variable content (quotes, stats, names)
- Video thumbnails & cover art — YouTube thumbnails, podcast art, promotional videos
- Animated GIFs & short videos — Social media clips, marketing animations, UI demos
- Batch image generation — Bulk creation of variants (different titles, colors, layouts) from one template
You might also like
You provide a structured JSON slide specification with your finalized copy, layouts, and content blocks. Claude renders each slide as a branded 1080×1350 PNG carousel visual using your template, typography, color system, and design guidelines. This is a pure rendering tool—it doesn't write or edit your copy, only visualizes it at LinkedIn-native dimensions with consistent brand application across all slides.
by tumes
You can rapidly architect professional brand identity systems that extend far beyond logos. This skill helps you develop interconnected visual systems—including color palettes, typography hierarchies, imagery styles, spacing systems, and tone of voice standards—all rooted in strategic brand positioning. You'll generate comprehensive brand guidelines documentation (30-100+ pages) with CMYK/RGB/Pantone specifications, font pairing rationale, application guidelines for specific touchpoints, and detailed design decision rationale for stakeholders and partner agencies.
Generate professionally organized color palettes from theme descriptions, URLs, or hex codes you provide. Claude researches color standards, extracts values, organizes them dark-to-light, and produces interactive SVG reference sheets with copy-to-clipboard functionality and WCAG contrast verification. Use it to build brand guidelines, design system documentation, or quick color references for any project.
by camalus
Stop losing opportunities to Applicant Tracking Systems. You'll strategically inject high-impact keywords, restructure your experience to highlight relevant skills, and format your resume so it passes both machine screening and human scrutiny. Get more interview callbacks by perfectly aligning your resume with what employers are actually looking for.
by tomtev
Generate professional-quality app icons for iOS, Android, and web platforms using your choice of OpenAI or Gemini image generation models. Customize icon dimensions, aspect ratios, visual styles (minimalism, glassy, woven, geometric), and quality settings to match your app's brand identity. Batch-generate multiple icon variations in a single command.
by majiayu000
You can create professional banners across all major platforms—Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website heroes, and print formats. The skill generates multiple art direction options (minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage) with AI-generated visuals and detailed design specifications for each concept, so you get platform-optimized creative assets ready to implement.
