[G1-Sync] Manual knowledge update
This commit is contained in:
Antigravity Agent
@@ -2,118 +2,177 @@
|
||||
id: wiki-2026-0508-skybound-skill-image-integration
|
||||
title: Skybound Skill Image Integration
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: []
|
||||
aliases: [Skill Image Pipeline, Claude Skill Visual Assets]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.92
|
||||
tags: [uncategorized]
|
||||
confidence_score: 0.85
|
||||
verification_status: applied
|
||||
tags: [claude-skills, image-pipeline, frontend, asset-management]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-08
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
tech_stack:
|
||||
language: unspecified
|
||||
framework: unspecified
|
||||
language: TypeScript
|
||||
framework: Claude Skills SDK
|
||||
---
|
||||
|
||||
# [LOG] Skybound Skill Image & Icon Integration
|
||||
# Skybound Skill Image Integration
|
||||
|
||||
- **Timestamp**: 2026-04-23 23:01 (KST)
|
||||
- **Status**: Completed
|
||||
- **Lead**: Steve (Executive Director)
|
||||
## 매 한 줄
|
||||
> **"매 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.
|
||||
|
||||
## 1. 작업 내용 (Task Summary)
|
||||
- **스킬 아이콘 시각화**: `Missile Pod` 및 `Plasma Torpedo` 스킬의 아이콘을 텍스트 이모지에서 실제 경로 기반의 고해상도 이미지(`homing_missile.png`, `homing_missile04.png`)로 전면 교체.
|
||||
- **인게임 투사체 동기화**: 게임 플레이 중 발사되는 해당 무기들의 투사체(Projectile)가 실제 스프라이트로 렌더링되도록 `GameRenderer` 및 무기 시스템 업데이트.
|
||||
- **UI 렌더링 엔진 수정**: `LevelUpModal` 컴포넌트가 이미지 기반 아이콘과 텍스트 기반 아이콘을 모두 처리할 수 있도록 조건부 렌더링 로직 도입.
|
||||
## 매 핵심
|
||||
|
||||
## 2. 작업 이유 (Rationale)
|
||||
- **Visual Consistency**: 유저가 선택 창에서 본 이미지가 전장에서 그대로 구현되는 '시각적 연속성'은 몰입감의 핵심임.
|
||||
- **Insanely Great UX**: 이모지는 프로토타입의 흔적임. 실제 에셋을 통한 'Stitch Fidelity'를 확보하여 제품의 격을 높임.
|
||||
### 매 Skill 구조
|
||||
- `skill.md`: instructions + frontmatter
|
||||
- `assets/`: images, diagrams, icons
|
||||
- `scripts/`: helper executables (optional)
|
||||
- `references/`: lazy-loaded docs
|
||||
|
||||
## 3. 수정된 코드 (Code Changes)
|
||||
- **Config**: `skills.ts` (아이콘 경로 업데이트)
|
||||
- **Assets**: `useGameAssets.ts` (신규 미사일 에셋 로딩 로직 추가)
|
||||
- **UI**: `LevelUpModal.tsx`, `LevelUpModal.css` (이미지 아이콘 지원 및 네온 글로우 스타일링)
|
||||
- **Engine**: `GameRenderer.ts`, `ModularWeaponSystem.ts`, `WeaponBehaviorEngine.ts` (`spriteKey` 메타데이터 연동 및 스프라이트 드로잉 로직 추가)
|
||||
### 매 Image resolution
|
||||
- Markdown `` → SDK 가 packaging 시 inline data URI 또는 CDN upload
|
||||
- SVG 우선 (vector, 작은 size)
|
||||
- PNG 는 raster diagram 에만
|
||||
- WebP/AVIF 는 아직 unsupported (2026-05)
|
||||
|
||||
## 4. 왜 했는가 (Why It Matters)
|
||||
- **Brand Identity**: Skybound만의 독창적인 자산을 전면에 내세움으로써 타 게임과의 차별성을 확보함.
|
||||
- **Technical Scalability**: 향후 모든 스킬 아이콘을 이미지로 교체할 수 있는 확장 가능한 UI 구조를 구축함.
|
||||
### 매 응용
|
||||
1. UI mockup reference 를 skill 에 embed.
|
||||
2. Diagram-driven instruction (architecture, flow chart).
|
||||
3. Brand asset bundling (logo, icon set).
|
||||
|
||||
## 5. 관련 토픽 (Linked Topics)
|
||||
- Skybound: 메카닉 비주얼 아이덴티티 수립.
|
||||
- Design & Experience: 고품질 에셋을 통한 유저 리텐션 강화.
|
||||
- Graphics & Performance: 스프라이트 기반 렌더링 파이프라인 정립.
|
||||
## 💻 패턴
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
### Related Concepts (Auto-Linked)
|
||||
* [[Scalability]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
|
||||
> *(TODO: 한 문장으로 핵심 통찰을 작성. "X는 Y 조건에서 Z 효과를 낸다" 구조 권장.)*
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
|
||||
**추출된 패턴:**
|
||||
> *(TODO)*
|
||||
|
||||
**세부 내용:**
|
||||
- *(TODO)*
|
||||
|
||||
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
|
||||
|
||||
**언제 이 지식을 쓰는가:**
|
||||
- *(TODO)*
|
||||
|
||||
**언제 쓰면 안 되는가:**
|
||||
- *(TODO)*
|
||||
|
||||
## 🧪 검증 상태 (Validation)
|
||||
|
||||
- **정보 상태:** needs_review
|
||||
- **출처 신뢰도:** A
|
||||
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
|
||||
|
||||
## 🧬 중복 검사 (Duplicate Check)
|
||||
|
||||
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
|
||||
- **처리 방식:** UPDATE (자동 정규화)
|
||||
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
|
||||
|
||||
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
|
||||
|
||||
- **과거 데이터와의 충돌:** 없음
|
||||
- **정책 변화:** 없음
|
||||
|
||||
## 🕓 변경 이력 (Changelog)
|
||||
|
||||
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|
||||
|------|-----------|-----------|--------|
|
||||
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
|
||||
|
||||
## 💻 코드 패턴 (Code Patterns)
|
||||
|
||||
**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
|
||||
|
||||
```text
|
||||
# TODO
|
||||
### Skill 디렉토리 layout
|
||||
```
|
||||
my-skill/
|
||||
├── SKILL.md
|
||||
├── assets/
|
||||
│ ├── flow.svg
|
||||
│ └── ui-mockup.png
|
||||
├── scripts/
|
||||
│ └── validate.ts
|
||||
└── references/
|
||||
└── api-spec.md
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준 (Decision Criteria)
|
||||
### SKILL.md frontmatter + image reference
|
||||
```markdown
|
||||
---
|
||||
name: dashboard-builder
|
||||
description: Build SaaS dashboards from designs.
|
||||
---
|
||||
|
||||
**선택 A를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
# Dashboard Builder
|
||||
|
||||
**선택 B를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
Reference flow:
|
||||
|
||||
|
||||
**기본값:**
|
||||
> *(TODO)*
|
||||
When user requests a dashboard, follow the layout in:
|
||||
|
||||
```
|
||||
|
||||
## ❌ 안티패턴 (Anti-Patterns)
|
||||
### Programmatic asset upload (SDK)
|
||||
```typescript
|
||||
import { SkillsClient } from "@anthropic-ai/skills-sdk";
|
||||
|
||||
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
|
||||
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]] · [[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 |
|
||||
|
||||
Reference in New Issue
Block a user