combat-ui-pattern-alisted

Implement Split-Panel Combat UI (Pattern A) for SHINOBI WAY game. Use when user wants to create the horizontal confrontation combat layout, character panels, action dock, phase header, VS divider, or any component from the Pattern A combat UI system. Guides through component creation following the established architecture.
aiskillstore/marketplace · ★ 329 · Web & Frontend · score 79

Install: claude install-skill aiskillstore/marketplace

# Combat UI Pattern A - Split-Panel Implementation This skill guides implementation of the Split-Panel Combat UI, transforming the vertical theater mode into a horizontal confrontation layout. ## Architecture Overview ``` ┌───────────────────────────────────────────────────┐ │ TURN INDICATOR │ PHASE PIPELINE │ MODIFIERS │ ← PhaseHeader ├──────────────────┴───────┬───────────┴────────────┤ │ │ │ │ PLAYER PANEL │ ENEMY PANEL │ ← ConfrontationZone │ (CharacterPanel) │ (CharacterPanel) │ │ │ │ ├──────────────────────────┴────────────────────────┤ │ QUICK ACTIONS (SIDE/TOGGLE) │ MAIN ACTIONS │ ← ActionDock └───────────────────────────────┴───────────────────┘ ``` ## Component Hierarchy ``` Combat.tsx (scene orchestrator) ├── CombatLayout.tsx (CSS Grid container) │ ├── PhaseHeader.tsx (top status bar) │ │ ├── TurnIndicator │ │ ├── PhasePipeline │ │ ├── SideActionCounter │ │ └── ApproachModifier │ │ │ ├── ConfrontationZone.tsx (battle area) │ │ ├── CharacterPanel.tsx (player variant) │ │ │ ├── CharacterSprite │ │ │ ├── IdentityBar │ │ │ ├── ResourceBars (HP/CP) │ │ │ └── BuffBar │ │ │ │ │ ├── VSDivider.tsx (center emblem) │ │ │ │ │ └── CharacterPanel.tsx (enemy variant) │ │ ├── CharacterSprite │ │ ├── IdentityBar (name, tier, element) │ │ ├──