2nd/10_Wiki/Topics/Frontend/Skybound_Skill_Image_Integration.md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

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

---
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)

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

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)

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)

# .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

<!-- 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 · Agent Skills SDK
• 변형: Skill Scripts · Skill References
• 응용: Dashboard Generator Skill · Brand Kit Skill
• Adjacent: SVG Optimization · Asset Pipelines

🤖 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