New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

App UX Paradigms

by swyxio in swyxio/skills

Apply conventional interaction behavior for keyboard shortcuts, focus, dialogs, overlays, menus, forms, and asynchronous controls.

MITAuto-check passedFrontend & Design

Install App UX Paradigms

skills CLI
$ npx skills add swyxio/skills --skill app-ux-paradigms -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install swyxio/skills app-ux-paradigms --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/swyxio/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/app-ux-paradigms .claude/skills/app-ux-paradigms && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
app-ux-paradigms
GitHub stars
176
Token cost
~1.7k tokens
SKILL.md length
856 words
Files
1
Skills in repo
89
Repo updated
First seen
Licence
MIT

At a glance

Apply conventional interaction behavior for keyboard shortcuts, focus, dialogs, overlays, menus, forms, and asynchronous controls.

  • Those interaction mechanics are being built
  • SKILL.md covers User preference, Keyboard shortcuts, Modals and overlays and Menus and transient UI, plus 7 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Do not use for general page aesthetics

What it does

App UX Paradigms is an agent skill from swyxio/skills. Apply conventional interaction behavior for keyboard shortcuts, focus, dialogs, overlays, menus, forms, and asynchronous controls. Use when those interaction mechanics are being built or reviewed; do not use for general page aesthetics, information architecture, or visualization quality.

Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Async programming and UX design. The repository describes itself as: Agent skills for Claude Code and other AI agents. The licence is MIT.

When your agent uses it

  • Those interaction mechanics are being built
  • Do not use for general page aesthetics
  • Information architecture
  • Visualization quality

Example prompts

  • “/app-ux-paradigms”

What it can do on your machine

Read from SKILL.md and the folder at commit 038ef34. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

App UX Paradigms loads about 1.7k tokens when it runs. Until then it costs about 76 tokens; SKILL.md has 856 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~76
When it runs · the whole SKILL.md, loaded when a task matches
~1.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from swyxio/skills at commit 038ef34, republished under its MIT licence (© swyxio). 856 words, ~1,686 tokens.

