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

0•

Herramientas de Diseño

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.

Características Principales

01GlobalDataPublisher integration for robust Pub/Sub data management

020 GitHub stars

03Automated RNBT component scaffolding including HTML, CSS, and JS scripts

04Standardized event-driven communication via Weventbus patterns

05Lifecycle management with automated beforeDestroy cleanup scripts

06Decoupled rendering logic for maximum UI component reusability

Casos de Uso

01Implementing complex UI interactions through a decoupled event bus system

02Building reactive dashboard components that subscribe to global data topics

03Developing reusable chart and table modules with standardized rendering interfaces

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jskim-90/web_builder_toolkit 2-component

For use in Claude.ai and ChatGPT

Download Skill