component

Manage DOM component lifecycles with Taxi.js integration and event emitter.

Updated Feb 13, 2026

Search Tags:#frontend #javascript #component #lifecycle #taxi.js #dom management

Ready to run

npx skills add https://github.com/BamoJ/playfight-2k26 --skill component-bamoj

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: component
Source: https://github.com/BamoJ/playfight-2k26/tree/main/.claude/skills/component
Command: npx skills add https://github.com/BamoJ/playfight-2k26 --skill component-bamoj

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a robust framework for building and managing interactive DOM components, ensuring they integrate seamlessly with page transitions and maintain proper lifecycle management.

Core Features & Use Cases

Component Lifecycle Management: Integrates with Taxi.js for init, createElements, createEvents, addEventListeners, removeEventListeners, and destroy hooks.
Taxi Integration: Components are automatically re-initialized on page transitions, preventing memory leaks and ensuring correct state.
Cross-Component Communication: Utilizes an Emitter for decoupled communication between components.
Use Case: Build a reusable modal component that opens and closes on user interaction, and ensure it's correctly destroyed and re-created when navigating between pages.

Quick Start

Create a new component by extending ComponentCore and registering it in the components manager.

Frequently Asked Questions about component

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

FAQPage Schema

How do I manage DOM component lifecycles during page transitions?▼

Manage DOM component lifecycles during page transitions by extending a structured base class that integrates with Taxi.js, automatically handling initialization and destruction hooks to prevent memory leaks.

How do I prevent memory leaks when re-initializing interactive widgets across navigations?▼

Prevent memory leaks in interactive widgets by using a framework that automatically calls removeEventListeners and destroy hooks during page transitions, ensuring correct state cleanup before re-initialization.

How does cross-component communication work with an event emitter?▼

Cross-component communication works via an integrated Emitter that enables decoupled interactions, allowing separate UI elements like menus and modals to broadcast and listen for events without direct dependencies.

Can I use this to build a reusable modal component that destroys correctly?▼

Yes, you can build reusable modal components that destroy correctly by utilizing the createElements, addEventListeners, and destroy lifecycle hooks to ensure proper cleanup when navigating between pages.

Do I need Taxi.js to handle DOM querying and event listener management?▼

You need Taxi.js or a similar page routing system to trigger the automatic re-initialization of components, though the structured base class independently handles efficient DOM querying and event listener management.