메뉴
Right format, right size, right quality — plus AI image generation via Replicate
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Defense-in-depth, PII protection, secrets scanning, and secure packaging for distributed software
Systematic testing for confidence without over-testing — the right test at the right level
Generate consistent visual character references across multiple scenarios using Flux and nano-banana-pro on Replicate
Create professional ultra-wide cinematic banners for GitHub READMEs using Flux and Ideogram models with typography options
Generate professional presentations using the Gamma API with expert storytelling consulting based on Duarte methodology.
Intelligent project persona identification using priority chain detection with LLM and heuristic fallback
| name | Image Handling Skill |
| description | Right format, right size, right quality — plus AI image generation via Replicate |
| applyTo | **/*.png,**/*.jpg,**/*.jpeg,**/*.webp,**/*.svg,**/*.ico,**/*image*,**/*banner*,**/*icon*,**/*avatar*,**/*photo* |
| triggers | ["convert svg","convert png","convert to png","convert to jpg","convert logo","logo to png","svg to png","png to jpg","image conversion","resize image","optimize image","banner","screenshot","rasterize","make png","export as png","export png","marketplace logo","marketplace icon","favicon","sharp-cli","generate image","create image","make image","replicate","flux","ai image","edit image","transform image","upscale","enhance image"] |
Right format, right size, right quality.
| Format | Best For | Supports |
|---|---|---|
| SVG | Icons, logos, diagrams | Infinite scale, animation |
| PNG | Screenshots, transparency | Lossless, alpha channel |
| JPEG | Photos, gradients | Small size, no transparency |
| WebP | Web images | Best compression, both |
| ICO | Favicons | Multi-resolution |
# SVG to PNG using sharp-cli (recommended)
# --density sets DPI for vector rendering (150 = crisp text)
npx sharp-cli -i input.svg -o output-folder/ --density 150 -f png
# Note: output must be a directory, filename preserved from input
npx sharp-cli -i banner.svg -o assets/ --density 150 -f png
# Creates: assets/banner.png
# ImageMagick (if installed)
magick input.svg -resize 512x512 output.png
magick input.png -quality 85 output.jpg
# Multiple sizes
foreach ($size in 16,32,64,128,256,512) {
magick input.svg -resize ${size}x${size} "icon-$size.png"
}
--density 150+ for crisp text rendering<!-- Absolute URL (always works) -->
<!-- Relative (works in repo) -->
<!-- With dark/light variants -->
<picture>
<source media="(prefers-color-scheme: dark)" srcset="banner-dark.svg">
<img src="banner-light.svg" alt="Banner">
</picture>
| Use Case | Max Size | Recommended |
|---|---|---|
| README banner | 500KB | < 100KB |
| Documentation | 200KB | < 50KB |
| Icons | 50KB | < 10KB |
| Favicon | 10KB | < 5KB |
# PNG optimization
pngquant --quality=65-80 input.png -o output.png
# JPEG optimization
jpegoptim --max=85 input.jpg
# SVG optimization
npx svgo input.svg -o output.svg
# Convert all SVGs to PNGs
Get-ChildItem *.svg | ForEach-Object {
$out = $_.BaseName + ".png"
magick $_.Name -resize 256x256 $out
}
See synapses.json for connections.