Agent skill · software engineering · aiskillstore
combat-ui-pattern-a
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.
Why this skill is useful
Provides specific implementation patterns and component structures for the Split-Panel Combat UI in a game context, which the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 Component Hierarchy File Structure Implementation Workflow Step 1: Identify Target Component Ask user which component to implement: 1. CombatLayout - Start here for new implementation 2. PhaseHeader - Top status bar 3. ConfrontationZone - Battle area with both panels 4. CharacterPanel - Individual character display 5. VSDivider - Center emblem and effects 6. ActionDock - Bottom skill bar 7. QuickActionCard - Compact skill card variant 8. MainActionCard - Large skill card variant Step 2: Load Component Reference Based on selection, load the appropriate reference: Layout/Structure: See layout-specs.md Component Props: See component-interfaces.md Styling Guide: See styling-tokens.md Animation Specs: See animations.md Step 3: Generate Component Code Follow the component template pattern: Step 4: Wire to Combat.tsx After component creation: 1. Export from components/combat/index.ts 2. Import in Combat.tsx 3. Replace corresponding section 4. Pass required props from existing state Quick Implementation Commands Create All Files (Scaffolding) Barrel Export Template Props Mapping from Existing Code From App.tsx → Combat.tsx (unchanged) Combat.tsx → New Components Migration Strategy Phase 1: Layout Foundation 1. Create CombatLayout.tsx with CSS Grid 2. Create placeholder components 3. Add feature flag in Combat.tsx Phase 2: Component Extraction 4. Implement CharacterPanel (extract from PlayerHUD + CinematicViewscreen) 5. Implement ActionDock (extract from skill grids) 6. Implement PhaseHeader (extract from inline indicators) Phase 3: Visual Polish 7. Add VSDivider with effects 8. Implement animations 9. Adjust floating text positions Phase 4: Cleanup 10. Remove old theater mode code 11. Remove feature flag 12. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/combat-ui-pattern-a