add-frontend-component

Wire new UI overlays into the engine-driven React game flow.

212|148|Updated Mar 10, 2026
One-click install
npx skills add https://github.com/phase-rs/phase --skill add-frontend-component
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: add-frontend-component
Source: https://github.com/phase-rs/phase/tree/main/.claude/skills/add-frontend-component
Command: npx skills add https://github.com/phase-rs/phase --skill add-frontend-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend developers need a standardized way to wire new UI overlays into the engine-driven game flow, ensuring overlays receive proper data and dispatch actions.

Core Features & Use Cases

  • Architectural guidance for integrating overlays (CardChoiceModal, TargetingOverlay, ReplacementModal) with the engine -> adapter -> stores path.
  • Enforcement of CR-correct frontend behavior: overlays render only engine-provided state and avoid client-side data derivation.
  • Practical patterns for reusable components, routing in GamePage, and gating overlays by playerId in multiplayer.

Quick Start

Integrate a new overlay by following the documented pattern and wiring it into GamePage waitingFor routing

Frequently Asked Questions about add-frontend-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I wire new UI overlays into a React game engine frontend?

To wire UI overlays into a React game engine frontend, you route them through the engine to adapter to stores path, ensuring components render strictly from engine-provided state and dispatch actions correctly.

What's the best way to gate UI overlays by playerId in multiplayer sessions?

Gating UI overlays by playerId in multiplayer sessions requires routing the WaitingFor data shape through GamePage, ensuring overlays only render for the correct player based on strict game state derivation from the engine.

How do I add a card choice modal to a React TypeScript game frontend?

Adding a card choice modal to a React TypeScript game frontend involves integrating the overlay component with the engine-driven action flow, following documented patterns to ensure it receives proper WaitingFor data and avoids client-side data derivation.

Why do my frontend overlays show inconsistent game state in multiplayer?

Frontend overlays show inconsistent game state in multiplayer when components perform client-side data derivation instead of strictly rendering engine-provided state and adhering to exact WaitingFor data shapes.

Can I use custom modals with engine-driven game state derivation?

Yes, you can use custom modals with engine-driven game state derivation by applying reusable component patterns that route through the adapter and stores, ensuring overlays dispatch actions without local state mutation.

Do I need aWaitingFor data shape to render targeting overlays in React?

Yes, you need a WaitingFor data shape to render targeting overlays in React, as it provides the exact structure required to gate rendering by playerId and ensure the overlay displays correct engine-derived state.