What output formats are supported?

The skill natively generates high-quality SVG files. For bitmap formats like WebP, it is designed to work in tandem with the svg-to-webp plugin.

Can I customize the colors and look of the headers?

Yes, you can choose from several built-in themes like Midnight, Neon, and Sunset, or provide your own custom theme via a JSON file.

Does this skill require an internet connection or API keys?

No, the SVG Header Image Generator works entirely locally using Node.js and does not require any external API keys or internet access.

Is it possible to change the dimensions for social media?

Yes, you can specify custom width and height using the --width and --height options, making it suitable for anything from square SNS posts to 4K headers.

SVG Header Image Generator

Name: SVG Header Image Generator
Author: haboshi

byhaboshi

0•

デザインツール

Generates professional, template-based SVG header images and eye-catchers directly from titles and subtitles without external APIs.

This skill empowers Claude Code to create high-quality, professional SVG visuals for social media, blogs, and presentations. By utilizing pre-defined themes and rich visual effects like noise textures, glow gradients, and grid patterns, it transforms simple text input into aesthetically pleasing header images. It operates entirely locally without requiring external design APIs, making it a fast and efficient tool for developers and content creators who need instant visual assets for their documentation or promotional materials.

主な機能

010 GitHub stars

02Supports custom JSON theme files for brand-specific styling

03Rich visual effects including noise textures, glow, and corner accents

04Template-based SVG generation for high-resolution, scalable headers

05Zero external dependencies or API keys required for local operation

06Multiple built-in themes spanning technical dark modes to soft glass styles

ユースケース

01Producing professional placeholder or final visual assets for web projects

02Generating social media headers and titles directly from the CLI

03Creating YouTube thumbnails or blog eye-catchers for technical tutorials

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add haboshi/claude-code-skills svg-header-image

For use in Claude.ai and ChatGPT

主な機能

010 GitHub stars

02Supports custom JSON theme files for brand-specific styling

03Rich visual effects including noise textures, glow, and corner accents

04Template-based SVG generation for high-resolution, scalable headers

05Zero external dependencies or API keys required for local operation

06Multiple built-in themes spanning technical dark modes to soft glass styles

ユースケース

01Producing professional placeholder or final visual assets for web projects

02Generating social media headers and titles directly from the CLI

03Creating YouTube thumbnails or blog eye-catchers for technical tutorials

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add haboshi/claude-code-skills svg-header-image

For use in Claude.ai and ChatGPT