quickux

v2.0.0

Published

6 months ago

Modern UX best practices on autopilot. Automatic cursor styles, keyboard shortcuts, focus management, and accessibility enhancements.

0High
0Medium
0Low

xish

ux ui accessibility a11y keyboard-shortcuts user-experience focus-management cursor best-practices

QuickUX

Modern UX best practices on autopilot. Drop in two files and instantly get automatic cursor styles, keyboard shortcuts, focus management, and accessibility enhancements.

Features

Cursor Management - Automatic pointer cursor on interactive elements, text cursor on inputs
Keyboard Shortcuts - Enter submits forms, Escape closes modals, Space activates buttons
Focus Management - Beautiful focus indicators and focus trapping in modals
Form Enhancements - Prevent double-submit, auto-scroll to validation errors
Accessibility - WCAG-compliant focus states, reduced motion support
Mobile-Friendly - Larger touch targets, optimized for touch devices
Zero Config - Works automatically, opt-out with data-no-ux-autopilot

Installation

NPM

npm install quickux

CDN

<link rel="stylesheet" href="https://unpkg.com/quickux/quickux.css">
<script src="https://unpkg.com/quickux/quickux.js"></script>

Download

Download quickux.css and quickux.js and add them to your project.

Usage

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="quickux.css">
</head>
<body>
  <h1>Your Website</h1>
  <button>I automatically get cursor: pointer!</button>
  
  <script src="quickux.js"></script>
</body>
</html>

That's it! All UX enhancements are now active.

Examples

Keyboard Shortcuts

<!-- Enter key submits this form -->
<form>
  <input type="text" placeholder="Type and press Enter">
  <button type="submit">Submit</button>
</form>

<!-- Escape closes this modal -->
<dialog open class="modal">
  <p>Press Escape to close</p>
</dialog>

Opt-Out

<!-- Disable for specific elements -->
<button class="no-quickux">Custom cursor</button>

<!-- Disable for entire section -->
<div class="no-quickux">
  <button>No auto styles here</button>
</div>

Modal Focus Trap

<dialog id="myModal">
  <h2>Modal Title</h2>
  <input type="text" placeholder="Focus stays trapped">
  <button>Close</button>
</dialog>

<script>
  document.getElementById('myModal').showModal();
  // Focus is automatically trapped, Tab cycles through modal elements
</script>

What Gets Applied

CSS Enhancements

cursor: pointer on buttons, links, and interactive elements
cursor: text on text inputs
cursor: not-allowed on disabled elements
focus-visible outlines for keyboard navigation
Touch-friendly sizing on mobile (44px minimum)
Smooth scrolling and animations
Modal backdrops with blur effect

JavaScript Behaviors

Enter key submits forms (Ctrl+Enter in textareas)
Escape key closes modals/dialogs
Space bar activates elements with role="button"
Focus trapping in modals and dialogs
Double-submit prevention on forms
Auto-scroll to first validation error

Configuration

QuickUX works automatically with zero configuration. To disable for specific elements, add the no-quickux class:

<button class="no-quickux">Not affected</button>

Browser Support

Chrome/Edge (latest 2 versions)
Firefox (latest 2 versions)
Safari (latest 2 versions)
Mobile browsers (iOS Safari, Chrome Android)

License

Contributing

Contributions welcome! Please open an issue or submit a pull request.

Resources

🚫 Opting Out

Don't want the auto-magic on a specific element? Just add the opt-out attribute/class:

CSS Opt-Out

<!-- Disable CSS auto-styles -->
<button class="no-ux-autopilot">
  I won't get automatic cursor or focus styles
</button>

JavaScript Opt-Out

<!-- Disable JS behaviors -->
<form data-no-ux-autopilot>
  <!-- Enter key won't submit this form -->
  <input type="text">
</form>

Opt-Out Entire Sections

<div class="no-ux-autopilot" data-no-ux-autopilot>
  <!-- Everything inside here is excluded from all UX Autopilot features -->
  <button>Normal button</button>
  <form>Normal form</form>
</div>

🎮 Examples

