菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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.
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.
| name | build-backend |
| description | 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. |
이 스킬은 Pixel Office의 백엔드 서버를 구축한다.
src/server/session-discovery.ts)Claude Code 세션을 자동으로 찾는다:
탐색 경로: ~/.claude/projects/
구조:
~/.claude/projects/{hash}/
├── .session.json
└── sessions/
└── {session-id}.jsonl
~/.claude/projects/ 스캔sessions/ 탐색.jsonl 파일 수집{ sessionId, projectPath, jsonlPath, lastModified }src/server/watcher.ts)chokidar를 사용한 실시간 파일 감시:
change 이벤트 감시parser에 전달src/server/parser.ts)JSONL 줄 → AgentEvent 변환:
// assistant 메시지
{"type":"assistant","message":{"content":[{"type":"text","text":"..."}]},"timestamp":"2026-03-29T..."}
// tool 사용
{"type":"tool_use","name":"Read","input":{"file_path":"..."},"timestamp":"..."}
{"type":"tool_use","name":"Write","input":{"file_path":"...","content":"..."},"timestamp":"..."}
{"type":"tool_use","name":"Bash","input":{"command":"..."},"timestamp":"..."}
// tool 결과
{"type":"tool_result","content":"...","timestamp":"..."}
// user 메시지
{"type":"user","message":{"content":"..."},"timestamp":"..."}
type 필드로 이벤트 종류 판별AgentEvent 객체 생성:
timestamp: ISO → epoch ms 변환sessionId: 파일명에서 추출type: 원본 type 유지content: tool 이름 또는 텍스트 요약 (최대 100자)src/server/state-machine.ts)AgentEvent → AgentStatus 변환:
| 이벤트 | → 상태 |
|---|---|
tool_use name=Write/Edit | typing |
tool_use name=Read/Glob/Grep | reading |
tool_use name=Bash | executing |
tool_use name=Agent | executing |
assistant 텍스트 응답 | typing |
user 메시지 수신 | 이전 상태 유지 (user가 응답했으므로) |
| 마지막 이벤트가 assistant이고 30초+ 무활동 | waiting |
| 60초+ 무활동 | idle |
| 세션 파일 5분+ 미변경 | done |
Claude-{프로젝트명약어}-{번호}Claude-pixel-1, Claude-api-2OfficeLayout.seats 에서 assignedAgentId가 없는 좌석 선택src/server/index.ts)Express + ws 조합:
GET /api/agents — 현재 에이전트 목록 (REST)GET /api/health — 서버 상태ws://localhost:3333/ws — WebSocket 실시간 스트림// 연결 시 전체 상태 전송
{ "type": "agent-update", "payload": [AgentState, ...] }
// 개별 에이전트 상태 변경
{ "type": "agent-update", "payload": AgentState }
// 새 에이전트 감지
{ "type": "agent-added", "payload": AgentState }
// 에이전트 세션 종료
{ "type": "agent-removed", "payload": AgentState }
PIXEL_OFFICE_PORT~/.claude/projects/ 없어도 서버가 정상 시작 (빈 목록)src/shared/types.ts 타입 엄격 준수