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

Mobile Webapp UX

by swyxio in swyxio/skills

Design, build, or review responsive mobile web-app UX when a phone experience needs task-first layout, usable touch controls, compact media comparison, mobile navigation, overlays, forms, or…

MITAuto-check passedFrontend & Design

Install Mobile Webapp UX

skills CLI
$ npx skills add swyxio/skills --skill mobile-webapp-ux -a claude-code

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

GitHub CLI
$ gh skill install swyxio/skills mobile-webapp-ux --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/mobile-webapp-ux .claude/skills/mobile-webapp-ux && 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
mobile-webapp-ux
GitHub stars
176
Token cost
~1.4k tokens
SKILL.md length
760 words
Files
2
Skills in repo
89
Repo updated
First seen
Licence
MIT

At a glance

Design, build, or review responsive mobile web-app UX when a phone experience needs task-first layout, usable touch controls, compact media comparison, mobile navigation, overlays, forms, or…

  • Works in 4 steps: Two equal, side-by-side candidate… → Large, labeled voting controls… → Tap-to-expand media in a full-detail… → …
  • Requests to make an existing web app work well on phones
  • SKILL.md covers Start with the mobile task loop, Media and detail inspection, Touch controls and Responsive layout rules, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Mobile Webapp UX is an agent skill from swyxio/skills. Design, build, or review responsive mobile web-app UX when a phone experience needs task-first layout, usable touch controls, compact media comparison, mobile navigation, overlays, forms, or responsive validation without degrading the desktop experience. Use for requests to make an existing web app work well on phones, fit a task into one mobile viewport, improve tap targets, adapt comparison/review screens, or audit mobile usability.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).

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

When your agent uses it

  • Requests to make an existing web app work well on phones
  • Fit a task into one mobile viewport
  • Improve tap targets
  • Adapt comparison/review screens

Example prompts

  • “/mobile-webapp-ux”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Two equal, side-by-side candidate thumbnails.
  2. Large, labeled voting controls immediately beneath the candidates.
  3. Tap-to-expand media in a full-detail lightbox.
  4. Skip, undo, tags, annotation, exports, and history below or compacted.

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

Mobile Webapp UX loads about 1.4k tokens when it runs. Until then it costs about 114 tokens; SKILL.md has 760 words of instructions outside code blocks.

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

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). 760 words, ~1,430 tokens.

Download SKILL.mdSave it as .claude/skills/mobile-webapp-ux/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
mobile-webapp-ux
description
Design, build, or review responsive mobile web-app UX when a phone experience needs task-first layout, usable touch controls, compact media comparison, mobile navigation, overlays, forms, or responsive validation without degrading the desktop experience. Use for requests to make an existing web app work well on phones, fit a task into one mobile viewport, improve tap targets, adapt comparison/review screens, or audit mobile usability.

Mobile Web-App UX

Treat the phone as a distinct task surface, not a narrower desktop canvas. Preserve the desktop contract unless the requested behavior genuinely differs.

Apply this skill to the requested mobile loop and the responsive states closest to it. The patterns below are recommendations unless accessibility, reachability of the primary action, or prevention of data loss makes one blocking. A mobile review is read-only unless implementation was requested. Stop when the named loop works at the agreed narrow viewport and its existing desktop counterpart; report unrelated redesign opportunities separately.

Start with the mobile task loop

Identify the smallest repeated loop the user needs to complete: inspect → decide → act; scan → filter → open; compose → send. Make that loop dominant in the first viewport.

  • Keep the current task, its evidence, and its primary action visible together whenever practical.
  • Reduce decorative chrome, repeated headings, descriptive copy, and secondary metadata before reducing the primary action.
  • Prefer a concise mobile-specific composition over merely scaling down desktop spacing.
  • Keep secondary operations available but visually subordinate: overflow, disclosure, an anchored utility area, or a later section.

When a head-to-head visual review is the requested task, use this default hierarchy:

  1. Two equal, side-by-side candidate thumbnails.
  2. Large, labeled voting controls immediately beneath the candidates.
  3. Tap-to-expand media in a full-detail lightbox.
  4. Skip, undo, tags, annotation, exports, and history below or compacted.

Do not stack the two candidates vertically when the comparison itself is the primary task, unless the images cannot remain legible side by side at the supported minimum width.

Media and detail inspection

  • Constrain inline media by viewport height and use object-fit: contain when framing or full outfit/body visibility matters.
  • Make media an obvious button with a visible focus style and an accessible label. Do not require tiny zoom controls to inspect detail.
  • Use a modal lightbox for detail. Provide a close button, backdrop dismissal, Esc, focus management, and scroll locking.
  • Keep the image pair’s cards the same visual weight. Do not let different source aspect ratios change the comparison hierarchy.
  • Avoid putting important voting controls below a very tall image by default.

Touch controls

  • Make the primary action row visually strongest and easy to hit: target at least 44 × 44 CSS px; use roughly 48–56 px height for repeated vote buttons when space permits.
  • Keep labels on primary actions. Icon-only controls are for unmistakable secondary actions with an accessible label and tooltip.
  • Put destructive or recovery actions apart from the main action row. Make undo available after fast, high-frequency actions.
  • Never rely on hover for critical information or controls.
  • Preserve keyboard shortcuts for desktop users, but never make mobile completion depend on them.
Show full SKILL.md (320 more words)Show less

