What files are generated for a new component?

The skill generates a structured directory containing component.html, component.css, a registration script, a cleanup script (beforeDestroy.js), and a preview file.

What is the RNBT architecture used by this skill?

RNBT is an architectural pattern where the page acts as an orchestrator (managing data and intervals) and the components act as independent subscribers to data topics.

How are events handled in these components?

It uses a Weventbus system. Internal UI changes are handled via internal handlers, while events that the page needs to know about are registered via customEvents.

Why is method separation emphasized?

Method separation ensures that rendering logic (like chart configurations) is decoupled from data mapping, allowing the same rendering function to be reused across different data sources.

Does this skill support direct data fetching within components?

No, the skill enforces a core principle where components only subscribe to data. Fetching is managed by the GlobalDataPublisher at the page level to ensure better state control.

Standard UI Component Builder

Name: Standard UI Component Builder
Author: JSKIM-90

byJSKIM-90

デザインツール

Generates standardized UI components using the RNBT architecture and Pub/Sub data patterns.

概要

This skill automates the creation of production-grade UI components following the RNBT (Page-as-Orchestrator) architectural pattern. It enforces a strict separation of concerns where the page manages data orchestration and global state, while components function as independent subscribers focusing on rendering and event emission. By utilizing a standardized file structure and modular method separation, this skill helps developers build highly reusable, maintainable, and event-driven interfaces for complex data-heavy applications.

主な機能

GlobalDataPublisher integration for robust Pub/Sub data management
0 GitHub stars
Automated RNBT component scaffolding including HTML, CSS, and JS scripts
Standardized event-driven communication via Weventbus patterns
Lifecycle management with automated beforeDestroy cleanup scripts
Decoupled rendering logic for maximum UI component reusability

ユースケース

Implementing complex UI interactions through a decoupled event bus system
Building reactive dashboard components that subscribe to global data topics
Developing reusable chart and table modules with standardized rendering interfaces

概要

主な機能

GlobalDataPublisher integration for robust Pub/Sub data management
0 GitHub stars
Automated RNBT component scaffolding including HTML, CSS, and JS scripts
Standardized event-driven communication via Weventbus patterns
Lifecycle management with automated beforeDestroy cleanup scripts
Decoupled rendering logic for maximum UI component reusability

ユースケース

Implementing complex UI interactions through a decoupled event bus system
Building reactive dashboard components that subscribe to global data topics
Developing reusable chart and table modules with standardized rendering interfaces