一键导入
battle-scene-sync
MUST invoke after ANY modification to BattleScene.tsx or BattleSceneModules/*. Syncs UI changes to battle-preview.html for visual preview.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
MUST invoke after ANY modification to BattleScene.tsx or BattleSceneModules/*. Syncs UI changes to battle-preview.html for visual preview.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Rebuild the AVG-AdventurerTavern Docker image and push to NyaaDockerHUB private registry. Use this whenever the project needs a Docker rebuild (e.g., after Dockerfile, docker-compose.yml, vite.config.ts, config.ts, or any source change that affects the bundled frontend image). Runs rebuild.py which builds, tags, pushes to private registry, and cleans old tags.
Handles git commit and push workflow with optimized command execution. Invoke when user wants to commit, push, or sync code changes to remote repository.
Writes comprehensive unit tests using multi-agent team mode. Invoke when user needs to create/update tests for modified modules, verify data flow, interfaces, or after code changes.
Efficient code editing workflow with parallel strategies. Invoke when user needs to edit multiple files, refactor code, or perform batch modifications.
Orchestrates multiple agents in parallel for complex analysis and problem solving. Invoke when user presents design requirements or bug reports requiring multi-module analysis.
Guides save/load system design following unified data flow patterns. Invoke when designing new features that need data persistence or save/load functionality.
| name | battle-scene-sync |
| description | MUST invoke after ANY modification to BattleScene.tsx or BattleSceneModules/*. Syncs UI changes to battle-preview.html for visual preview. |
This skill ensures the battle UI preview HTML file stays synchronized with the React component.
Invoke this skill IMMEDIATELY and MANDATORILY when:
components/scenes/BattleScene.tsx is modifiedcomponents/scenes/BattleSceneModules/ is modified (PlayerCards.tsx, EnemyArea.tsx, CommandMenu.tsx, etc.)battle-preview.html| File | Purpose |
|---|---|
components/scenes/BattleScene.tsx | React battle scene component (source of truth) |
components/scenes/BattleSceneModules/*.tsx | Sub-components for battle UI (MUST sync when modified) |
battle-preview.html | Static HTML preview for UI design reference (target) |
When syncing changes, ensure the following are updated in battle-preview.html:
| Tailwind Class | CSS Value |
|---|---|
bg-[#382b26] | Dark brown background |
bg-[#2c241b] | Darker brown background |
bg-[#e8dfd1] | Light cream background |
border-[#9b7a4c] | Gold/brown border |
text-[#f0e6d2] | Light cream text |
text-[#9b7a4c] | Gold text |
| Command | Icon Class |
|---|---|
| Attack | fa-sword |
| Skill | fa-wand-magic-sparkles |
| Item | fa-bag-shopping |
| Guard | fa-shield-halved |
| Escape | fa-person-running |
| Type | Title Color | Icon |
|---|---|---|
| Victory | #059669 (emerald) | fa-trophy |
| Escaped | #0891b2 (cyan) | fa-person-running |
| Defeat | #dc2626 (red) | fa-skull |
After modifying BattleScene.tsx:
battle-preview.html with equivalent changes