Responsive layout rules

  • When the product does not already define a supported narrow viewport, use 390 × 844 as a practical reference rather than creating a new product-wide support contract.
  • Use a two-column grid for compact comparisons: grid-template-columns: minmax(0, 1fr) minmax(0, 1fr).
  • Prevent labels, chips, and candidate IDs from forcing cards wider; allow controlled ellipsis or hide nonessential metadata.
  • Use dvh for viewport-constrained media and overlays where browser chrome changes can otherwise cause clipping.
  • Hide or compact desktop-only status strips and verbose introductory copy in a task-focused mobile view; retain access through an alternate route or disclosure if needed.
  • Do not make an entire page overflow: hidden on mobile unless the current task is deliberately designed to fit and every needed control remains reachable.

Validate the actual phone experience

After implementation, inspect the rendered app at the agreed narrow reference viewport. Select the checks relevant to the requested loop:

  • Both compared items are visible simultaneously.
  • The primary actions are in the initial viewport and are comfortably tappable.
  • The initial decision loop requires no vertical scroll, or any intentional scroll is obvious and minimal.
  • Image expansion opens, renders, and closes correctly; Esc and backdrop close work.
  • Long labels, localized text, loading states, and small screens do not overlap or hide actions.
  • Desktop layout and shortcuts still work at the existing desktop breakpoint.

If browser control is available and visual mobile QA is requested, use it for this check. Otherwise validate the layout structurally and state the limitation rather than claiming a visual result.

Avoid

  • Treating mobile as only font-size and padding reductions.
  • Stacking comparison media vertically while moving the vote controls out of view.
  • Hiding labels from the main action buttons to save a few pixels.
  • Requiring pinch zoom because inline media is too small without offering a lightbox.
  • Putting export, settings, and annotations ahead of the core task.
  • Breaking desktop keyboard or pointer workflows in the course of the mobile adaptation.

© 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

SKILL.md and 1 other file in mobile-webapp-ux of swyxio/skills.

  • SKILL.md
  • agents/openai.yaml

Open the folder on GitHubat commit 038ef34

Compare with similar skills

Mobile Webapp UX 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.

Mobile Webapp UX compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Mobile Webapp UX this skillswyxio/skills176—~1.4kAutomated safety check: PassMIT
Bmad UXaj-geddes/claude-code-bmad-skills488—~2kAutomated safety check: NotesCustom licence
Mobile Friendlykostja94/marketing-skills1k—~1.5kAutomated safety check: PassMIT
Fitts Lawhashgraph-online/awesome-codex-plugins1.3k—~3.5kAutomated safety check: PassApache-2.0
Wayfinder Codex UX Reviewasdecided/WayfinderRouter417—~1.1kAutomated safety check: PassApache-2.0
Frontend Designavibebuilder/claude-prime120—~2.1kAutomated safety check: PassMIT

Similar skills

  • Bmad UX

    aj-geddes/claude-code-bmad-skills

    Solutioning-phase UX planning skill (optional; activate when the project has a UI).

    488 GitHub stars~2k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check: notes

  • Mobile Friendly

    kostja94/marketing-skills

    When the user wants to optimize for mobile-first indexing or fix mobile usability.

    1k GitHub stars~1.5k tokensUpdated 4 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 today
    Frontend & DesignAuto-check passed

  • Wayfinder Codex UX Review

    asdecided/WayfinderRouter

    Review and improve WAYFINDER's native macOS UX against OpenAI Codex app patterns and the repo's accepted menu-bar design contracts.

    417 GitHub stars~1.1k tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed

  • Frontend Design

    avibebuilder/claude-prime

    Builds distinctive, production-grade UIs that avoid generic AI aesthetics.

    120 GitHub stars~2.1k tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed

  • UI Automation Workflows

    conorluddy/xclaude-plugin

    Accessibility-first UI automation using IDB. An agent skill from conorluddy/xclaude-plugin.

    183 GitHub stars~2.2k tokensUpdated 28 days ago
    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 5 days ago
    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 5 days ago
    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 5 days ago
    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 5 days ago
    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 5 days ago
    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 5 days ago
    Auto-check passed

Categories

Questions about Mobile Webapp UX

What does Mobile Webapp UX do?

Design, build, or review responsive mobile web-app UX when a phone experience needs task-first layout, usable touch controls, compact media comparison, mobile navigation, overlays, forms, or…. Mobile Webapp UX is an agent skill from swyxio/skills. Design, build, or review responsive mobile web-app UX when a phone experience needs task-first layout, usable touch controls, compact media comparison, mobile navigation, overlays, forms, or responsive validation without degrading the desktop experience.

When should I use Mobile Webapp UX?

Mobile Webapp UX fits situations like: requests to make an existing web app work well on phones; fit a task into one mobile viewport; improve tap targets; adapt comparison/review screens.

How do I install Mobile Webapp UX in Claude Code?

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

How do I install Mobile Webapp UX in Codex?

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

Can I use Mobile Webapp UX 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 mobile-webapp-ux -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/mobile-webapp-ux, .gemini/skills/mobile-webapp-ux, .github/skills/mobile-webapp-ux and .opencode/skills/mobile-webapp-ux in your project.

What does Mobile Webapp UX need to run?

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

Does Mobile Webapp UX 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 Mobile Webapp UX 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 Mobile Webapp UX use?

Mobile Webapp UX 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 Mobile Webapp UX use?

About 1.4k tokens (SKILL.md is roughly 5.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 Mobile Webapp UX?

Skills that share tags, products or a category with Mobile Webapp UX: Bmad UX (aj-geddes/claude-code-bmad-skills, 488 stars), Mobile Friendly (kostja94/marketing-skills, 1k stars), Fitts Law (hashgraph-online/awesome-codex-plugins, 1.3k stars) and Wayfinder Codex UX Review (asdecided/WayfinderRouter, 417 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Mobile Webapp UX?

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.