skills.rest
makeup
makeupOFFICIAL
Explore all skills by this author →
GitHub

revamp-demo

Revamp makeup-js demo pages with sectioned feature tests and event logging.

47|14|Updated Jan 8, 2020
Search Tags:#frontend development#webpack#accessibility testing#makeup-js#demo revamp#ui modules#core modules
One-click install
npx skills add https://github.com/makeup/makeup-js --skill revamp-demo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: revamp-demo
Source: https://github.com/makeup/makeup-js/tree/main/.claude/skills/revamp-demo
Command: npx skills add https://github.com/makeup/makeup-js --skill revamp-demo

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about revamp-demo

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

FAQPage Schema
How do I create consistent demo pages for makeup-js accessibility modules?▼

Standardized demo pages for makeup-js accessibility modules use a minimal layout with sectioned feature tests, visible on-page event logging, and correct webpack build configuration for compiled assets to streamline developer manual testing workflows.

What's the best way to add visible event logs to a makeup-js module demo?▼

The best way to add visible event logs to a makeup-js module demo is to implement on-page event logging that captures custom module events, allowing developers to see state changes and interactions in real time without opening browser DevTools.

How do I configure webpack for makeup-js UI widget demo bundles?▼

To configure webpack for makeup-js UI widget demo bundles, apply module-type aware patterns that include correct eBay Skin CSS package imports, ensuring compiled assets are built correctly for UI modules styled with Skin.

Does the demo revamp approach differ between makeup-js core and UI modules?▼

Yes, the demo revamp applies distinct templates for vanilla JavaScript core modules and UI modules using eBay Skin CSS, ensuring correct package imports and tailored layout patterns for each module type.

Why do I need focusable elements before and after a widget in roving tabindex tests?▼

Focusable elements before and after a widget are needed in roving tabindex tests to verify tab trapping behavior, ensuring the module correctly manages focus navigation across the demo page boundaries during manual accessibility testing.

Related Skills

Explore More Software Engineering Skills→
digital-stoic-orgdigital-stoic-org
19

install-dependency

Automate monorepo-aware dependency installation across Python, JavaScript, and system packages.

Official
Intermediate
vibery-studiovibery-studio
3

webapp-testing

Automate local web app testing with Playwright Python scripts.

Official
Intermediate
sanghee01sanghee01

devup-ui

Compile JSX styles into static CSS for React components.

Community
Intermediate
makeupmakeup
47

test-coverage

Evaluate unit test coverage for makeup-js modules and generate prioritized gap reports.

Official
Intermediate