skills.rest
gabathanasiou
gabathanasiouCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Screen Management & Navigation

Manage screen lifecycle and navigation with a standardized ScreenManager workflow.

2|Updated Feb 10, 2026
Search Tags:#navigation#lifecycle#frontend-architecture#input-handling#screen-management#screenmanager#ui-modularity
One-click install
npx skills add https://github.com/gabathanasiou/Pokemon-battle-modular --skill screen-management-navigation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Screen Management & Navigation
Source: https://github.com/gabathanasiou/Pokemon-battle-modular/tree/main/.agent/skills/screens
Command: npx skills add https://github.com/gabathanasiou/Pokemon-battle-modular --skill screen-management-navigation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The ScreenManager framework standardizes how full-screen modules are added, navigated, and lifecycle-managed, ensuring consistent state, input handling, and navigation history across the app.

Core Features & Use Cases

  • Lifecycle-driven screen interface: each screen implements onEnter, onExit, onResume, and handleInput to manage transitions and user input.
  • Centralized navigation: ScreenManager.push, pop, replace, and clear enable predictable user flows and history management.
  • Step-by-step integration: create a new screen HTML, register it with the manager, and wire up input modes and visibility mappings.
  • Use Case: Add an informational screen that can be stacked on top of a battle view without disrupting underlying state.

Quick Start

Add a new screen HTML element, register it with ScreenManager, and implement its lifecycle and input handling.

Frequently Asked Questions about Screen Management & Navigation

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

FAQPage Schema
How do I manage screen navigation history in a frontend app?▼

Screen lifecycle management works by implementing a screen interface with onEnter, onExit, onResume, and handleInput callbacks. These hooks manage state transitions, handle user input, and control visibility mappings to ensure consistent behavior.

How do I add a new full-screen module without disrupting existing app state?▼

Centralized navigation handles screen transitions by mapping screens to DOM elements and using push, pop, replace, and clear operations. This ensures predictable user flows and maintains consistent state across the app.

Does the ScreenManager workflow require external dependencies for input handling?▼

To add a full-screen module, create a new HTML element, register it with the ScreenManager, and implement its lifecycle and input handling. This workflow ensures consistent state, input handling, and navigation history across the app.

What is the best way to structure frontend architecture for modular screen lifecycles?▼

The ScreenManager workflow does not require external dependencies. It integrates directly with a global ScreenManager and Input system to handle user interactions through the handleInput interface method.

Can I stack an informational screen over a game view using a centralized navigation system?▼

The best way to structure modular screen lifecycles is implementing a standardized interface with onEnter, onExit, onResume, and handleInput callbacks. This enforces UI modularity and consistent state transitions across the app.

Related Skills

Explore More Software Engineering Skills→
gil00pitagil00pita

web-components

Define and register framework-agnostic web components using Custom Elements and Shadow DOM.

Community
Intermediate
CriezzzCriezzz

menu-navigation-flow

Manage Unity UI navigation with stack-based push, pop, and modal operations.

Community
Intermediate
haitao2016haitao2016

scene-manager

Manage UrhoX game state transitions with NanoVG fade effects.

Community
Intermediate
ingpocingpoc
9

orchestrator

Coordinates agent state transitions across START, INIT, IMPLEMENT, TEST, and COMPLETE.

Community
Advanced