Agent skill

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.

View SKILL.md on GitHub Repository
Stars 232
Forks 15

Install this agent skill to your Project

npx add-skill https://github.com/aiskillstore/marketplace/tree/main/skills/cesaraugustusgrob/combat-ui-pattern-a

SKILL.md

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)
│   │       ├── HealthBar
│   │       ├── DefenseStats
│   │       └── BuffBar
│   │
│   └── ActionDock.tsx (skill bar)
│       ├── QuickActionsSection
│       │   ├── QuickActionCard (SIDE skills)
│       │   └── QuickActionCard (TOGGLE skills)
│       ├── MainActionsSection
│       │   └── MainActionCard (MAIN skills)
│       └── ControlButtons (Auto, End Turn)
│
└── FloatingTextLayer (z-50, unchanged)

File Structure

src/components/combat/
├── index.ts                  # Barrel exports
├── CombatLayout.tsx          # Grid container
├── PhaseHeader.tsx           # Top status bar
├── ConfrontationZone.tsx     # Player vs Enemy area
├── CharacterPanel.tsx        # Reusable character display
├── VSDivider.tsx             # Center VS emblem
├── ActionDock.tsx            # Bottom skill bar
├── QuickActionCard.tsx       # Compact SIDE/TOGGLE card
└── MainActionCard.tsx        # Large MAIN skill card

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:

typescript
import React from 'react';
import { cn } from '@/lib/utils'; // if using cn utility

interface ComponentNameProps {
  // Props from component-interfaces.md
}

export const ComponentName: React.FC<ComponentNameProps> = ({
  // destructured props
}) => {
  return (
    <div className={cn(
      // Base styles from styling-tokens.md
      // Conditional styles
    )}>
      {/* Component content */}
    </div>
  );
};

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)

bash
# Create directory
mkdir -p src/components/combat

# Create all component files
touch src/components/combat/{index,CombatLayout,PhaseHeader,ConfrontationZone,CharacterPanel,VSDivider,ActionDock,QuickActionCard,MainActionCard}.tsx

Barrel Export Template

typescript
// src/components/combat/index.ts
export { CombatLayout } from './CombatLayout';
export { PhaseHeader } from './PhaseHeader';
export { ConfrontationZone } from './ConfrontationZone';
export { CharacterPanel } from './CharacterPanel';
export { VSDivider } from './VSDivider';
export { ActionDock } from './ActionDock';
export { QuickActionCard } from './QuickActionCard';
export { MainActionCard } from './MainActionCard';

Props Mapping from Existing Code

From App.tsx → Combat.tsx (unchanged)

typescript
player: Player
enemy: Enemy
turnState: 'PLAYER' | 'ENEMY_TURN'
turnPhase: TurnPhaseState
combatState: CombatState
onUseSkill: (skill: Skill) => void
onPassTurn: () => void
onToggleAutoCombat: () => void
autoCombatEnabled: boolean

Combat.tsx → New Components

typescript
// PhaseHeader
turnState, turnPhase, combatState.approach

// ConfrontationZone
player, enemy, playerStats, enemyStats

// CharacterPanel (player)
character: player, stats: playerStats, variant: 'player'

// CharacterPanel (enemy)
character: enemy, stats: enemyStats, variant: 'enemy'

// ActionDock
skills: player.skills, turnPhase, onUseSkill, onPassTurn

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

  1. Implement CharacterPanel (extract from PlayerHUD + CinematicViewscreen)
  2. Implement ActionDock (extract from skill grids)
  3. Implement PhaseHeader (extract from inline indicators)

Phase 3: Visual Polish

  1. Add VSDivider with effects
  2. Implement animations
  3. Adjust floating text positions

Phase 4: Cleanup

  1. Remove old theater mode code
  2. Remove feature flag
  3. Update tests

Reference Files

  • layout-specs.md - CSS Grid structure, responsive breakpoints
  • component-interfaces.md - TypeScript interfaces for all components
  • styling-tokens.md - Colors, spacing, typography tokens
  • animations.md - Animation keyframes and transitions

Output Format

Generate TypeScript React components with:

  1. TypeScript interface for props
  2. Tailwind CSS for styling (matching existing codebase)
  3. Responsive classes (mobile fallback to vertical)
  4. Memoization where appropriate (React.memo for cards)
  5. Accessibility attributes (aria-labels, roles)

Existing Code References

When implementing, reference these existing files:

New Component Reference From
CharacterPanel (player) src/components/PlayerHUD.tsx
CharacterPanel (enemy) src/scenes/Combat.tsx lines 113-305
ActionDock src/scenes/Combat.tsx lines 308-607
QuickActionCard src/components/SkillCard.tsx
MainActionCard src/components/SkillCard.tsx
PhaseHeader src/scenes/Combat.tsx lines 311-328

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

aiskillstore/marketplace

perigon-backend

Perigon ASP.NET Core + EF Core + Aspire conventions

232 15
Explore
aiskillstore/marketplace

perigon-agent

Pointers for Copilot/agents to apply Perigon conventions

232 15
Explore
aiskillstore/marketplace

perigon-angular

Angular 21+ standalone/Material/signal conventions for Perigon WebApp

232 15
Explore
aiskillstore/marketplace

fastapi-mastery

Comprehensive FastAPI development skill covering REST API creation, routing, request/response handling, validation, authentication, database integration, middleware, and deployment. Use when working with FastAPI projects, building APIs, implementing CRUD operations, setting up authentication/authorization, integrating databases (SQL/NoSQL), adding middleware, handling WebSockets, or deploying FastAPI applications. Triggered by requests involving .py files with FastAPI code, API endpoint creation, Pydantic models, or FastAPI-specific features.

232 15
Explore
aiskillstore/marketplace

context7-efficient

Token-efficient library documentation fetcher using Context7 MCP with 86.8% token savings through intelligent shell pipeline filtering. Fetches code examples, API references, and best practices for JavaScript, Python, Go, Rust, and other libraries. Use when users ask about library documentation, need code examples, want API usage patterns, are learning a new framework, need syntax reference, or troubleshooting with library-specific information. Triggers include questions like "Show me React hooks", "How do I use Prisma", "What's the Next.js routing syntax", or any request for library/framework documentation.

232 15
Explore
aiskillstore/marketplace

browser-use

Browser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction.

232 15
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results