revamp-demo

What problem does it solve?

This Skill solves the problem of inconsistent, unstructured demo pages for makeup-js modules, which hinder developers from quickly manually testing accessibility features and verifying module behavior without relying on DevTools or source code inspection.

Core Features & Use Cases

• Consistent Demo Structure: Rewrites demo pages to follow a standardized, minimal layout tailored for developer testing, with clear sectioning for each distinct module feature or option.
• Module-Type Aware Patterns: Applies distinct templates for core vanilla JavaScript modules and UI modules that use eBay Skin CSS, including correct Skin package imports for UI demo bundles.
• Visible Event Logging: Adds on-page event logs for custom module events so developers can see state changes and interactions in real time without opening browser DevTools.
• Use Case: For example, if you are developing the makeup-roving-tabindex core module, this Skill will revamp its demo page to include focusable elements before and after the widget for tab trapping tests, add sections for roving tabindex configuration options, and set up an event log to capture tabindex changes as you interact with the page.

Quick Start

Use the revamp-demo skill to rewrite the demo page for the makeup-next-id core module to follow consistent structure and add interactive test sections for its ID generation features.