skills.rest
swyxio
swyxioCOMMUNITY
Explore all skills by this author →
Website𝕏@swyxGitHub

app-ux-paradigms

Standardize keyboard shortcuts, modal close behavior, and form accessibility in web applications.

154|9|Updated Mar 27, 2026
Search Tags:#accessibility#ux-patterns#ui-consistency#keyboard-shortcuts#frontend-development#modal-design#web-app-ux
One-click install
npx skills add https://github.com/swyxio/skills --skill app-ux-paradigms
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: app-ux-paradigms
Source: https://github.com/swyxio/skills/tree/main/app-ux-paradigms
Command: npx skills add https://github.com/swyxio/skills --skill app-ux-paradigms

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent web app user experiences—such as missing keyboard shortcuts, unpredictable modal close behaviors, and poor accessibility—frustrate users, increase support requests, and make tools feel unpolished. This Skill eliminates that friction by providing standardized, widely accepted UX patterns for common interface elements.

Core Features & Use Cases

  • Cross-Platform Keyboard Shortcuts: Implements consistent hotkeys (Esc for closing overlays, ⌘/Ctrl+Enter for form submission, global toggles) with proper tooltip and help documentation for both Mac and Windows/Linux users.
  • Predictable Overlay & Modal Behavior: Ensures all modals, drawers, popovers, and context menus follow the same close rules (Esc, backdrop click, × button) and proper focus management for seamless interaction.
  • Accessible Form & List Interactions: Includes inline validation, error messaging, multi-select, empty states, and role-gated UI to meet baseline accessibility standards for admin tools and public-facing applications.
  • Use Case: Ideal for building internal admin dashboards, conference management platforms, or any web app where users expect desktop-app-like interaction consistency and polish.

Quick Start

Use the app-ux-paradigms skill to implement Esc-to-close modals, cross-platform keyboard shortcuts, and accessible form validation for your new React admin dashboard.

Frequently Asked Questions about app-ux-paradigms

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

FAQPage Schema
How do I implement consistent keyboard shortcuts for web apps across Mac and Windows?▼

Standardize cross-platform keyboard shortcuts by implementing consistent hotkeys, such as Esc for closing overlays and ⌘/Ctrl+Enter for form submission, ensuring both Mac and Windows/Linux users experience predictable interactions.

What is the best way to handle modal close behavior and focus management in frontend development?▼

Predictable modal close behavior requires standardizing rules for all overlays so modals, drawers, and menus close consistently via Esc, backdrop clicks, or × buttons, while applying proper focus management for seamless interaction.

How do I add accessible form validation and list interactions to an admin dashboard?▼

Accessible form and list interactions require implementing inline validation, clear error messaging, multi-select capabilities, empty states, and role-gated UI to meet baseline accessibility standards for admin tools.

Can I use these UX patterns for building internal tools and conference management platforms?▼

Yes, you can apply these UX patterns to internal admin dashboards, conference management platforms, or any web app where users expect desktop-app-like interaction consistency and polish.

Why do my web app modals and context menus have inconsistent close behaviors?▼

Inconsistent web app experiences occur when modals, popovers, and context menus lack standardized close rules, which this approach solves by enforcing predictable Esc, backdrop click, and × button behaviors across all overlays.

Related Skills

Explore More Software Engineering Skills→
jc180105jc180105

UX Architect

Define reusable CSS architecture and UX foundations for frontend development.

Community
Advanced
oakossoakoss
14

tanstack-hotkeys

Manage type-safe keyboard shortcuts in React apps with hooks and a provider.

Official
Intermediate
keshav55keshav55

atris-design

Enforce frontend aesthetics policies for UI components and design systems.

Community
Basic
marcusmarcus
1.0k

ui-features

Guide developers in implementing Sidecar UI modals, keyboard shortcuts, and responsive layouts.

Community
Advanced