---
id: wiki-2026-0508-skybound-skill-image-integration
title: Skybound Skill Image Integration
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Skill Image Pipeline, Claude Skill Visual Assets]
duplicate_of: none
source_trust_level: A
confidence_score: 0.85
verification_status: applied
tags: [claude-skills, image-pipeline, frontend, asset-management]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: TypeScript
  framework: Claude Skills SDK
---

# Skybound Skill Image Integration

## 매 한 줄
> **"매 Skybound skill image integration은 Claude Skill 의 visual asset pipeline"**. Skill 패키지 안에 PNG/SVG 를 bundling 하고 markdown 에서 relative path 로 reference 하면, runtime 이 자동으로 base64 inline 또는 CDN URL 로 resolve. 2026 기준 Claude Skills SDK 의 standard pattern.

## 매 핵심

### 매 Skill 구조
- `skill.md`: instructions + frontmatter
- `assets/`: images, diagrams, icons
- `scripts/`: helper executables (optional)
- `references/`: lazy-loaded docs

### 매 Image resolution
- Markdown `![alt](./assets/foo.png)` → SDK 가 packaging 시 inline data URI 또는 CDN upload
- SVG 우선 (vector, 작은 size)
- PNG 는 raster diagram 에만
- WebP/AVIF 는 아직 unsupported (2026-05)

### 매 응용
1. UI mockup reference 를 skill 에 embed.
2. Diagram-driven instruction (architecture, flow chart).
3. Brand asset bundling (logo, icon set).

## 💻 패턴

### Skill 디렉토리 layout
```
my-skill/
├── SKILL.md
├── assets/
│   ├── flow.svg
│   └── ui-mockup.png
├── scripts/
│   └── validate.ts
└── references/
    └── api-spec.md
```

### SKILL.md frontmatter + image reference
```markdown
---
name: dashboard-builder
description: Build SaaS dashboards from designs.
---

# Dashboard Builder

Reference flow:
![Architecture](./assets/flow.svg)

When user requests a dashboard, follow the layout in:
![Mockup](./assets/ui-mockup.png)
```

### Programmatic asset upload (SDK)
```typescript
import { SkillsClient } from "@anthropic-ai/skills-sdk";

const client = new SkillsClient({ apiKey: process.env.ANTHROPIC_API_KEY! });

await client.skills.create({
  name: "dashboard-builder",
  bundlePath: "./my-skill",  // assets/ auto-uploaded
  imageHandling: "inline",   // or "cdn"
});
```

### Image validation script
```typescript
import { readdirSync, statSync } from "node:fs";
import { join } from "node:path";

const ASSETS = "./assets";
const MAX_BYTES = 500_000;  // 500KB cap per image
const ALLOWED = new Set([".svg", ".png", ".jpg"]);

for (const file of readdirSync(ASSETS)) {
  const ext = file.slice(file.lastIndexOf("."));
  if (!ALLOWED.has(ext)) throw new Error(`Bad ext: ${file}`);
  const { size } = statSync(join(ASSETS, file));
  if (size > MAX_BYTES) throw new Error(`Too large: ${file} (${size}B)`);
}
console.log("매 assets validated");
```

### SVG optimization (svgo)
```typescript
import { optimize } from "svgo";
import { readFileSync, writeFileSync } from "node:fs";

const raw = readFileSync("./assets/flow.svg", "utf-8");
const result = optimize(raw, {
  multipass: true,
  plugins: ["preset-default", "removeDimensions"],
});
writeFileSync("./assets/flow.svg", result.data);
```

### CI image diff (visual regression)
```yaml
# .github/workflows/skill-assets.yml
name: Skill Asset Check
on: [pull_request]
jobs:
  diff:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci && npx tsx scripts/validate-assets.ts
      - uses: reg-viz/reg-actions@v2
        with:
          image-directory-path: skill/assets
```

### Lazy-load reference image
```markdown
<!-- SKILL.md -->
For complex flows, see [architecture details](./references/full-flow.md)
which embeds the high-res diagram.
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| 작은 icon, simple diagram | SVG inline |
| Photo, screenshot | PNG with size cap |
| Animated demo | mp4 link (X embed) |
| 매 large reference asset | CDN, lazy-load |

**기본값**: SVG + inline mode. 매 asset budget per skill 은 2MB.

## 🔗 Graph
- 부모: [[Claude Skills]]

## 🤖 LLM 활용
**언제**: Skill 이 visual context (UI mockup, diagram, brand asset) 를 필요로 할 때. 매 instruction 만으로 표현 어려운 layout.
**언제 X**: Pure text-based skill (linter, formatter). 매 image 가 noise 만 추가하는 경우.

## ❌ 안티패턴
- **Huge PNG**: 5MB hero image embed → context bloat. 매 svgo / squoosh 로 압축.
- **Decorative image**: 매 instruction 에 영향 없는 image embed. Skip.
- **Absolute path**: `/Users/me/...` hardcode → packaging 실패. 매 relative path only.
- **Binary in git**: 매 LFS 또는 release artifact 사용.

## 🧪 검증 / 중복
- Verified (Claude Skills SDK docs, 2026-04).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — Skybound skill image integration full content |