Download SKILL.mdSave it as .claude/skills/app-ux-paradigms/SKILL.md (or your agent's skills folder).
name
app-ux-paradigms
description
Apply conventional interaction behavior for keyboard shortcuts, focus, dialogs, overlays, menus, forms, and asynchronous controls. Use when those interaction mechanics are being built or reviewed; do not use for general page aesthetics, information architecture, or visualization quality.

App UX: keyboard shortcuts and common paradigms

User preference

Match desktop-app and modern web conventions by default. Users should not need to hunt for close affordances or discover shortcuts only by accident.

Apply only the patterns relevant to the interaction being built or reviewed. This skill does not authorize unrelated UI changes, and its tables are defaults, not a product-wide acceptance checklist. Accessibility, prevention of unintended destructive action, and avoiding silent data loss remain blocking where the touched interaction creates those risks. Stop when the requested interaction works in its relevant input and state variants; report adjacent consistency improvements as follow-ups.

Pair with the sync-url-navigation skill for bookmarkable nav/filter state.

Keyboard shortcuts

Common expectations for touched interactions
Key / chordExpected behavior
EscClose the topmost overlay: modal, drawer, popover, context menu, inline edit. Do not close if a destructive save is in flight—block Esc while saving or show a clear state.
⌘/Ctrl+EnterSubmit primary form or send message in chat/composer (when focus is in a text field).
EnterSubmit single-line fields; in multi-line fields, Enter = newline unless Shift+Enter is documented as send.
⌘/Ctrl+letterUse for global toggles (e.g. ⌘/Ctrl+J = open assistant panel). Always support both metaKey (Mac) and ctrlKey (Windows/Linux).
  • Attach document-level keydown listeners when an overlay opens; remove on unmount.
  • Call event.preventDefault() on Esc when handling it so nested browser UI does not steal the key.
  • Show shortcuts in title tooltips on icon buttons (e.g. Close (Esc)).
  • Surface the same shortcuts in an in-app Help section with <kbd> styling.
  • Avoid shortcut conflicts: check !event.shiftKey / !event.altKey when the chord is specific (e.g. Ctrl+J vs Ctrl+Shift+K).
Optional but valued
PatternUse when
⌘/Ctrl+KCommand palette / quick open (if the app has one)
⌘/Ctrl+Shift+KSecondary global action (e.g. clear chat / reset context)—only if distinct from Ctrl+K
?Toggle keyboard shortcut help (when not typing in an input)
/Focus search (when not in an input)

Modals and overlays

ParadigmExpected behavior when applicable
EscCloses modal (see above).
Backdrop clickClicking outside may close lightweight dialogs; keep explicit confirmation dialogs or forms with unsaved work open when dismissal would be unsafe.
× controlTop-right (or consistent corner), type="button", labeled title with Esc hint.
Click propagationstopPropagation on panel content so inner clicks do not close.
FocusMove focus into modal on open; return focus to trigger on close when practical.
ScrollLock or contain body scroll for full-screen overlays; allow scroll inside tall forms.

Use a consistent close model across comparable overlays. Do not add every close mechanism when it would discard unsaved work or weaken an explicit confirmation.

Menus and transient UI

  • Context menus: Esc closes; click outside closes (mousedown on document).
  • Hover cards / tooltips: Do not trap Esc unless they are modal; dismiss on pointer leave or Esc if sticky.
  • Inline edit (e.g. grid cell): Esc cancels edit without saving.

Forms and async actions

  • Disable primary submit while saving; label button Saving….
  • Show inline error under the form, not only alert.
  • Required fields: when the touched form has them, validate on submit and focus the first invalid field.
  • Clear resets filters to empty defaults and syncs URL if using query-param routing.
Show full SKILL.md (335 more words)Show less

Lists, tables, and selection

  • Row click opens editor or expands detail (consistent per table).
  • Shift+click multi-select when desktop bulk selection is in scope; show selection chrome and a bulk action bar.
  • ID chips: click copies to clipboard with brief status feedback (Copied).
  • Empty states: explain why no rows (no data vs no matches vs filters too narrow).
  • Unavailable states: when primary content cannot be produced, do not show the normal success workspace with irrelevant export, share, filter, or edit controls. Explain the missing prerequisite and offer the most useful recovery action. Analytical publishability belongs to data-visualization-quality.
  • Load more for long tables instead of rendering thousands of rows at once.

Search and filters

  • Use type="search" where appropriate.
  • Changing filters resets pagination/limit to the first page.
  • Debounce URL sync is optional; immediate URL sync is fine for admin tools.

Feedback and safety

  • Status line or toast for export, save, copy, undo—not silent success.
  • Undo for reversible schedule/data edits when the backend supports it.
  • Destructive actions (delete, rollback): confirm in-modal or confirm(); never rely only on icon buttons.
  • Role-gated UI: hide or disable edit actions for viewers; explain in help text.

Accessibility baseline

  • Visible focus rings on interactive elements.
  • Buttons for actions; avoid div onClick without role and keyboard support.
  • Meaningful title / aria-label on icon-only controls.
  • Do not rely on color alone for status (use text labels or pills).

Selective review lens

Select only items relevant to the changed interaction. Unselected items are not failed gates, and a review request does not authorize implementation.

  • Esc closes overlay / menu / inline edit
  • Backdrop + × use same close handler
  • Global shortcuts use ⌘ and Ctrl
  • Shortcuts documented in tooltips and Help
  • Submit disabled while saving; Esc blocked if close would lose in-flight save
  • Click-outside closes non-modal menus
  • Primary action discoverable without reading source

Anti-patterns

  • Ordinary dismissible modal with only × and no keyboard or safe outside-dismiss path
  • Shortcut only in README, not in UI
  • Mac-only metaKey with no ctrlKey
  • Esc closes modal but leaves a nested context menu open underneath
  • Silent failures on save/export/copy

© swyxio, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in app-ux-paradigms of swyxio/skills.

Open the folder on GitHubat commit 038ef34

Compare with similar skills

App UX Paradigms next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

App UX Paradigms compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
App UX Paradigms this skillswyxio/skills176—~1.7kAutomated safety check: PassMIT
Dsh CI Test ReliabilityZhou-Yujing114514/deepseek-harness-linux120—~2.4kAutomated safety check: PassMIT
Live UX PolishEveryInc/compound-engineering-plugin25k—~777Automated safety check: PassMIT
Archestra Docs Writerarchestra-ai/archestra4.4k—~5.3kAutomated safety check: PassCustom licence
User Flow DiagramOwl-Listener/designer-skills2.9k1 repos~448Automated safety check: PassMIT
Alego CI Test Reliabilitysingula-ai/alego109—~2.4kAutomated safety check: PassMIT

Similar skills

  • Dsh CI Test Reliability

    Zhou-Yujing114514/deepseek-harness-linux

    Design, review, and diagnose DeepSeek Harness tests and fixtures that can fail nondeterministically under CI concurrency, shared host resources, clocks, process-global state, subprocesses, network…

    120 GitHub stars~2.4k tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed

  • Live UX Polish

    EveryInc/compound-engineering-plugin

    Collects your feedback on a running feature, typed or spoken and drawn in the browser, and turns it into focused UX fixes saved as local commits.

    25k GitHub stars~777 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Archestra Docs Writer

    archestra-ai/archestra

    A skill your agent uses when writing, editing, restructuring, or auditing Archestra documentation under docs/pages/ — new feature docs, page rewrites, sidebar and information-architecture changes…

    4.4k GitHub stars~5.3k tokensUpdated today
    Frontend & DesignAuto-check passed

  • User Flow Diagram

    Owl-Listener/designer-skills

    Diagram screen-level paths, decision points, and branch logic.

    2.9k GitHub starsUsed in 1 repo~448 tokens
    Frontend & DesignAuto-check passed

  • Alego CI Test Reliability

    singula-ai/alego

    Design, review, and diagnose Alego tests and fixtures that can fail nondeterministically under CI concurrency, shared host resources, clocks, process-global state, subprocesses, network listeners…

    109 GitHub stars~2.4k tokensUpdated 12 days ago
    Frontend & DesignAuto-check passed

  • Fitts Law

    hashgraph-online/awesome-codex-plugins

    A skill your agent uses whenever the question involves how easy it is to hit an interactive target — buttons, links, form controls, drag handles, scrollbars, mobile tap targets, anything the user…

    1.3k GitHub stars~3.5k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

More from swyxio/skills

All 89 skills in this repo

  • Programmatic Agents

    swyxio/skills

    Run a selected coding-agent CLI programmatically, with latency, error, usage, cost, and trace logging.

    176 GitHub stars~2.2k tokensUpdated today
    Auto-check passed

  • Reserved Handle Policy

    swyxio/skills

    Design, implement, audit, or refresh protected username and handle namespaces for public products.

    176 GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • New Mac Setup

    swyxio/skills

    Fully automated new Mac setup for fullstack web developers and AI engineers.

    176 GitHub stars~4.3k tokensUpdated today
    Auto-check passed

  • Youtube API

    swyxio/skills

    Manage YouTube videos programmatically via the YouTube Data API v3 — upload video files, upload custom thumbnails, update video metadata (titles, descriptions, tags), and query video/channel info…

    176 GitHub stars~2.2k tokensUpdated today
    Auto-check passed

  • Youtube Studio Batch Upload

    swyxio/skills

    Batch YouTube Studio upload workflow for videos sourced from Airtable, Google Drive, Loom, YouTube, or local files.

    176 GitHub stars~1.5k tokensUpdated today
    Auto-check: warnings

  • Deep Trajectory Analysis

    swyxio/skills

    Reconstruct and visually analyze paired agent, game, or policy trajectories to determine whether changed actions produced their intended effects.

    176 GitHub stars~1.8k tokensUpdated today
    Auto-check passed

Categories

Questions about App UX Paradigms

What does App UX Paradigms do?

Apply conventional interaction behavior for keyboard shortcuts, focus, dialogs, overlays, menus, forms, and asynchronous controls. App UX Paradigms is an agent skill from swyxio/skills. Apply conventional interaction behavior for keyboard shortcuts, focus, dialogs, overlays, menus, forms, and asynchronous controls.

When should I use App UX Paradigms?

App UX Paradigms fits situations like: those interaction mechanics are being built; do not use for general page aesthetics; information architecture; visualization quality.

How do I install App UX Paradigms in Claude Code?

Run `npx skills add swyxio/skills --skill app-ux-paradigms -a claude-code`. Or copy the skill folder (app-ux-paradigms in swyxio/skills) into .claude/skills/app-ux-paradigms in your project. Claude Code loads it when a task matches its description.

How do I install App UX Paradigms in Codex?

Run `npx skills add swyxio/skills --skill app-ux-paradigms -a codex`. Or copy the skill folder (app-ux-paradigms in swyxio/skills) into .agents/skills/app-ux-paradigms in your project. Codex loads it when a task matches its description.

Can I use App UX Paradigms in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add swyxio/skills --skill app-ux-paradigms -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/app-ux-paradigms, .gemini/skills/app-ux-paradigms, .github/skills/app-ux-paradigms and .opencode/skills/app-ux-paradigms in your project.

What does App UX Paradigms need to run?

SKILL.md names no scripts, command-line tools or credentials: App UX Paradigms is instructions for the agent only.

Does App UX Paradigms access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is App UX Paradigms safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does App UX Paradigms use?

App UX Paradigms is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does App UX Paradigms use?

About 1.7k tokens (SKILL.md is roughly 6.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to App UX Paradigms?

Skills that share tags, products or a category with App UX Paradigms: Dsh CI Test Reliability (Zhou-Yujing114514/deepseek-harness-linux, 120 stars), Live UX Polish (EveryInc/compound-engineering-plugin, 25k stars), Archestra Docs Writer (archestra-ai/archestra, 4.4k stars) and User Flow Diagram (Owl-Listener/designer-skills, 2.9k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains App UX Paradigms?

swyxio (a GitHub user) maintains it in swyxio/skills, which has 176 GitHub stars. The repository holds 89 skills in this directory. The repository was last updated on October 5, 2026.

Source: swyxio/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.