Ejecuta cualquier Skill en Manus
con un clic

Ejecuta cualquier Skill en Manus con un clic

prepare-assets

Estrellas0

Forks0

Actualizado29 de marzo de 2026 a las 13:13

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.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Ejecutar en Manus

Fuente

ldmrepo

ldmrepo/iosys-pixel-lab

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ejecutar en Manus

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Desarrolladores de softwareOcupaciones informáticas y matemáticas·SOC 15-1252

Explorador de archivos

2 archivos

SKILL.md

readonly

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 Asset Preparation

이 스킬은 Pixel Office의 픽셀 아트 에셋을 준비한다.

전략

itch.io에서 직접 다운로드는 자동화가 어렵다 (웹 인터페이스 + 결제 플로우). 따라서 프로그래매틱 플레이스홀더 전략을 기본으로 사용하고, 사용자가 수동으로 에셋을 넣을 수 있는 구조를 제공한다.

Step 1: 프로그래매틱 스프라이트 생성기

scripts/generate-sprites.ts 생성:

Canvas API로 각 에이전트별 픽셀 아트 캐릭터를 코드로 생성한다.

캐릭터 디자인 (16x24 크기)

각 에이전트별 색상 팔레트:

Claude (보라/주황): 기본 에이전트 색상
- 머리: #8B5CF6, 몸: #A78BFA, 악센트: #F97316
Codex (녹색): 향후 지원용 예비
- 머리: #22C55E, 몸: #4ADE80, 악센트: #FFFFFF
Gemini (파랑): 향후 지원용 예비
- 머리: #3B82F6, 몸: #60A5FA, 악센트: #FBBF24

애니메이션 프레임

상태별 프레임 수:

idle: 2 프레임 (가만히 + 살짝 숨쉬기)
typing: 4 프레임 (손 올림 → 타이핑 → 반복)
reading: 2 프레임 (책 들고 있기 + 페이지 넘김)
executing: 4 프레임 (활발한 동작)
waiting: 2 프레임 (물음표 말풍선 깜빡)
done: 2 프레임 (체크마크 + 유휴)
error: 2 프레임 (느낌표 깜빡)

스프라이트시트 레이아웃

하나의 PNG에 모든 프레임 배치:

행: 각 상태 (7행)
열: 프레임 (최대 4열)
총 크기: 64 x 168 (16px * 4열 x 24px * 7행)

Step 2: 타일 에셋 생성

scripts/generate-tiles.ts 생성:

오피스 타일셋을 코드로 생성한다:

바닥 타일 (밝은 회색)
벽 타일 (어두운 회색)
책상 타일 (나무색)
의자 타일 (파란색)
장식 타일 (화분 등)

타일 크기: 16x16

Step 3: 오피스 레이아웃 정의

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=의자, .=바닥

Step 4: 에셋 매니페스트 생성

src/shared/asset-manifest.ts 생성:

src/shared/types.ts의 AssetManifest 타입 준수
모든 스프라이트시트/타일시트 URL
프레임 크기, 애니메이션 정보

Step 5: 빌드 스크립트

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 타입 준수
오피스에 최소 8개 워크스테이션 배치
모든 캐릭터 상태에 대한 애니메이션 프레임 정의

Más de este repositorio

mismo repositorio

build-backend

ldmrepo/iosys-pixel-lab

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.

2026-03-290

build-frontend

ldmrepo/iosys-pixel-lab

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.

2026-03-290

build-game-engine

ldmrepo/iosys-pixel-lab

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.

2026-03-290

orchestrate-pixel-office

ldmrepo/iosys-pixel-lab

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.

2026-03-290

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 Asset Preparation

이 스킬은 Pixel Office의 픽셀 아트 에셋을 준비한다.

전략

Step 1: 프로그래매틱 스프라이트 생성기

scripts/generate-sprites.ts 생성:

Canvas API로 각 에이전트별 픽셀 아트 캐릭터를 코드로 생성한다.

캐릭터 디자인 (16x24 크기)

각 에이전트별 색상 팔레트:

Claude (보라/주황): 기본 에이전트 색상
- 머리: #8B5CF6, 몸: #A78BFA, 악센트: #F97316
Codex (녹색): 향후 지원용 예비
- 머리: #22C55E, 몸: #4ADE80, 악센트: #FFFFFF
Gemini (파랑): 향후 지원용 예비
- 머리: #3B82F6, 몸: #60A5FA, 악센트: #FBBF24

애니메이션 프레임

상태별 프레임 수:

idle: 2 프레임 (가만히 + 살짝 숨쉬기)
typing: 4 프레임 (손 올림 → 타이핑 → 반복)
reading: 2 프레임 (책 들고 있기 + 페이지 넘김)
executing: 4 프레임 (활발한 동작)
waiting: 2 프레임 (물음표 말풍선 깜빡)
done: 2 프레임 (체크마크 + 유휴)
error: 2 프레임 (느낌표 깜빡)

스프라이트시트 레이아웃

하나의 PNG에 모든 프레임 배치:

행: 각 상태 (7행)
열: 프레임 (최대 4열)
총 크기: 64 x 168 (16px * 4열 x 24px * 7행)

Step 2: 타일 에셋 생성

scripts/generate-tiles.ts 생성:

오피스 타일셋을 코드로 생성한다:

바닥 타일 (밝은 회색)
벽 타일 (어두운 회색)
책상 타일 (나무색)
의자 타일 (파란색)
장식 타일 (화분 등)

타일 크기: 16x16

Step 3: 오피스 레이아웃 정의

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=의자, .=바닥

Step 4: 에셋 매니페스트 생성

src/shared/asset-manifest.ts 생성:

src/shared/types.ts의 AssetManifest 타입 준수
모든 스프라이트시트/타일시트 URL
프레임 크기, 애니메이션 정보

Step 5: 빌드 스크립트

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 타입 준수
오피스에 최소 8개 워크스테이션 배치
모든 캐릭터 상태에 대한 애니메이션 프레임 정의