Mobile UX Optimizer
curiositech/some_claude_skills
Mobile-first UX optimization for touch interfaces, responsive layouts, and performance.
Apply Mobazha mobile UX standards including font sizes, spacing, touch targets, and interaction patterns from original mobazha-mobile.
Install Mobile UX Guide
$ npx skills add mobazha/mobazha-unified --skill mobile-ux-guide -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install mobazha/mobazha-unified mobile-ux-guide --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/mobile-ux-guide .claude/skills/mobile-ux-guide && rm -rf skills-srcUse ~/.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/
Install the "mobile-ux-guide" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/mobile-ux-guide into .claude/skills/mobile-ux-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mobile-ux-guide", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/mobile-ux-guideType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add mobazha/mobazha-unified --skill mobile-ux-guide -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install mobazha/mobazha-unified mobile-ux-guide --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.cursor/skills/mobile-ux-guide .agents/skills/mobile-ux-guide && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "mobile-ux-guide" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/mobile-ux-guide into .agents/skills/mobile-ux-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mobile-ux-guide", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add mobazha/mobazha-unified --skill mobile-ux-guide -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install mobazha/mobazha-unified mobile-ux-guide --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.cursor/skills/mobile-ux-guide .cursor/skills/mobile-ux-guide && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "mobile-ux-guide" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/mobile-ux-guide into .cursor/skills/mobile-ux-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mobile-ux-guide", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/mobazha/mobazha-unified.git --path .cursor/skills/mobile-ux-guide--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add mobazha/mobazha-unified --skill mobile-ux-guide -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install mobazha/mobazha-unified mobile-ux-guide --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.cursor/skills/mobile-ux-guide .gemini/skills/mobile-ux-guide && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "mobile-ux-guide" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/mobile-ux-guide into .gemini/skills/mobile-ux-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mobile-ux-guide", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install mobazha/mobazha-unified mobile-ux-guideInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add mobazha/mobazha-unified --skill mobile-ux-guide -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .github/skills && cp -r skills-src/.cursor/skills/mobile-ux-guide .github/skills/mobile-ux-guide && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "mobile-ux-guide" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/mobile-ux-guide into .github/skills/mobile-ux-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mobile-ux-guide", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add mobazha/mobazha-unified --skill mobile-ux-guide -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install mobazha/mobazha-unified mobile-ux-guide --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.cursor/skills/mobile-ux-guide .opencode/skills/mobile-ux-guide && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "mobile-ux-guide" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/mobile-ux-guide into .opencode/skills/mobile-ux-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mobile-ux-guide", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
mobile-ux-guide- GitHub stars
- 165
- Token cost
- ~821 tokens
- SKILL.md length
- 217 words
- Files
- 2
- Skills in repo
- 29
- Repo updated
- First seen
- Licence
- MPL-2.0
At a glance
Apply Mobazha mobile UX standards including font sizes, spacing, touch targets, and interaction patterns from original mobazha-mobile.
- Modifying mobile-responsive components
- SKILL.md covers Quick Reference, Mobile Footer 规范, Mobile Checklist and 移动端视觉测试
- Calls pnpm
- The user asks about mobile layout
What it does
Mobile UX Guide is an agent skill from mobazha/mobazha-unified. Apply Mobazha mobile UX standards including font sizes, spacing, touch targets, and interaction patterns from original mobazha-mobile. Use when creating or modifying mobile-responsive components, or when the user asks about mobile layout, spacing, touch behavior, "移动端", "手机端", "触摸", "间距".
Its SKILL.md is about 820 tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `reference.md`).
It sits in Mobile, covering Mobile UI design. It works with Tailwind CSS. The repository describes itself as: Open-source commerce frontend for storefronts, marketplaces, checkout, and seller management. The licence is MPL-2.0.
When your agent uses it
- Modifying mobile-responsive components
- The user asks about mobile layout
Example prompts
- “/mobile-ux-guide”
What it can do on your machine
Read from SKILL.md and the folder at commit 156c699. 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
Shell commands in SKILL.md call:
pnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.
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 UX Guide loads about 821 tokens when it runs. Until then it costs about 76 tokens; SKILL.md has 217 words of instructions outside code blocks.
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 mobazha/mobazha-unified at commit 156c699, republished under its MPL-2.0 licence (© mobazha). 217 words, ~821 tokens.
Download SKILL.mdSave it as
.claude/skills/mobile-ux-guide/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- mobile-ux-guide
- description
- Apply Mobazha mobile UX standards including font sizes, spacing, touch targets, and interaction patterns from original mobazha-mobile. Use when creating or modifying mobile-responsive components, or when the user asks about mobile layout, spacing, touch behavior, "移动端", "手机端", "触摸", "间距".
Mobile UX Guide
Ensure mobazha-unified mobile experience matches original mobazha-mobile.
Quick Reference
Font Sizes
| Element | Original RN | Tailwind | Usage |
|---|---|---|---|
| Large title | 28px | text-2xl | Me page header |
| Page title | 17-18px | text-lg | Standard page titles |
| Card title | 15-16px | text-base | List items, cards |
| Body text | 14-15px | text-sm | Main content |
| Secondary | 12-13px | text-xs | Timestamps, hints |
| Small label | 10px | text-[10px] | Badges, status |
Spacing (4px grid)
| Value | Tailwind | Usage |
|---|---|---|
| 4px | gap-1/p-1 | Minimal, icon padding |
| 8px | gap-2/p-2 | Icon-text gap |
| 12px | gap-3/p-3 | Standard card padding |
| 16px | gap-4/p-4 | Page margin, section gap |
| 24px | gap-6/p-6 | Section separator |
Component Sizes
| Component | Size | Tailwind |
|---|---|---|
| List avatar | 44x44px | w-11 h-11 |
| Profile avatar (large) | 60x60px | w-[60px] h-[60px] |
| Icon button | 32x32px | w-8 h-8 |
| Touch target min | 44x44pt | min-h-11 min-w-11 |
| List item height | 48-56px | h-12/h-14 |
Responsive Pattern
// Mobile compact, desktop normal
<Card className="p-3 md:p-4">
<h2 className="text-base md:text-lg">Title</h2>
<p className="text-sm md:text-base">Content</p>
</Card>Mobile Footer 规范
移动端不显示桌面 Footer，底部导航由 MobileNav 提供：
// Footer.tsx
<footer className="hidden md:block ...">
{/* 仅桌面端显示 */}
</footer>
// MobileNav.tsx — 移动端底部导航栏
<nav className="fixed bottom-0 md:hidden ...">
{/* Home, Search, Cart, Profile */}
</nav>主内容区需要底部留白避免被 MobileNav 遮挡：pb-24 lg:pb-8
Mobile Checklist
- Page title
text-lg, nottext-xl+ - Body text
text-sm, nottext-base - Card padding
p-3, notp-4+ - List item padding
py-2.5/py-3, notpy-4 - All touch targets min 44px
- Clickable elements have
active:feedback - Product grid uses 2-column layout
- No desktop Footer on mobile (
hidden md:block) - Content has
pb-24 lg:pb-8to clear MobileNav
移动端视觉测试
移动端有专门的 Playwright 视觉回归测试：
| 文件 | 设备 |
|---|---|
e2e/mobile-visual.spec.ts | Pixel 5 (Mobile Chrome) |
e2e/mobile-ux-audit.spec.ts | iPhone 12 (390×844) |
更新快照：pnpm --filter @mobazha/web exec playwright test mobile-visual --update-snapshots --project="Mobile Chrome"
For detailed interaction patterns and animations, see reference.md.
© mobazha, MPL-2.0. 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 .cursor/skills/mobile-ux-guide of mobazha/mobazha-unified.
- SKILL.md
- reference.md
Open the folder on GitHubat commit 156c699
Compare with similar skills
Mobile UX Guide 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Mobile UX Guide this skillmobazha/mobazha-unified | 165 | — | ~821 | Automated safety check: Pass | MPL-2.0 | |
| Mobile UX Optimizercuriositech/some_claude_skills | 243 | — | ~2.7k | Automated safety check: Notes | MIT | |
| Codedrobe ThemeCodeDrobe/skills | 250 | — | ~1.8k | Automated safety check: Pass | Apache-2.0 | |
| Mobile App UI Designceorkm/mobile-app-ui-design | 403 | — | ~2k | Automated safety check: Pass | None | |
| Sleek Design Mobile Appssleekdotdesign/agent-skills | 585 | — | ~2.1k | Automated safety check: Pass | MIT | |
| Atlaspacifio/ui | 154 | — | ~2.5k | Automated safety check: Pass | MIT |
Similar skills
Codedrobe Theme
CodeDrobe/skills
Create, inspect, convert, apply, replace, verify, troubleshoot, update, publish, or restore reversible CodeDrobe themes for supported Chromium/Electron AI desktop apps, including OpenAI Codex…
Mobile App UI Design
ceorkm/mobile-app-ui-design
Design high-quality mobile app UI/UX screens, flows, and components.
Sleek Design Mobile Apps
sleekdotdesign/agent-skills
Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML.
Atlas
pacifio/ui
Atlas — a design language and UI guide system for agent interfaces.
Weapp Tailwindcss Lynx
weapp-tailwindcss/weapp-tailwindcss
为 ReactLynx + Rspeedy 配置 @weapp-tailwindcss/lynx 0.3.2 与 Tailwind CSS 4，覆盖 Rspeedy plugin、Lynx 原生 CSS、静态 className、theme 变量静态化、任意值、encoder 警告和 iOS/Android 运行端验证。Use for ReactLynx, Rspeedy, Lynx…
More from mobazha/mobazha-unified
All 29 skills in this repoA11y Guide
mobazha/mobazha-unified
Accessibility guide for Mobazha following WCAG 2.1 AA standards including color contrast, reduced motion, ARIA patterns, keyboard navigation, focus management, and screen reader testing.
API Reference
mobazha/mobazha-unified
Look up Mobazha backend API endpoints, request/response formats, and field mappings.
Code Review
mobazha/mobazha-unified
Review code for quality, architecture consistency, and adherence to Mobazha project standards using confidence-based filtering.
Code Simplifier
mobazha/mobazha-unified
Simplify and refine recently written code for clarity, consistency, and maintainability while preserving all functionality.
Commit Helper
mobazha/mobazha-unified
Generate commit messages and run pre-commit validation following Mobazha conventions.
Component Dev
mobazha/mobazha-unified
Create and modify UI components following Mobazha conventions including directory structure, spacing standards, accessibility, and testing.
Related
Works with
Categories
Questions about Mobile UX Guide
What does Mobile UX Guide do?
Apply Mobazha mobile UX standards including font sizes, spacing, touch targets, and interaction patterns from original mobazha-mobile. Mobile UX Guide is an agent skill from mobazha/mobazha-unified. Apply Mobazha mobile UX standards including font sizes, spacing, touch targets, and interaction patterns from original mobazha-mobile.
When should I use Mobile UX Guide?
Mobile UX Guide fits situations like: modifying mobile-responsive components; the user asks about mobile layout.
How do I install Mobile UX Guide in Claude Code?
Run `npx skills add mobazha/mobazha-unified --skill mobile-ux-guide -a claude-code`. Or copy the skill folder (.cursor/skills/mobile-ux-guide in mobazha/mobazha-unified) into .claude/skills/mobile-ux-guide in your project. Claude Code loads it when a task matches its description.
How do I install Mobile UX Guide in Codex?
Run `npx skills add mobazha/mobazha-unified --skill mobile-ux-guide -a codex`. Or copy the skill folder (.cursor/skills/mobile-ux-guide in mobazha/mobazha-unified) into .agents/skills/mobile-ux-guide in your project. Codex loads it when a task matches its description.
Can I use Mobile UX Guide 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 mobazha/mobazha-unified --skill mobile-ux-guide -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-ux-guide, .gemini/skills/mobile-ux-guide, .github/skills/mobile-ux-guide and .opencode/skills/mobile-ux-guide in your project.
What does Mobile UX Guide need to run?
Going by SKILL.md and its folder, Mobile UX Guide needs the command-line tools its instructions call (pnpm).
Does Mobile UX Guide 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 UX Guide 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 UX Guide use?
Mobile UX Guide is published under the MPL-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Mobile UX Guide use?
About 821 tokens (SKILL.md is roughly 3.3k 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 UX Guide?
Skills that share tags, products or a category with Mobile UX Guide: Mobile UX Optimizer (curiositech/some_claude_skills, 243 stars), Codedrobe Theme (CodeDrobe/skills, 250 stars), Mobile App UI Design (ceorkm/mobile-app-ui-design, 403 stars) and Sleek Design Mobile Apps (sleekdotdesign/agent-skills, 585 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Mobile UX Guide?
mobazha (a GitHub organization) maintains it in mobazha/mobazha-unified, which has 165 GitHub stars. The repository holds 29 skills in this directory. The repository was last updated on October 3, 2026.
Source: mobazha/mobazha-unified on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.