What is a DOM task in this project?

A DOM task is a specialized custom event used to facilitate communication between different UI components and background services, mediated via a centralized helper.

Which files does this skill primarily interact with?

It primarily manages src/setup/tasks.ts for definitions, while also updating components, pages, and services that dispatch or handle those tasks.

How does this skill ensure type safety?

It prioritizes updating the TaskEventRegistry first, which allows TypeScript to surface mismatches in parameters or return types across dispatchers and handlers.

Can I define conditional parameters for events?

Yes, the skill supports and encourages using discriminated unions in the registry to handle events that require different data based on a 'type' property.

Manage DOM Tasks

Name: Manage DOM Tasks
Author: blikblum

byblikblum

•

Developer Tools

Manages type-safe DOM event communication between frontend components and services using a centralized task registry.

This skill streamlines the process of implementing and maintaining a custom DOM-based event architecture within web projects. It automates the boilerplate involved in extending task registries, updating event dispatchers, and synchronizing task handlers, ensuring rigorous type safety and architectural consistency across the entire codebase. By leveraging centralized definitions in the project's task setup, it allows developers to quickly scale component interactions without losing track of event signatures or breaking existing implementation patterns.

Key Features

01Type-safe event definition with support for discriminated unions

02Streamlined updates for task dispatchers across components and pages

03Synchronization of task handlers and decorators in services

04Project-wide consistency verification using advanced search patterns

051 GitHub stars

06Automated task registry management in src/setup/tasks.ts

Use Cases

01Adding new inter-component communication events with complex parameter structures

02Implementing conditional event logic based on specific task types or return values

03Refactoring existing task signatures and automatically updating all affected call sites

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add blikblum/reatom-ui5-starter manage-dom-tasks

For use in Claude.ai and ChatGPT

Download Skill