jQuery to JS vanilla

    1

    Migrate legacy jQuery code to modern, dependency-free ES2023+ JavaScript targeting evergreen browsers.

    $5

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    jQuery to JS vanilla

    Example session with this skill installed

    Convert this jQuery click handler to vanilla JS. It handles a tab menu, updates the URL hash, and uses an easing effect:

    $('.tab').on('click', function(e) { 
  e.preventDefault();
  var target = $(this).attr('href');
  $('.tab').removeClass('active');
  $(this).addClass('active');
  $('html, body').animate({ scrollTop: $(target).offset().top }, 500, 'easeOutBack');
  window.location.hash = target;
});
    • Read your context and instructions
    • Compiled the jquery to js

    I have migrated the jQuery tab click handler to modern vanilla JavaScript. The logic now uses querySelectorAll for selection, the classList API for state management, and the native window.scrollTo method for smooth, eased scrolling. I replaced the easeOutBack animation with a standard smooth behavior and high-precision scrolling.

    Vanilla JS Migration

    /**
 * Tab Navigation Handler
 * Targets Baseline 2023: Chrome 115+, Safari 16.4+
 */
const tabs = document.querySelectorAll('.tab');

for (const tab of tabs) {
  tab.addEventListener('click', (e) => {
    e.preventDefault();
    
    const targetSelector = tab.getAttribute('href');
    const targetElement = document.querySelector(targetSelector);
    
    if (!targetElement) return;

    // Replace $('.tab').removeClass('active')
    for (const t of tabs) {
      t.classList.remove('active');
    }

    // Replace $(this).addClass('active')
    tab.classList.add('active');

    // Replace jQuery animate scrollTop with native smooth scroll
    // Note: For specific 'easeOutBack' parity, use the Web Animations API 
    // or CSS scroll-behavior. Here we use the standard smooth API.
    window.scrollTo({
      top: targetElement.offsetTop,
      behavior: 'smooth'
    });

    // Update URL hash
    window.location.hash = targetSelector;
  });
}

    Next steps

    1. Add scroll-behavior: smooth; to your CSS html selector if you want this behavior to apply to all in-page anchors.
    2. If the tabs are generated dynamically, move this listener to a parent container using event delegation via e.target.closest('.tab').
    3. Consider using the IntersectionObserver API to automatically highlight tabs as the user scrolls through sections.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Stop shipping a 30KB dependency just to toggle a class or fetch a JSON endpoint. Modern browsers have natively implemented almost everything jQuery was designed to solve, but manually converting legacy codebases is tedious and error-prone. This skill automates the migration of jQuery logic to dependency-free vanilla JavaScript (ES2023+), specifically targeting evergreen browsers.

    What it does

    • DOM & Selectors — Converts $() and traversal methods to querySelector, closest, and modern iteration.
    • AJAX & Promises — Migrates $.ajax, $.get, and $.post to the fetch API with async/await and AbortController.
    • Event Handling — Transforms delegated handlers into container-level listeners and handles event namespacing via AbortSignal.
    • Effects & Easing — Replaces jQuery animations and jquery.easing plugins with CSS transitions, the Web Animations API (WAAPI), and scroll-snap.
    • Plugin Replacement — Swaps jQuery UI widgets and popular plugins (Slick, Select2, DataTables) for native elements like <dialog>, <datalist>, and the Popover API.

    How it works

    1. Audit — Inventory jQuery touchpoints across JS and PHP files to identify coupling and delegated events.
    2. Component Mapping — Decides whether to use native HTML/CSS, a tiny JS helper, or a modern dependency-free library.
    3. Bottom-up Rewrite — Converts utilities and AJAX first, followed by DOM logic, and finally removes the library dependency entirely.
    4. Verification — Validates the rewrite against a checklist covering keyboard accessibility, visual parity, and memory safety.

    Frameworks & tools

    Targeting Baseline 2023+ evergreen browsers. Uses ES2023 features, Fetch API, Web Animations API, CSS Grid, IntersectionObserver, and WordPress REST API plumbing.

    Why this beats prompting it yourself

    Generic LLMs often provide outdated XMLHttpRequest wrappers or fail to account for jQuery's implicit loop behavior, leading to silent runtime errors. This skill enforces "zero-hit" grep compliance and handles specific edge cases like return false semantics and easing function math.

    Use cases

    • Modernizing a legacy WordPress theme by removing jquery.js from the frontend enqueue list.
    • Converting complex jQuery UI accordions and dialogs to native <details> and <dialog> elements.
    • Replacing heavy slider plugins with CSS scroll-snap and IntersectionObserver for performance.
    • Refactoring internal business tools to drop legacy IE/Edge support and reduce bundle size.

    Known limitations

    Focuses strictly on evergreen browsers (Chrome, Edge, Firefox, Safari); does not provide polyfills for IE11. Genuine feature-rich components like virtualized grids may require a vanilla JS library rather than a native rewrite.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Money-back guarantee

    Doesn't do what its page promises? You get your money back.

    Trust & safety

    Security scanned

    Verified clean 11 days ago

    • Passed all security checks, Safe to install

    Listed11 days ago
    Updated4 days ago

    What's inside

    Frequently Asked Questions