Files

T

Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization

10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-20 23:52:15 +09:00

4.9 KiB

Raw Blame History

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

title

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)

매 응용

UI mockup reference 를 skill 에 embed.
Diagram-driven instruction (architecture, flow chart).
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

🤖 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

4.9 KiB Raw Blame History