jQuery Modern Toolkit 🚀

A suite of five elite, production-grade jQuery plugins designed to bring 2026-level user experiences, micro-interactions, and React-like fluidity into legacy and standard web applications.

npm install @prabhnoor12/jquery-modern-toolkit

The 5 Plugins Included:

1. Auto-Skeleton Loader (jquery.skeletonize.js)

Don't let your app look frozen while data loads. Instantly convert any container into a beautiful, pulsing skeleton layout.

• Features: WAI-ARIA accessible, staggered waterfall reveals, lazy image fetching, and a Data-Binding Injector that seamlessly morphs skeletons into real content.

2. Command Palette (jquery.command-palette.js)

Give your users a MacOS/Linear style Cmd+K global search modal.

• Features: Custom fuzzy-search algorithm, algorithmic Time-Decay "Recently Used" memory, drill-down category filtering, and synonym/tag background searching.

3. Form Guardian (jquery.form-guardian.js)

Never let a user lose their typed data to a browser crash or accidental refresh again.

• Features: Zero-config localStorage auto-saving, visual "Saving... ✓" DOM injector, dirty-state Conflict Warning, and a human-readable Preview Draft modal. Safely ignores passwords and CSRF tokens.

4. Contextual Selection Menu (jquery.selection-menu.js)

Inspired by Medium and Notion. When a user highlights text, a sleek toolbar perfectly centers itself above the cursor.

• Features: Mathematical bounding-box collision physics (flips if too close to screen edges), real-time "Fluid Glide" when selecting with Shift+Arrows, and full support for both raw HTML and <textarea> fields.

5. Stacked Physics Toasts (jquery.stacked-toasts.js)

Inspired by Vercel/Sonner. Beautiful 3D depth-stacked notifications.

• Features: Toasts slide backward in 3D space. Hover to fan them out. Click and drag with momentum physics to swipe them away. Includes a brilliant $.stackedToast.promise() API to automatically handle loading/success/error states from your AJAX calls.

How to Use

Simply include the CSS and JS files for the plugins you want to use from the src/ folder.

<!-- Example: Using the Stacked Toasts -->
<link rel="stylesheet" href="node_modules/@prabhnoor12/jquery-modern-toolkit/src/jquery.stacked-toasts.css">

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="node_modules/@prabhnoor12/jquery-modern-toolkit/src/jquery.stacked-toasts.js"></script>

<script>
  $.stackedToast.success('Awesome!', 'The toolkit is ready to go.');
</script>

License

MIT License. Open source and free to use in commercial projects.