Enter Key Submits Forms

<form>
  <input type="text" placeholder="Type and press Enter">
  <button type="submit">Submit</button>
</form>
<!-- Pressing Enter in the input will submit the form -->

Auto-Save Form Data

<form data-autosave="contact-form">
  <input name="email" type="email">
  <textarea name="message"></textarea>
  <!-- Data is automatically saved to localStorage as you type -->
</form>

Clickable Table Rows

<table>
  <tr data-href="/user/1">
    <td>John Doe</td>
    <td>[email protected]</td>
  </tr>
  <!-- Clicking the row navigates to /user/1 -->
  <!-- Ctrl+Click opens in new tab -->
</table>

Destructive Action Confirmation

<button class="delete">
  Delete Account
</button>
<!-- Automatically shows confirmation dialog -->

<button class="danger" data-confirm-message="This will permanently delete all your data!">
  Delete Everything
</button>
<!-- Custom confirmation message -->

Modal with Focus Trap

<dialog open>
  <h2>Welcome</h2>
  <input type="text">
  <button>Close</button>
  <!-- Tab key cycles through focusable elements -->
  <!-- Escape key closes the dialog -->
  <!-- Focus is trapped inside -->
</dialog>

Smart Floating Labels

<div style="position: relative">
  <input type="text" data-smart-placeholder="Your Email">
</div>
<!-- Label floats up when focused or filled -->

Tooltips

<button data-tooltip="Save your changes">
  💾 Save
</button>
<!-- Hover to see tooltip -->

⚙️ Configuration

Customize JavaScript behaviors:

<script>
  // Configure before the script loads
  window.UXAutopilot.init({
    enterSubmitsForm: true,        // Enter key submits forms
    escapeClosesModal: true,       // Escape closes modals
    spaceActivatesButtons: true,   // Space activates buttons
    arrowKeyNavigation: true,      // Arrow key navigation in lists
    autoFocusTrap: true,          // Trap focus in modals
    preventDoubleSubmit: true,     // Prevent double submission
    autoScrollToError: true,       // Scroll to validation errors
    confirmDestructive: true       // Confirm delete/remove actions
  });
</script>

Or disable specific features:

UXAutopilot.init({
  enterSubmitsForm: false,  // Disable Enter key submission
  confirmDestructive: false // Disable confirmation prompts
});

🎨 CSS Custom Properties

Override default styles with CSS variables:

:root {
  --ux-focus-color: #4A90E2;
  --ux-focus-width: 2px;
  --ux-focus-offset: 2px;
}

📊 Browser Support

✅ Chrome/Edge (modern)
✅ Firefox (modern)
✅ Safari (modern)
✅ Mobile browsers
✅ Progressive enhancement (graceful degradation)

🤔 Philosophy

UX Autopilot follows these principles:

Auto-apply best practices - Good UX should be the default
Easy opt-out - One class/attribute disables everything
Zero dependencies - Pure CSS and Vanilla JS
Progressive enhancement - Works everywhere, better in modern browsers
Accessibility first - WCAG compliance built-in
Mobile-friendly - Touch and small screens are first-class citizens

📦 What's Included

ux-autopilot/
├── ux-autopilot.css       # All CSS utilities and auto-styles
├── ux-autopilot.js        # All JavaScript behaviors
├── README.md              # This file
├── package.json           # NPM package config
└── demo.html              # Live examples

🐛 Known Limitations

Some features require modern browsers (focus-visible, :has, etc.)
Custom form controls may need manual adjustment
Some CSS frameworks may conflict (use opt-out)

🤝 Contributing

This is a simple, focused library. Contributions welcome for:

Bug fixes
Browser compatibility improvements
Documentation improvements
New utility features (if they're truly universal best practices)

📄 License

MIT License - Use freely in personal and commercial projects

🙏 Credits

Inspired by modern UX best practices and accessibility guidelines from:

WCAG 2.1
Material Design
Apple HIG
Microsoft Fluent Design

Made with ❤️ for better web experiences

Got questions? Found a bug? Open an issue