ui-mobile
by alinaqiui-mobile is a practical guide for mobile UI Design in React Native and adjacent iOS/Android codebases. It focuses on accessible touch targets, contrast, and interaction rules so you can build safer screens, review components, and improve mobile usability with less guesswork.
This skill scores 68/100, which is an acceptable but limited listing: it gives directory users enough signal to install for mobile UI work, but they should expect a rules-heavy guide rather than a highly automated, self-contained workflow. The repository is clear about when to use it and what standards it enforces, but it lacks companion scripts or reference files that would make triggering and adoption even easier.
- Clear mobile-focused trigger: the frontmatter says it applies to mobile UI components with paths for .tsx, .jsx, ios, android, and .dart files.
- Strong operational guidance: the body includes mandatory accessibility standards such as 44x44 touch targets and WCAG 2.1 AA contrast rules.
- Substantial instruction depth: the skill body is large, structured with many headings, and contains concrete code examples and constraints rather than placeholder text.
- No install command, scripts, or support files, so agents must rely on the markdown instructions alone.
- The skill is scoped to mobile UI patterns and accessibility; it is not a broad general-purpose mobile app workflow.
Overview of ui-mobile skill
What the ui-mobile skill is for
The ui-mobile skill is a practical guide for building mobile UI that works in real apps, especially React Native and adjacent mobile codebases. It is aimed at contributors who need faster, safer decisions on touch targets, contrast, and mobile interaction patterns for UI Design, not just visual polish.
Who should use it
Use the ui-mobile skill if you are designing or revising screens for iOS/Android, reviewing a mobile component library, or turning a rough product idea into mobile-ready UI. It is most useful when you need a promptable standard for accessibility and interaction details that are easy to miss in a generic design prompt.
What makes it different
The repo is opinionated where it matters: minimum touch sizes, WCAG contrast expectations, and visible interaction rules are treated as constraints, not suggestions. That makes ui-mobile better for install decisions when your main risk is shipping attractive but unusable mobile UI.
How to Use ui-mobile skill
Install and activate it
Install the ui-mobile skill with the project’s skill manager, then point it at the mobile UI task you want completed. A typical ui-mobile install is most valuable when the task is specific, such as “redesign this form for thumb use” or “review these buttons for accessibility.”
Give it the right input shape
The best inputs describe platform, screen context, component type, and constraints. For example, instead of “make this mobile UI better,” say: “Improve this React Native checkout screen for one-handed use, keep the current brand colors if contrast allows, and fix any touch target or visibility issues.” That level of detail helps the ui-mobile skill produce usable UI Design guidance instead of generic suggestions.
Read the right files first
Start with SKILL.md to understand the enforced rules, then inspect any project prompts or related guidance your repo uses. In this repository, the file tree is sparse, so SKILL.md is the main source of truth for ui-mobile usage; there are no supporting scripts or reference folders to rely on.
Apply the constraints in your workflow
Treat touch target size and contrast as gating checks before layout refinement. If you are asking the model to generate code, include the platform and component type, then ask it to verify minimum hit areas, readable text, and visible state changes. A strong prompt for ui-mobile usage should ask for both the UI and the reason each mobile constraint is satisfied.
ui-mobile skill FAQ
Is ui-mobile only for React Native?
No. The skill is centered on React Native, but the rules are relevant to iOS/Android UI work more broadly. If your stack is Flutter or another mobile framework, the ui-mobile skill can still help with accessibility and interaction decisions, but you should adapt the output to your framework.
When should I not use this skill?
Do not use ui-mobile if your task is desktop-first, content-only, or unrelated to interactive mobile UI. It is also a poor fit if you want pure brand exploration without enforcing mobile usability constraints.
Is this better than a normal prompt?
Usually yes, if the risk is mobile usability regressions. A normal prompt may produce acceptable aesthetics, but the ui-mobile skill pushes the model toward constraints that matter in production: reachable controls, readable text, and mobile-specific visibility rules.
Is it beginner-friendly?
Yes, if you can describe the screen and the problem. Beginners get the most value when they ask for one component or one screen at a time and include the current UI, the target device behavior, and any locked design tokens.
How to Improve ui-mobile skill
Lead with the hardest requirement
The biggest gains come from stating the thing that is most likely to fail. For ui-mobile, that is often touch target size, contrast, or cramped layout. If you say “preserve the design, but make every tap target at least 44x44 and keep text WCAG AA compliant,” the output is usually much more actionable.
Provide platform-specific context
Mobile UI behaves differently on iOS and Android, and the skill works better when you name the target. A prompt like “iOS bottom sheet for account actions” gives better ui-mobile results than “mobile modal,” because spacing, safe areas, and interaction expectations are clearer.
Ask for checks, not just output
The best ui-mobile results include a self-review pass. Ask for a short validation list such as: “confirm every interactive element meets minimum touch size, identify any contrast risks, and flag elements that may be hidden behind the keyboard or system UI.” This reduces the chance of accepting a visually polished but fragile design.
Iterate on concrete failures
If the first pass is close but not good enough, respond with specific defects: “the secondary button is too small,” “icon labels are too low contrast,” or “the form is hard to use with one hand.” That gives the ui-mobile skill a better correction target than asking it to “improve mobile usability” again.