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

refactor-module

Refactor makeup-js modules to modern ES+ syntax while preserving public APIs.

47|14|Updated Jan 8, 2020
Search Tags:#accessibility#refactoring#unit testing#javascript#tree-shaking#code modernization#makeup-js
One-click install
npx skills add https://github.com/makeup/makeup-js --skill refactor-module-makeup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: refactor-module
Source: https://github.com/makeup/makeup-js/tree/main/.claude/skills/refactor-module
Command: npx skills add https://github.com/makeup/makeup-js --skill refactor-module-makeup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of outdated, inconsistent JavaScript patterns in makeup-js modules that reduce code maintainability, hinder performance, and create friction for contributors.

Core Features & Use Cases

  • End-to-end module modernization: Guides refactoring of source code, unit tests, and README documentation for any core or UI module in the makeup-js monorepo.
  • Strict API preservation: Includes guardrails to prevent breaking changes to public functions, classes, events, and options during refactoring.
  • Modern pattern adoption: Identifies opportunities to replace deprecated APIs (like keyCode), legacy syntax (like var and Object.assign), and verbose patterns with readable ES+ equivalents.
  • Use Case: For example, use this Skill to modernize the makeup-roving-tabindex module by replacing keyCode with KeyboardEvent.key, converting Object.assign calls to spread syntax, and updating tests to use modern mocking without altering its public behavior.

Quick Start

Use the refactor-module skill to modernize the makeup-next-id core module to current JavaScript patterns while preserving its existing public API and test compatibility.

Frequently Asked Questions about refactor-module

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

FAQPage Schema
How do I refactor JavaScript modules to modern ES+ syntax without breaking the public API?▼

Refactoring makeup-js modules to modern ES+ syntax involves replacing outdated patterns like var and Object.assign with spread syntax, while enforcing strict guardrails that preserve existing public functions, classes, and events.

What is the best way to modernize legacy JavaScript code for tree-shaking optimization?▼

Modernizing legacy JavaScript code for tree-shaking involves converting deprecated APIs like keyCode to KeyboardEvent.key and adopting ES+ syntax to improve code maintainability and compatibility with current browser support targets.

How do I update unit tests and README documentation when modernizing JavaScript modules?▼

When modernizing JavaScript modules, update unit tests to use modern mocking techniques and verify README documentation alignment as part of an end-to-end refactoring workflow that covers both core and UI modules.

Does refactoring makeup-js modules require preserving existing public options and events?▼

Refactoring makeup-js modules requires strict preservation of existing public options, events, and functions to prevent breaking changes, ensuring the refactored code maintains full compatibility with its original public API surface.

Why should I replace deprecated JavaScript APIs like keyCode during a code modernization refactor?▼

Replacing deprecated JavaScript APIs like keyCode during code modernization improves accessibility and code maintainability by adopting readable ES+ equivalents such as KeyboardEvent.key, aligning with current tooling and modern browser targets.

Related Skills

Explore More Software Engineering Skills→
makeupmakeup
47

test-coverage

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

Official
Intermediate
nickcuypersnickcuypers

flutter-feature-bootstrap

Scaffold Flutter feature modules with folders, starter files, and test stubs.

Community
Intermediate
R2W1csR2W1cs
1

lint-and-validate

Lint and validate JavaScript and Python code for syntax and style issues.

Community
Intermediate
thkim2015thkim2015

moai-tool-ast-grep

Perform AST-based structural code search, security scanning, and refactoring across multiple programming languages.

Community
Advanced