Content & Media
CMS, document processing, and media generation.
vertex-media-generation
Generate images with Imagen and videos with Veo using the Vercel AI SDK Google Vertex provider. Use when the user wants to generate images, edit images (inpainting, outpainting, background swap), generate videos, or build media generation pipelines with @ai-sdk/google-vertex. Covers Imagen 4.0/3.0 and Veo 3.1/3.0/2.0 models.
refactoring-ui
Professional UI design principles using Tailwind CSS and shadcn/ui. Use this skill when creating web interfaces, React components, HTML layouts, landing pages, dashboards, or any visual UI work. Applies Refactoring UI principles via Tailwind utilities and shadcn components for polished, professional designs. Triggers when building UI components, styling interfaces, creating layouts, designing forms, or when user wants something to look better or more professional.
image-analysis
Analyze images to extract colors, composition, mood, and visual elements using Vision AI. Use when: extracting color palettes from images, analyzing design screenshots, understanding visual style of reference images.
nanobanana
This skill should be used when the user wants to generate, create, make, draw, design, edit, or restore any image or visual content. Trigger phrases include "generate an image", "create an illustration", "make an icon", "draw a diagram", "design a pattern", "edit this photo", "restore a photo", "use nanobanana", "nano banana", "make a thumbnail", "featured image", "visual asset", "graphic", "artwork", "background image", "wallpaper", "texture". Standalone image generation using the Nano Banana MCP server with Gemini image models. No Gemini CLI required.
create-html-embed
Create self-contained D3 HTML embed charts for the research article template. Use when the user asks to create a chart, visualization, embed, D3 chart, line chart, bar chart, scatter plot, sankey diagram, or any data visualization as an HTML embed file.
automatic1111
Feature-rich Stable Diffusion Web UI for image generation. Supports txt2img, img2img, inpainting, outpainting, LoRA, extensions, upscaling, and batch processing. Widely used desktop interface with an extensive extension ecosystem and API access.
canvas-api
Draw 2D graphics with the HTML5 Canvas API — shapes, text, images, gradients, transformations, pixel manipulation, and offscreen rendering. Use when tasks involve generating images server-side (with node-canvas), creating charts, image compositing, watermarking, or browser-based drawing applications.
spec-to-3d
Generate 3D building models from architectural specifications, parsed drawings, or building code data. Outputs Three.js geometry, Pascal Editor JSON, or plain JSON for IFC conversion. Use when: converting floor plans to 3D, building spec-driven 3D models, generating architectural visualizations from structured data.
image-generation
Generates professional AI images using Google Gemini. ALWAYS invoke this skill when building websites, landing pages, slide decks, presentations, or any task needing visual content. Invoke IMMEDIATELY when you detect image needs - don't wait for the user to ask. This skill handles prompt optimization and aspect ratio selection.
beautiful-mermaid-ascii
Render Mermaid diagrams as readable ASCII/Unicode art in the terminal (from .mmd/.mermaid files, stdin, or Markdown ```mermaid fences). Use when installing or using lukilabs/beautiful-mermaid, creating a CLI renderer for Mermaid-to-ASCII output, previewing Mermaid diagrams in terminal, or extracting/rendering Mermaid blocks from Markdown files.
chromajs
Manipulate colors with chroma.js — convert between color spaces (RGB, HSL, LAB, LCH), generate palettes and scales, mix and blend colors, check contrast ratios, and build accessible color systems. Use when tasks involve creating color palettes, theming, accessibility checks, or data visualization color scales.
nano-banana-pro-zh
使用 Nano Banana Pro (Gemini 3 Pro Image) 生成/编辑图像。用于图像创建或修改请求，支持文生图和图生图；支持 1K/2K/4K 分辨率；可使用 --input-image 参数编辑现有图像。
compositing
使用 Remotion 合成最终视频。当需要将片头、录屏、配音、片尾组合成完整视频时使用。包含动画效果、时间线管理、多尺寸模板和故障处理。
imagemagick
You are an expert in ImageMagick, the powerful command-line tool for creating, editing, compositing, and converting images. You help developers automate image processing pipelines using ImageMagick's `convert`, `mogrify`, `composite`, and `identify` commands — batch resizing, format conversion, watermarking, thumbnail generation, PDF manipulation, and complex image compositing for web applications, print production, and data visualization.
cloudinary
Manage images and videos with Cloudinary. Use when a user asks to optimize images, add image transformations, implement responsive images, upload media, or serve optimized assets from a CDN.
svgo
Optimize SVG files with SVGO — remove unnecessary metadata, minify paths, merge shapes, configure plugins, and integrate into build pipelines. Use when tasks involve reducing SVG file size, cleaning up exported SVGs from design tools, building icon systems, or automating SVG optimization in CI/CD.
