القائمة
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 المهني
| 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 changesRebuild 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.