Skills
.Work. You
Rest

create-component-with-popup

Community

Build Shadow DOM popup components that fetch on demand.

Software Engineering#shadow dom#popup component#on-demand fetch#web runtime#datasetinfo#echarts integration#tabulator integration
Authorwembrndvx
Version1.0.0
Installs0

System Documentation

What problem does it solve?

It solves the problem of creating complex UI components that need to open contextual detail popups and load their own data only when the popup is shown, instead of forcing the page to preload everything.

Core Features & Use Cases

  • Shadow DOM Popup Components: Generates a component wired with Shadow DOM popup behavior for isolated rendering.
  • On-demand Data Fetching: Ensures the component fetches data via Wkit.fetchData only when the popup is triggered, using datasetInfo as the fetch definition.
  • Pluggable Visualization Support: Optionally integrates applyEChartsMixin (charts) and applyTabulatorMixin (tables) for rich popup content, including cleanup through destroyPopup().

Quick Start

Use the create-component-with-popup Skill to generate a popup-capable component that includes applyShadowPopupMixin, uses datasetInfo for on-demand fetching, and calls destroyPopup() in the before-destroy lifecycle hook.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: create-component-with-popup
Download link: https://github.com/wembrndvx/WEB_BUILDER_TOOLKIT/archive/main.zip#create-component-with-popup

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.