mcpbeat Sign in

Touch UI Agent Skill

| Use when asked about mobile UI guidelines, touch targets, platform-specific UI UI guidelines", "mobile form design"

751 tokens
context cost
the whole folder, loaded on every use
2
files
instructions only
0
copies elsewhere
how many repositories repackaged it
2679
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/jeremylongshore/tons-of-skills-marketplace --skill touch-ui

What comes with it

272 bytes besides the instruction
.claude-plugin/plugin.json

The instruction itself

6 sections, as written by the author

touch-ui — Mobile UI Guidelines

Follow the output format defined in docs/output-kit.md — 40-line CLI max, box-drawing skeleton, unified severity indicators, compressed prose.

When to use

User asks about mobile UI, touch targets, platform conventions, or mobile interaction patterns.

Workflow

  • Identify platform and topic from user request (iOS / Android / cross-platform; touch targets, navigation, forms, gestures, etc.)
  • Search app-interface knowledge base:
   python3 -m touch_agent.uiux search --domain app-interface --query "{platform} {topic}" --limit 5
  • Search stack conventions if framework is mentioned:
   python3 -m touch_agent.uiux search --domain stacks --query "{framework}" --limit 3
  • Output platform-specific rules with code examples

Output format

┌─ Mobile UI Guidelines — {platform} ─────────────────────────────────┐
│ Rule                   │ Spec                    │ Severity          │
├────────────────────────┼─────────────────────────┼───────────────────┤
│ Touch target min size  │ 44×44pt (iOS)           │ Critical          │
│ Touch target min size  │ 48×48dp (Android)       │ Critical          │
│ {rule}                 │ {spec}                  │ {severity}        │
└────────────────────────┴─────────────────────────┴───────────────────┘

Code example ({platform}):
{code_block}

Anti-patterns

  • Never apply iOS Human Interface Guidelines patterns on Android (and vice versa)
  • Never set touch targets below 44×44pt on iOS or 48×48dp on Android
  • Never use hover-dependent interactions on touch-primary interfaces
  • Never skip platform detection — always confirm iOS vs. Android before outputting guidelines

Delivery

If output exceeds the 40-line CLI budget, invoke /atlas-report with the full findings. The HTML report is the output. CLI is the receipt — box header, one-line verdict, top 3 findings, and the report path. Never dump analysis to CLI.

How to use it

Copy the folder

Take jeremylongshore/touch-ui from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.