菜单
Downloads and configures MetroCity pixel art assets for the Pixel Office project. Generates programmatic placeholder sprites when external downloads are unavailable. Triggers when asset setup, sprite sheet creation, or tile map definition is needed.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Builds the Pixel Office Node.js backend server with JSONL file watching, Claude Code log parsing, agent state machine, and WebSocket real-time API. Triggers when server-side features need building or modification.
Builds the Pixel Office React frontend that integrates the game engine, WebSocket client, and dashboard UI. Creates the complete user-facing application with agent monitoring panel. Triggers when UI features, layout changes, or frontend integration is needed.
Builds the Pixel Office Canvas 2D game engine with sprite animation, tile map rendering, BFS pathfinding, and character state visualization. Pure Canvas 2D, no external game libraries. Triggers when game engine features need building or modification.
Orchestrates the full Pixel Office build pipeline by dispatching parallel sub-agents, managing shared type contracts, and performing final integration verification. Triggers when user requests building, rebuilding, or modifying the Pixel Office app.
| name | prepare-assets |
| description | Downloads and configures MetroCity pixel art assets for the Pixel Office project. Generates programmatic placeholder sprites when external downloads are unavailable. Triggers when asset setup, sprite sheet creation, or tile map definition is needed. |
이 스킬은 Pixel Office의 픽셀 아트 에셋을 준비한다.
itch.io에서 직접 다운로드는 자동화가 어렵다 (웹 인터페이스 + 결제 플로우). 따라서 프로그래매틱 플레이스홀더 전략을 기본으로 사용하고, 사용자가 수동으로 에셋을 넣을 수 있는 구조를 제공한다.
scripts/generate-sprites.ts 생성:
Canvas API로 각 에이전트별 픽셀 아트 캐릭터를 코드로 생성한다.
각 에이전트별 색상 팔레트:
상태별 프레임 수:
idle: 2 프레임 (가만히 + 살짝 숨쉬기)typing: 4 프레임 (손 올림 → 타이핑 → 반복)reading: 2 프레임 (책 들고 있기 + 페이지 넘김)executing: 4 프레임 (활발한 동작)waiting: 2 프레임 (물음표 말풍선 깜빡)done: 2 프레임 (체크마크 + 유휴)error: 2 프레임 (느낌표 깜빡)하나의 PNG에 모든 프레임 배치:
scripts/generate-tiles.ts 생성:
오피스 타일셋을 코드로 생성한다:
타일 크기: 16x16
src/shared/office-layout.ts 생성:
기본 오피스 (20x15 타일):
WWWWWWWWWWWWWWWWWWWW
W..................W
W.DC..DC..DC..DC..W
W..................W
W..................W
W.DC..DC..DC..DC..W
W..................W
W..................W
W......DDDD.......W
W..................W
W.DC..DC..DC..DC..W
W..................W
W..................W
W..................W
WWWWWWWWWWWWWWWWWWWW
W=벽, D=책상, C=의자, .=바닥
src/shared/asset-manifest.ts 생성:
src/shared/types.ts의 AssetManifest 타입 준수package.json에 스크립트 추가:
{
"scripts": {
"generate:sprites": "npx tsx scripts/generate-sprites.ts",
"generate:tiles": "npx tsx scripts/generate-tiles.ts",
"generate:assets": "npm run generate:sprites && npm run generate:tiles"
}
}
사용자가 MetroCity 에셋을 수동 다운로드한 경우:
public/assets/sprites/ 에 캐릭터 스프라이트시트 배치public/assets/tiles/ 에 타일시트 배치src/shared/asset-manifest.ts 의 URL/프레임 정보 수정public/assets/sprites/claude.png 존재public/assets/tiles/office-tiles.png 존재src/shared/asset-manifest.ts 가 AssetManifest 타입 준수src/shared/office-layout.ts 가 OfficeLayout 타입 준수