@leejungkiin/awkit 1.7.6 → 1.7.7

package/skills/threejs-textures/SKILL.md

@@ -0,0 +1,83 @@
+---
+name: threejs-textures
+description: "three.js textures: Texture, DataTexture, CubeTexture, CompressedTexture variants, DepthTexture, VideoTexture, CanvasTexture, 3D/array textures, Source; sampling parameters, mipmaps, anisotropy, wrap/mag/min filters; PMREMGenerator in Extras for environment map prefiltering. Use when configuring GPU texture objects and PMREM; for Draco/KTX2 transcoder file paths use threejs-loaders; for material map slots use threejs-materials; for output color pipeline use threejs-renderers."
+---
+
+## When to use this skill
+
+**ALWAYS use this skill when the user mentions:**
+
+- `texture.wrapS` / `wrapT`, `minFilter`, `magFilter`, `generateMipmaps`, `anisotropy`
+- `colorSpace` / correct handling of sRGB vs linear data maps
+- Creating `DataTexture`, `CubeTexture`, compressed GPU formats, video/canvas driven textures
+- `PMREMGenerator` from environment maps for IBL
+
+**IMPORTANT: textures vs loaders**
+
+| Step | Skill |
+|------|--------|
+| Decode file / HTTP | **threejs-loaders** |
+| Configure GPU `Texture` | **threejs-textures** |
+
+**Trigger phrases include:**
+
+- "Texture", "CubeTexture", "PMREM", "colorSpace", "mipmap", "各向异性"
+- "环境贴图", "数据纹理", "压缩纹理"
+
+## How to use this skill
+
+1. **Classify** texture dimensionality and format (2D, cube, depth, compressed, data).
+2. **Color pipeline**: set `colorSpace` appropriately; normal/roughness maps are non-color data.
+3. **Sampling**: choose filters; enable mipmaps when minification occurs; consider max anisotropy.
+4. **PMREM**: feed env map through `PMREMGenerator` per docs; assign result to scene/env/intensity paths as required.
+5. **Video/canvas**: understand update needs each frame for `VideoTexture` / `CanvasTexture`.
+6. **Disposal**: `dispose()` textures when replacing to free GPU memory.
+7. **KTX2/Basis**: transcoder wiring belongs in **threejs-loaders** before this step.
+
+See [examples/workflow-pmrem-env.md](examples/workflow-pmrem-env.md).
+
+## Doc map (official)
+
+| Docs section | Representative links |
+|--------------|----------------------|
+| Textures | https://threejs.org/docs/Texture.html |
+| Cube | https://threejs.org/docs/CubeTexture.html |
+| Data | https://threejs.org/docs/DataTexture.html |
+| PMREM | https://threejs.org/docs/PMREMGenerator.html |
+
+## Scope
+
+- **In scope:** Core Textures + PMREMGenerator; sampling and color pipeline at texture level.
+- **Out of scope:** Loader configuration; post-processing passes that sample buffers (threejs-postprocessing).
+
+## Common pitfalls and best practices
+
+- sRGB albedo in linear workflow without proper colorSpace looks wrong next to renderer output.
+- Non-power-of-two textures have mip/wrap limitations unless padded.
+- Forgetting texture disposal on hot reload leaks VRAM.
+
+## Documentation and version
+
+Texture classes and `PMREMGenerator` are documented under [Textures](https://threejs.org/docs/#Textures) and [PMREMGenerator](https://threejs.org/docs/PMREMGenerator.html) in [three.js docs](https://threejs.org/docs/). Compressed and KTX2 paths often depend on **threejs-loaders** for transcoder setup before this skill applies.
+
+## Agent response checklist
+
+When answering under this skill, prefer responses that:
+
+1. Link `Texture`, `DataTexture`, `CubeTexture`, or `PMREMGenerator` as appropriate.
+2. Tie `colorSpace` / filtering to **threejs-renderers** output and **threejs-materials** maps.
+3. Send Draco/KTX2 **decoder wiring** questions to **threejs-loaders** first.
+4. Emphasize `dispose()` when replacing env maps or large atlases.
+5. Mention [Global](https://threejs.org/docs/#Global) constants only when wrapping/filter enums matter.
+
+## References
+
+- https://threejs.org/docs/#Textures
+- https://threejs.org/docs/Texture.html
+- https://threejs.org/docs/PMREMGenerator.html
+
+## Keywords
+
+**English:** texture, cubemap, pmrem, mipmap, colorspace, compressed texture, data texture, three.js
+
+**中文：** 纹理、立方体贴图、PMREM、mipmap、色彩空间、压缩纹理、three.js

package/skills/threejs-textures/examples/workflow-pmrem-env.md

@@ -0,0 +1,19 @@
+# Workflow: PMREM from an equirectangular texture
+
+## Preconditions
+
+- An equirectangular HDR or suitable env image is already a `Texture` (often via **threejs-loaders**).
+
+## Steps
+
+1. Create `PMREMGenerator(renderer)`.
+
+2. `const envMap = pmremGenerator.fromEquirectangular(equirectTexture).texture;`
+
+3. Assign to scene or materials per your lighting model; intensity via renderer or material properties (**threejs-materials**).
+
+4. `pmremGenerator.dispose()` when done generating; dispose intermediate textures per docs.
+
+5. Dispose `equirectTexture` if no longer needed.
+
+Cross-check current [PMREMGenerator](https://threejs.org/docs/PMREMGenerator.html) for API variants (`fromScene`, etc.).

package/skills/threejs-webxr/SKILL.md

@@ -0,0 +1,104 @@
+---
+name: threejs-webxr
+description: "WebXR integration for three.js: WebXRManager and XRManager on the renderer, session initialization patterns, VRButton and ARButton helpers, XRControllerModelFactory and hand model families, XREstimatedLight, XRPlanes, and related addon Webxr utilities. Use for immersive sessions and controller/hand tracking—not for standard desktop camera projection (threejs-camera) or composer post effects (threejs-postprocessing)."
+---
+
+## When to use this skill
+
+**ALWAYS use this skill when the user mentions:**
+
+- Entering VR/AR, `navigator.xr`, reference spaces, session `requestAnimationFrame` loop via renderer
+- `VRButton`, `ARButton`, `XRButton` creation patterns from examples
+- Controller models, hand tracking meshes, estimated real-world lighting probes
+
+**IMPORTANT: webxr vs renderers vs camera**
+
+| Topic | Skill |
+|-------|--------|
+| Enable XR on renderer, sizing | **threejs-renderers** (basics) + **threejs-webxr** (session) |
+| Desktop projection | **threejs-camera** |
+
+**Trigger phrases include:**
+
+- "WebXR", "VRButton", "ARButton", "XRControllerModelFactory", "hand tracking"
+- "虚拟现实", "增强现实", "沉浸式"
+
+## How to use this skill
+
+1. **HTTPS** requirement and feature detection for XR availability.
+2. **Buttons**: use official button factories to create DOM entry points; handle session end.
+3. **Renderer**: call `renderer.xr.enabled = true` patterns per docs; prefer `setAnimationLoop` for XR loops.
+4. **Controllers**: attach models via factories; read gamepad axes/buttons carefully with fallbacks.
+5. **Hands**: opt-in hand models when runtime supports; performance implications.
+6. **Lighting**: `XREstimatedLight` for AR realism—combine with **threejs-lights** cautiously.
+7. **Exit**: restore non-XR render loop and resize handling on session end.
+
+### Example: VR session with error handling
+
+```javascript
+import { VRButton } from 'three/addons/webxr/VRButton.js';
+
+// Feature detection and session start
+if ('xr' in navigator) {
+  renderer.xr.enabled = true;
+  document.body.appendChild(VRButton.createButton(renderer));
+
+  renderer.xr.addEventListener('sessionstart', () => {
+    console.log('XR session started');
+  });
+  renderer.xr.addEventListener('sessionend', () => {
+    console.log('XR session ended — restoring desktop view');
+  });
+} else {
+  console.warn('WebXR not supported in this browser');
+}
+```
+
+See [examples/workflow-xr-button.md](examples/workflow-xr-button.md).
+
+## Doc map (official)
+
+| Docs section | Representative links |
+|--------------|----------------------|
+| Renderer XR | https://threejs.org/docs/WebXRManager.html |
+| Webxr addons | https://threejs.org/docs/VRButton.html |
+| Webxr addons | https://threejs.org/docs/ARButton.html |
+| Webxr addons | https://threejs.org/docs/XRControllerModelFactory.html |
+
+## Scope
+
+- **In scope:** Documented WebXR manager + listed addons for buttons/controllers/hands/planes.
+- **Out of scope:** Store submission, OpenXR runtime specifics, custom native layers.
+
+## Common pitfalls and best practices
+
+- Desktop testing requires XR emulation or hardware; fail gracefully.
+- Mismatched reference space causes floor offset—validate stage vs local-floor.
+- Heavy post chains may not meet VR frame time—profile aggressively.
+
+## Documentation and version
+
+WebXR entry points span **Addons → Webxr** and renderer [`WebXRManager`](https://threejs.org/docs/WebXRManager.html) in [three.js docs](https://threejs.org/docs/). Browser and device capabilities vary—answers should cite the official example name and three.js version when possible.
+
+## Agent response checklist
+
+When answering under this skill, prefer responses that:
+
+1. Link `WebXRManager`, `VRButton`, `ARButton`, or controller factories as relevant.
+2. Use `setAnimationLoop` patterns with **threejs-renderers** for XR render loops.
+3. Avoid duplicating desktop **threejs-camera** projection advice for XR eyes.
+4. Mention reference space choice (local-floor, etc.) at a high level with docs link.
+5. Flag performance interaction with **threejs-postprocessing** in VR.
+
+## References
+
+- https://threejs.org/docs/WebXRManager.html
+- https://threejs.org/docs/VRButton.html
+- https://threejs.org/docs/ARButton.html
+- https://threejs.org/docs/XRControllerModelFactory.html
+
+## Keywords
+
+**English:** webxr, vr, ar, xr session, controller, hand tracking, three.js
+
+**中文：** WebXR、VR、AR、VRButton、手柄、手部追踪、沉浸式、three.js

package/skills/threejs-webxr/examples/workflow-xr-button.md

@@ -0,0 +1,15 @@
+# Workflow: VR entry button
+
+## Steps
+
+1. Ensure site served over HTTPS and `navigator.xr` checked.
+
+2. `document.body.appendChild(VRButton.createButton(renderer));` per [VRButton](https://threejs.org/docs/VRButton.html) for your three version.
+
+3. `renderer.xr.enabled = true;` Use `renderer.setAnimationLoop` callback for render + updates.
+
+4. Handle session end to restore window `resize` behavior if needed.
+
+5. For AR passthrough use `ARButton` instead—see **threejs-webxr** doc map.
+
+Always verify against the official example that matches your three.js revision.

package/workflows/_uncategorized/goal.md

@@ -0,0 +1,86 @@
+---
+description: 🎯 Codex Goal Conductor — Pursue high-level goals autonomously using Codex coordination
+---
+
+# /goal — Codex Goal Mode Workflow
+
+> Launch Codex in Goal Mode to orchestrate multi-agent task execution and pursue complex goals.
+
+---
+
+## 🛠️ Step-by-Step Execution
+
+### 1. Prerequisites Check
+Ensure Codex CLI is installed on the system:
+```bash
+which codex || echo "NOT_INSTALLED"
+```
+If missing, suggest the user install it:
+```bash
+npm i -g @openai/codex
+```
+
+### 2. Launching the Goal
+Initiate the goal execution loop:
+```bash
+awkit goal "Build a simple greeting command line tool"
+```
+Or execute through a specific pipeline command:
+```bash
+awkit pipeline goal "FeatureName"
+```
+
+### 3. Loop Execution Flow
+1. **Initialize State:** Create directory `codex-reports/goals/<goal_id>/` and output the planned task list.
+2. **Set Goal Mode:** Set `goal_mode = true` globally so that checkpoints automatically verify and bypass user blocks.
+3. **Task Orchestration:** The loop script (`scripts/codex-goal.js`) executes tasks sequentially:
+   - Partition goal → Delegate plan/design to Claude.
+   - Implement code → Delegate implementation to Qwen.
+   - Verification → Run Codex sub-agents (`critic` or `tester`).
+4. **State Persistence:** Save logs and state changes at the end of each step.
+
+---
+
+## 🔔 Sub-commands
+
+### `/goal:status`
+Check the status of the currently active goal and print active task reports:
+```bash
+node scripts/codex-goal.js --status
+```
+
+### `/goal:pause`
+Pause the active goal execution loop and save the current state:
+```bash
+node scripts/codex-goal.js --pause
+```
+
+### `/goal:resume`
+Resume the most recently paused or saved goal session:
+```bash
+node scripts/codex-goal.js --resume
+```
+
+### `/goal:cancel`
+Cancel the active goal session, clean up temporary resources, and reset `goal_mode = false`:
+```bash
+node scripts/codex-goal.js --cancel
+```
+
+---
+
+## 🔔 Sound Notifications
+
+Upon task completion or session completion, trigger sound alerts:
+- Success: `afplay /System/Library/Sounds/Glass.aiff && say "Goal phase completed successfully"`
+- Paused/Blocker: `afplay /System/Library/Sounds/Basso.aiff && say "Goal execution paused. User attention required."`
+
+---
+
+## 🚫 Fallback Policy
+
+- If Codex CLI fails to launch or encounters critical issues:
+  - Fall back to standard **Gemini Conductor** or **Claude Planner** workflows (`scripts/claude-plan.js` or `agy`).
+- If Qwen CLI is not available during execution:
+  - Fall back to `agy --model gemini-3.5-flash` for code generation.
+- Ensure the orchestration script does not crash and logs error outputs gracefully to `codex-reports/goals/error.log`.

package/workflows/ui/generate-gui-assets.md

@@ -0,0 +1,111 @@
+---
+description: 🎨 GUI Assets Workflow — Quy trình tạo bộ icon, nút bấm, HUD, và ghép atlas GUI đồng bộ chất lượng cao
+alwaysApply: false
+category: workflow
+priority: medium
+---
+triggers:
+  - "keywords: generate gui assets, gui icons, app icon set, icon atlas, ui icon pack"
+  - "context: UI assets creation, icon generation, atlas assembly"
+version: 1.0.0
+track:
+  - quick
+  - method
+---
+
+# /generate-gui-assets — GUI Asset Pack Generation Workflow
+
+Quy trình này hướng dẫn cách lập kế hoạch, tạo hàng loạt và hậu kỳ xử lý bộ GUI assets (nút, icon, status badges, HUD...) đồng bộ phong cách trên một canvas/atlas đồng nhất.
+
+---
+
+## 📋 Chuẩn Bị & Chọn Canvas Grid
+
+Trước khi khởi chạy, xác định tổng lượng icon cần tạo để chọn kích thước lưới thích hợp. Lưới đồng nhất giúp AI căn giữa tốt và cho phép cắt ảnh tự động chính xác:
+
+- **8x6** (48 slots): Lượng icon lớn nhất, tối ưu chi phí sau khi style đã được duyệt.
+- **6x6** (36 slots): Canvas vuông, thoáng.
+- **4x4** (16 slots): Lựa chọn ưu tiên chất lượng và độ tách biệt cao.
+- **3x3** (9 slots): Phù hợp chạy thử (Preview) hoặc precision fallback.
+
+Sử dụng tool gợi ý lưới:
+```bash
+python ~/.gemini/antigravity/skills/generate-gui-assets/scripts/suggest_grid_options.py \
+  --icon-count <lượng_icon> \
+  --strategy throughput
+```
+
+---
+
+## ⚡ Các Bước Thực Hiện
+
+### Bước 1: Chạy Thử Tạo Phong Cách (Preview Phase)
+Luôn khởi chạy một pack nhỏ (Preview) để duyệt phong cách hình ảnh trước khi tạo hàng loạt (Bulk):
+```bash
+python ~/.gemini/antigravity/skills/generate-gui-assets/scripts/prepare_gui_asset_run.py \
+  --run-id gui-v1-preview \
+  --output-root "assets/ui/generated" \
+  --phase preview \
+  --style-notes "cozy mobile wellness garden icons, crisp rounded vector style, soft gradient" \
+  --pack "ui_weather_core:3x3:sun,sunCloud,cloud,rain,wind,hot,mild,good,bad"
+```
+
+### Bước 2: Sinh Ảnh Preview & Nhận Phản Hồi
+- Đọc file prompt tại `assets/ui/generated/gui-v1-preview/prompts/`.
+- Thực thi `$imagegen` để tạo ảnh atlas thô. Save ảnh vào `raw/` và ghi nhận provenance.
+- Tạo contact sheet để xem trước và QA:
+```bash
+python ~/.gemini/antigravity/skills/generate-gui-assets/scripts/build_gui_contact_sheet.py \
+  --run-dir "assets/ui/generated/gui-v1-preview"
+```
+*(Trong Goal Mode, bước duyệt này sẽ tự động thông qua).*
+
+### Bước 3: Tạo Hàng Loạt (Bulk Phase)
+Sau khi style được chấp thuận, khóa ngôn ngữ mô tả style lại và khởi chạy bulk run cho các pack còn lại:
+```bash
+python ~/.gemini/antigravity/skills/generate-gui-assets/scripts/prepare_gui_asset_run.py \
+  --run-id gui-v1-bulk \
+  --output-root "assets/ui/generated" \
+  --phase bulk \
+  --style-notes "<approved preview style notes>" \
+  --pack "ui_nav:4x3:home,garden,profile,settings,search,back,next,add,close,alert" \
+  --pack "ui_health:4x3:heart,water,sleep,steps,mood,warning,aid,trend"
+```
+- Chạy sinh ảnh hàng loạt qua `$imagegen` và record kết quả.
+- Xác thực catalog:
+```bash
+python ~/.gemini/antigravity/skills/generate-gui-assets/scripts/validate_gui_catalog.py \
+  --run-dir "assets/ui/generated/gui-v1-bulk"
+```
+
+### Bước 4: Tách Icon & Khử Viền Màu Nền (Edge Cleanup)
+Khi đã crop và phân tách các icon thành file ảnh PNG có alpha channel, chạy công cụ khử viền màu nền (thường là màu hồng `#FF00FF` hoặc xanh lá `#00FF00` được dùng làm chroma-key):
+```bash
+# 1. Chạy dry-run kiểm tra
+python ~/.gemini/antigravity/skills/generate-gui-assets/scripts/clean_chroma_edges.py \
+  "assets/ui/generated/gui-v1-bulk/final/icons" --edge-despill
+
+# 2. Áp dụng làm sạch
+python ~/.gemini/antigravity/skills/generate-gui-assets/scripts/clean_chroma_edges.py \
+  "assets/ui/generated/gui-v1-bulk/final/icons" --edge-despill --apply
+```
+
+### Bước 5: Đưa Vào Dự Án (Promote)
+Sao chép các icon sạch và manifest sang thư mục chính của dự án:
+```bash
+python ~/.gemini/antigravity/skills/generate-gui-assets/scripts/copy_approved_icons.py \
+  --source-dir "assets/ui/generated/gui-v1-bulk/final/icons" \
+  --run-dir "assets/ui/generated/gui-v1-bulk" \
+  --mapping "assets/ui/generated/gui-v1-bulk/catalog.json"
+```
+Đưa các icon đã phân loại vào `assets/ui/icons/` và dọn dẹp các thư mục staging run.
+
+---
+
+## 🔍 QA Checklist
+
+- [ ] Catalog.json hợp lệ và chứa đủ thông tin nguồn gốc.
+- [ ] Không sử dụng shadow rời, glow loang lổ bên ngoài nét vẽ của icon.
+- [ ] Mọi icon căn giữa tốt, không chạm viền cell, không bị cắt cụt.
+- [ ] Nền trong suốt hoàn toàn, không bám viền màu nền cũ khi hiển thị trên cả nền sáng và tối.
+- [ ] Code ứng dụng tham chiếu đúng đường dẫn canonical (`assets/ui/...`), không trỏ tới run staging.

package/workflows/ui/hatch-pet.md

@@ -0,0 +1,116 @@
+---
+description: 🐣 Hatch Pet Workflow — Quy trình tạo và đóng gói Codex Pet động từ ý tưởng hoặc hình ảnh
+alwaysApply: false
+category: workflow
+priority: medium
+---
+triggers:
+  - "keywords: hatch pet, create pet, custom pet, pet spritesheet, animated pet"
+  - "context: pet creation, mascot animation, pet bundle"
+version: 1.0.0
+track:
+  - quick
+  - method
+---
+
+# /hatch-pet — Animated Companion Hatching Workflow
+
+Quy trình này giúp bạn (hoặc AI) tự động hóa việc tạo một Codex Pet động (spritesheet 8x9) từ ý tưởng, ảnh tham chiếu hoặc grounding images.
+
+---
+
+## 📋 Hướng Dẫn Chuẩn Bị
+
+1. **Thông tin cơ bản**:
+   - **Tên Pet** (Name): Chọn tên ngắn gọn (ví dụ: `Dewey`, `BSOD`).
+   - **Mô tả** (Description): Một câu mô tả tính cách.
+   - **Chroma Key**: Màu nền tách (mặc định: `#00FF00` hoặc `#FF00FF`).
+   - **Mẫu Thiết Kế**: Phong cách Vector 2D, nét vẽ viền đen dày, bóng đổ phẳng (Cel-shading).
+
+2. **Folder Chạy Thử**:
+   - Mọi tiến trình chạy sẽ được lưu trữ tại một thư mục tạm thời (staging run), ví dụ: `assets/pets/runs/<pet-name>`.
+
+---
+
+## ⚡ Các Bước Thực Hiện
+
+### Bước 1: Chuẩn Bị Run Folder & Manifest
+Khởi tạo run folder và tạo danh sách các frame cần sinh (base và các trạng thái động như `idle`, `jumping`, `running-right`, `running-left`, `waving`, `failed`, `review`, `sleeping`, `eating`):
+```bash
+python ~/.gemini/antigravity/skills/hatch-pet/scripts/prepare_pet_run.py \
+  --pet-name "<PetName>" \
+  --description "<One sentence description>" \
+  --reference "/path/to/reference.png" \
+  --output-dir "assets/pets/runs/<pet-name>" \
+  --pet-notes "<stability notes>" \
+  --style-notes "smooth vector-2d, digital chibi mascot, bold outline, cel-shading"
+```
+
+### Bước 2: Sinh Ảnh Base (Mẫu)
+AI sẽ sử dụng file prompt được sinh ra tại `assets/pets/runs/<pet-name>/prompts/base.txt` kết hợp công cụ `$imagegen` để tạo ảnh mẫu ban đầu.
+Sau khi ảnh mẫu được sinh, record kết quả:
+```bash
+python ~/.gemini/antigravity/skills/hatch-pet/scripts/record_imagegen_result.py \
+  --run-dir "assets/pets/runs/<pet-name>" \
+  --job-id base \
+  --source "/path/to/generated-base.png"
+```
+
+### Bước 3: Sinh Các Dãy Trạng Thái Động (Row Strips)
+Với mỗi trạng thái động còn lại, AI chạy subagents song song sử dụng hướng dẫn layout guide và file prompt mẫu tương ứng. Sau khi nhận được ảnh strip thô từ subagent:
+```bash
+python ~/.gemini/antigravity/skills/hatch-pet/scripts/record_imagegen_result.py \
+  --run-dir "assets/pets/runs/<pet-name>" \
+  --job-id <state-id> \
+  --source "/path/to/generated-strip.png"
+```
+
+*Mẹo*: Với `running-left`, nếu pet có tính đối xứng cao, có thể tạo nhanh bằng cách lật gương từ `running-right`:
+```bash
+python ~/.gemini/antigravity/skills/hatch-pet/scripts/derive_running_left_from_running_right.py \
+  --run-dir "assets/pets/runs/<pet-name>" \
+  --confirm-appropriate-mirror \
+  --decision-note "Pet is symmetrical and has no text/directional lighting"
+```
+
+### Bước 4: Ghép Ảnh Atlas & Validate
+Sau khi tất cả trạng thái đã được record, tiến hành trích xuất frame nhỏ (`192x208`), ghép thành atlas tổng hợp (`1536x1872`), validate hình học và tạo video preview QA:
+```bash
+python ~/.gemini/antigravity/skills/hatch-pet/scripts/finalize_pet_run.py \
+  --run-dir "assets/pets/runs/<pet-name>"
+```
+
+### Bước 5: Khử Viền Màu Nền (Chroma Edge Despill)
+Nếu ảnh spritesheet xuất hiện viền hồng hoặc xanh lá (fringe) do tách nền tự động, thực hiện chạy công cụ khử viền:
+```bash
+# 1. Chạy dry-run kiểm tra số lượng file
+python ~/.gemini/antigravity/skills/hatch-pet/scripts/clean_chroma_edges.py \
+  "assets/pets/runs/<pet-name>/frames" --edge-despill
+
+# 2. Áp dụng sửa đổi trực tiếp lên các frame
+python ~/.gemini/antigravity/skills/hatch-pet/scripts/clean_chroma_edges.py \
+  "assets/pets/runs/<pet-name>/frames" --edge-despill --apply
+
+# 3. Ghép lại Atlas từ các frame đã làm sạch
+python ~/.gemini/antigravity/skills/hatch-pet/scripts/compose_atlas.py \
+  --frames-root "assets/pets/runs/<pet-name>/frames" \
+  --output "assets/pets/runs/<pet-name>/final/spritesheet.png" \
+  --webp-output "assets/pets/runs/<pet-name>/final/spritesheet.webp"
+```
+
+### Bước 6: Đóng Gói (Package & Promote)
+Chuyển pet đã được kiểm duyệt và làm sạch vào thư mục chính thức của ứng dụng:
+- Sao chép `spritesheet.webp` và `pet.json` sang `assets/pets/<pet-slug>/`
+- Cập nhật file manifest của game/app.
+- Xóa dọn dẹp các thư mục staging run tạm để giữ sạch repository.
+
+---
+
+## 🔍 QA Checklist
+
+- [ ] Spritesheet có kích thước chuẩn `1536x1872`, định dạng WebP/PNG có alpha channel.
+- [ ] Các cell trống trong grid phải hoàn toàn trong suốt.
+- [ ] Nét vẽ, màu sắc, chi tiết của pet đồng nhất trên tất cả 9 hàng trạng thái.
+- [ ] Video preview trong `qa/videos/*.mp4` chạy mượt mà, không bị rung giật hoặc lệch trục.
+- [ ] Không chứa các hiệu ứng lơ lửng, shadow tách rời hay bụi mù xung quanh.
+- [ ] Không có viền màu xanh lá hoặc hồng trên nền tối (test qua contact sheet).