create-standard-component

Generate RNBT components subscribing to GlobalDataPublisher topics with lifecycle teardown.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/wembrndvx/WEB_BUILDER_TOOLKIT --skill create-standard-component
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: create-standard-component
Source: https://github.com/wembrndvx/WEB_BUILDER_TOOLKIT/tree/main/.claude/skills/2-component/create-standard-component
Command: npx skills add https://github.com/wembrndvx/WEB_BUILDER_TOOLKIT --skill create-standard-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes how you build RNBT components so pages can orchestrate data publishing while components remain focused, reusable subscribers.

Core Features & Use Cases

  • Role separation (Page vs Component): Treat the page as the orchestrator (data mappings, refresh intervals, event handlers) and the component as a subscription-only renderer.
  • PUB-SUB integration with GlobalDataPublisher: Define topics-to-method subscriptions so component renders happen from published data.
  • Event-driven UI wiring: Add Weventbus-style custom event bindings (e.g., click and change) that trigger internal component actions without letting the component fetch directly.
  • Lifecycle cleanup scaffolding: Include teardown hooks (e.g., beforeDestroy) to prevent subscription leaks.
  • Enforced safety rules: Prevent direct fetch usage in the component and require correct response destructuring patterns (e.g., function({ response })).

Quick Start

Use this skill to generate a standard RNBT component that subscribes to GlobalDataPublisher topics for rendering while keeping the page responsible for data control.

Frequently Asked Questions about create-standard-component

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

FAQPage Schema
How do I create a pub-sub RNBT component that subscribes to GlobalDataPublisher topics?

To create a pub-sub RNBT component, you generate a subscriber structure that binds topics-to-methods via GlobalDataPublisher, ensuring the component renders from published data without fetching directly.

How does event-driven UI orchestration work for RNBT components?

Event-driven UI orchestration uses Weventbus custom event bindings like click and change to trigger internal component actions, while the page manages data mappings, refresh intervals, and event handler registration.

Why should I prevent direct fetch calls inside my RNBT component?

Preventing direct fetch calls inside an RNBT component enforces role separation, keeping the component focused as a subscription-only renderer while the page orchestrates data control and publishing.

How do I manage lifecycle cleanup to avoid subscription leaks in event-driven components?

You manage lifecycle cleanup by including teardown hooks like beforeDestroy in your component scaffolding, which deterministically removes GlobalDataPublisher subscriptions and prevents memory leaks.

What is the correct response destructuring pattern for GlobalDataPublisher subscriptions?

The correct response destructuring pattern requires a specific function signature, such as function({ response }), to safely extract published data from the GlobalDataPublisher payload.

Can I use this RNBT component generator for pages that need deterministic lifecycle setup and teardown?

Yes, this RNBT component generator applies to scenarios requiring deterministic lifecycle setup and teardown, scaffolding standard pub-sub components with safe event-driven UI interactions.