Blog Cover Generator Skill for Cursor

Use when the user asks to generate a blog cover image, thumbnail, or article header. Automatically uses modern typography, brand logos, and Google Search grounding to create beautiful 16:9 images with Gemini 3.1 Flash Image Preview.

3k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

569

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/Varnan-Tech/opendirectory --skill blog-cover-generator

The instruction itself

7 sections, as written by the author

Blog Cover Generator Skill

This skill provides AI agents with the ability to generate stunning, minimalist, technical blog cover images using the blog-cover-image-cli. The CLI leverages Gemini 3.1 Flash Image Preview, automatically fetches brand logos from domains, uses local aesthetic reference images, and employs Google Search grounding to inject real-time context.

Setup & Configuration

Agent Pre-requisites:

Before using this tool, verify it is installed. If blog-cover-cli --help fails, install it globally:

npm install -g blog-cover-image-cli

If the user wants you to generate an image and you haven't set up the API key yet, you must first configure the CLI using a Gemini API Key. The CLI stores this securely via the conf package.

# 1. Set your Gemini API Key (Required for image generation)
npx -p blog-cover-image-cli blog-cover-cli config set-key <YOUR_GEMINI_API_KEY>

# 2. Set your Brandfetch Client ID (Required to fetch high-res logos)
npx -p blog-cover-image-cli blog-cover-cli config set-brandfetch-id <YOUR_BRANDFETCH_CLIENT_ID>

# Check your keys (masked)
npx -p blog-cover-image-cli blog-cover-cli config get-key
npx -p blog-cover-image-cli blog-cover-cli config get-brandfetch-id

Usage: Generating an Image

When a user asks for a cover image (e.g., "Create a cover image for my blog about Vercel v0"), you should use the generate command.

npx -p blog-cover-image-cli blog-cover-cli generate -t "The Title of the Blog Post" -l "example.com"

Arguments

-t, --title <text>: (Required) The title text to display on the cover image. Do not use excessively long titles (keep it under 3 lines of text visually).
-l, --logo <domain>: (Optional but recommended) The domain to fetch the brand logo from (e.g., vercel.com, google.com, cursor.com). The CLI automatically converts WebP/SVG/AVIF to PNG for compatibility.
-o, --output <path>: (Optional) The file path where the generated image will be saved. If omitted, the CLI automatically saves it to an output/ directory in the current working folder (e.g., ./output/vercel-cover.png).

Examples

Example 1: Cursor

npx -p blog-cover-image-cli blog-cover-cli generate -t "Why Cursor is the Ultimate AI Code Editor" -l "cursor.com"

Example 2: Lovable

npx -p blog-cover-image-cli blog-cover-cli generate -t "Building Apps in Minutes with Lovable" -l "lovable.dev"

Example 3: Custom Output Path

npx -p blog-cover-image-cli blog-cover-cli generate -t "Mastering React in 2026" -l "reactjs.org" -o "./assets/react-cover.png"

How It Works Under the Hood

As an agent, you should know what the CLI is doing so you can inform the user:

Logo Fetching: It fetches logos from Brandfetch and processes them via sharp.
References: It loads curated reference images from its examples/ directory to ensure the output is always a clean, minimalist white background with bold typography.
Grounding: It has googleSearch tools enabled, meaning if the title relates to a recent event, Gemini can look it up before generating the image.
Text Enforcement: It forces Gemini to output the exact title string using typographic placement rules.

Edge Cases / Troubleshooting

No API Key Error: If you see an API key error, run the config set-key command.
Logo Fetch Warning: If the CLI says Warning: Could not fetch logo, it will still generate the image but without the logo. You do not need to crash or stop.
Strict Modality Limits: Because it uses Gemini's experimental image models, generation may occasionally fail due to strict safety filters. If this happens, notify the user.

Other skills for the same job

different authors, same section of the catalogue

Legacy Circuit Mockups

by github

vendor ×1

Generate breadboard circuit mockups and visual diagrams using HTML5 Canvas drawing techniques. Use when asked to create circuit layouts, visualize electronic component placements, draw breadboard diagrams, mockup 6502 builds, generate retro computer schematics, or design vintage electronics projects. Supports 555 timers, W65C02S microprocessors, 28C256 EEPROMs, W65C22 VIA chips, 7400-series logic gates, LEDs, resistors, capacitors, switches, buttons, crystals, and wires.

37k tokens

Hyperframes Keyframes

by aiskillstore

×1

> Use when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.

Analyze images, websites, and Figma files to extract their design and generate a `design.md` with token system, component inventory, and reconstruction notes. Use this skill whenever the user wants to understand, document, replicate, or audit the design of something visual: a screenshot, a URL, a Figma link, a Pinterest reference, a mockup, a competitor's site, a component, a dashboard, a landing page. Also when they ask 'extract the design system from X', 'document the style of Y', 'analyze this visually', 'convert this image into tokens', 'help me replicate this design', 'what palette does this site use', 'how is this built'. Also for single elements: 'copy this navbar', 'recreate this illustration', 'give me a prompt to regenerate this graphic' — element mode outputs a focused element.md, with token-grounded image-model prompts when the element is visual art. If the user brings any visual source and wants to understand it at a design level — this skill should activate.

Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.

4k tokens

Imagegen Frontend Mobile

by lornshrimp

×1

Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.

10k tokens

Perf Web Optimization

by christophacham

×1

Optimize web performance: bundle size, images, caching, lazy loading, and overall page speed. Use when site is slow, reducing bundle size, fixing layout shifts, improving Time to Interactive, or optimizing for Lighthouse scores. Triggers on: web performance, bundle size, page speed, slow site, lazy loading. Do NOT use for Core Web Vitals-specific fixes (use core-web-vitals), running Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro).

4k tokens

Brandkit

by nexu-io

| Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.

4k tokens

Gsap Performance

by nexu-io

| Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.

1k tokens

How to use it

Copy the folder

Take varnan-tech/blog-cover-generator from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.

Install what it needs

The instructions reference npm, npx. Without those the skill loads but fails at the first command.