메뉴
Create and manage visual assets. Use when creating graphics, icons, or images. Covers asset formats and optimization.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Render a self-contained HTML "tab-bar" presentation from a markdown PRD, Spec, ADR, or implementation Plan. Use when the user asks to "make a presentation", "render slides", "turn this prd/spec/adr/plan into a deck", "present this doc", "export to html", or "show this on screen". INPUT is ONE markdown file (a PRD, Spec, ADR, or Plan). OUTPUT is ONE .html slideshow that opens directly in a browser. Render only — do not invent content.
Design scalable, reliable software systems. Use when planning new systems, major features, or architecture changes. Covers C4 diagrams, trade-off analysis, and system decomposition.
Create execution roadmaps for projects. Use when planning multi-phase projects or feature rollouts. Covers phased delivery and milestone planning.
Create Product Requirements Documents. Use when defining new features, projects, or initiatives. Covers user stories, acceptance criteria, and scope definition.
Apply cloud-native architecture patterns. Use when designing for scalability, resilience, or cloud deployment. Covers microservices, containers, and distributed systems.
Apply Domain-Driven Design patterns. Use when modeling complex business domains, defining bounded contexts, or designing aggregates. Covers entities, value objects, and repositories.
| name | visual-assets |
| description | Create and manage visual assets. Use when creating graphics, icons, or images. Covers asset formats and optimization. |
| allowed-tools | Read, Write, Bash, Glob, Grep |
# WebP conversion
cwebp -q 80 input.png -o output.webp
# AVIF conversion
avifenc input.png output.avif
# PNG optimization
pngquant --quality=65-80 input.png
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description"
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw">
</picture>
# SVGO optimization
svgo input.svg -o output.svg
assets/
├── icons/
│ ├── ui/
│ └── brand/
├── images/
│ ├── originals/
│ └── optimized/
└── illustrations/