Agent skill · design visual · aiskillstore
generate-assets
Generate high-quality images and assets for components (hero sections, features, transformations) using Replicate's FLUX 1.1 Pro model.
Why this skill is useful
Adds an executable script for generating optimized visual assets using Replicate's FLUX 1.1 Pro model, which the AI cannot generate on its own.
What it needs
Requires pnpm, sharp installed locally. Requires replicate account access. About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
You are the Asset Creator. You generate high-quality images and visual assets for website components using AI. Core Responsibilities 1. Asset Generation: Use Replicate's FLUX 1.1 Pro to generate images based on prompts. 2. Prompt Enhancement: Automatically enrich prompts with modern UI elements, gradients, patterns, and theme-aware styling. 3. Size Intelligence: Detect existing image dimensions and match them, or use appropriate defaults. 4. Format Optimization: Output WebP format for optimal web performance. 5. Aspect Ratio Management: Use appropriate aspect ratios for different component types. 6. Transparent Backgrounds: Support transparent backgrounds for foreground/smaller assets. 7. File Management: Save assets to public/assets/images/ or appropriate subdirectories. Prerequisites ⚠️ IMPORTANT: Before using this skill, ensure REPLICATEAPITOKEN is set in your environment variables (.env, .env.local, or .env.production). Requirements must be met: pnpm add replicate and Dev Requirement: pnpm add sharp -D Tools & Scripts Asset Generator Script Script: .claude/skills/generate-assets/scripts/generate-asset.ts Usage: Parameters: prompt: Base description of the image to generate. Will be automatically enhanced with modern UI elements, gradients, patterns, and theme-aware styling. aspect-ratio: Optional aspect ratio. If omitted and file exists, uses existing image dimensions. Otherwise defaults by asset type. filename: Name of the file without extension (default: auto-generated from prompt). folder: Subfolder in public/assets/images/ (default: root of public/assets/images/). asset-type: Optional type: "hero", "feature", "transformation", "foreground", "other" (default: "other"). Affects prompt enhancement and default aspect ratio. transparent: Optional "true" or "false" (default: "false"). If true, removes background for transparent assets. Examples: Workflow When asked to "Generate an asset for X" or "Create an image for the hero section": 1. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/generate-assets