██╗   ██╗██╗    ██╗   ██╗██╗  ██╗
██║   ██║██║    ██║   ██║╚██╗██╔╝
██║   ██║██║    ██║   ██║ ╚███╔╝
██║   ██║██║    ██║   ██║ ██╔██╗
╚██████╔╝██║    ╚██████╔╝██╔╝ ██╗
 ╚═════╝ ╚═╝     ╚═════╝ ╚═╝  ╚═╝
██████╗ ███████╗███████╗██╗ ██████╗ ███╗   ██╗███████╗██████╗
██╔══██╗██╔════╝██╔════╝██║██╔════╝ ████╗  ██║██╔════╝██╔══██╗
██║  ██║█████╗  ███████╗██║██║  ███╗██╔██╗ ██║█████╗  ██████╔╝
██║  ██║██╔══╝  ╚════██║██║██║   ██║██║╚██╗██║██╔══╝  ██╔══██╗
██████╔╝███████╗███████║██║╚██████╔╝██║ ╚████║███████╗██║  ██║
╚═════╝ ╚══════╝╚══════╝╚═╝ ╚═════╝ ╚═╝  ╚═══╝╚══════╝╚═╝  ╚═╝

📱 UI UX Designer

Mobile-first UI and UX design skills that also work on tablet and desktop, for designers, developers and their agents.

imageValidate skills imageLicense: MIT imageAgent skills imageFormat imageTooling

Table of contents:

• Skills
• How they fit together
• Install
• Usage
• Validate
• Layout
• Status and limits

Important

Principle: design for the smallest screen, the thumb and the slowest moment first, then add space for larger screens without removing function, and never trade accessibility for looks.

These skills help an agent design, review and document interfaces for phones first, then tablets and desktops. They are grounded in Apple's Human Interface Guidelines, Android and WCAG 2.2 guidance, Nielsen Norman Group research, and the Toptal and Mockflow mobile UX articles, and every number is attributed to its source. They follow the open Agent Skills format and work in Claude Code, Codex, Cursor, Copilot, OpenCode or any SKILL.md-compatible agent.

🧩 Skills

🗺️ How they fit together

flowchart TD
    R["📱 ui-ux-designer<br/>routes and enforces mobile-first guardrails"]
    R --> F["🎯 mobile-ux-foundations<br/>research, priorities, constraints"]
    R --> L["📐 adaptive-layout-and-spacing<br/>hierarchy, safe areas, size classes"]
    R --> N["🧭 navigation-and-flows<br/>IA, tab bars, sheets, gestures"]
    R --> I["💬 interaction-feedback-and-forms<br/>feedback, forms, states, motion"]
    R --> V["🎨 visual-design-system<br/>type, colour, dark mode, tokens"]
    R --> A["♿ accessible-design<br/>targets, contrast, WCAG 2.2"]
    R --> D["📝 ux-documentation-and-handoff<br/>personas, specs, hand-off"]
    R --> T["✅ ux-review-and-testing<br/>heuristics, usability tests"]

A typical project runs foundations first, then layout and navigation, then interaction and visual design, with accessibility checked throughout, documentation written as decisions settle, and review before release.

📦 Install

Tip

Install the router skill plus every sibling skill it links to; routers reference siblings by relative path.

Claude Code plugin (installs the skills and any agent profiles together):

/plugin marketplace add KinwiseNZ-DevOps/ui-ux-designer
/plugin install ui-ux-designer@ui-ux-designer-marketplace

Or copy or symlink the skills/ subfolders you want into your agent's skills directory:

Always on

In Claude Code, UI UX Designer loads a short ruleset into sessions in app and UI projects once the plugin is installed. It enforces mobile first, source-attributed target sizes and contrast, full state specs and gesture alternatives. It tells you its state at the start of each session and costs roughly 450 tokens.

• Say "stop design mode" to pause it for the current session, and "start design mode" to resume.
• Ask Claude to set the saved mode to on, off or auto. It writes that word into ~/.claude/.ui-ux-designer.mode. You can also edit that file yourself, and deleting it returns to the default (auto).
• It needs Node on the machine, because the start-up hook runs a small Node script. Without Node the hook quietly does nothing.
• Other agents have no start-up hook here. Paste skills/ui-ux-designer/references/always-on-rules.md into that agent's instruction file instead.

Safety checks

The same hooks run a few checks while you work. Each one only asks, warns or adds a reminder; none changes your files on its own.

Switch any check with ~/.claude/.ui-ux-designer.features.json, for example {"packageGuard": false, "sessionLog": true}, or ask Claude to write it. The saved mode (on, off or auto) applies to every check. If several of these plugins are installed, each risky action is checked once, not once per plugin.

Privacy: packageGuard and licenseGuard send package names, and linkGuard sends the links it checks, to the public registry or site. Nothing else leaves your machine. Turn those checks off if that is a concern.

🚀 Usage

Tip

You never need to memorise skill names. Just describe the problem in plain words; the router picks the right skill automatically. But if you want short, reliable phrases that always work, use these:

The flow (this is all most people need):

1. "Plan the core flow for my app"            → foundations, then navigation and flows
2. "Design the settings screen for phone and tablet"   → layout, interaction and visual skills
3. "Review this flow for usability"             → ux-review-and-testing, with accessible-design

Short phrases that trigger each skill:

Note

Skills also trigger on their own when your request matches. In Claude Code you can also invoke one explicitly with /<skill-name>, but the plain phrases above are shorter and work across every agent.

✅ Validate

python scripts/skills_tool.py check

Checks: frontmatter, name/folder match, description length and trigger, body under 500 lines, every relative link resolves (including README.md and AGENTS.md), agent profile naming with no more than two profiles per host and exactly one -workflow main agent, agent skills: entries that exist and no skills/<name>/SKILL.md paths in agent bodies, plugin manifests (.claude-plugin/plugin.json and marketplace.json: required fields, licence matches LICENSE, agents lists every Claude Code profile, no top-level agents/ folder), at least 3 eval cases per skill, catalogue freshness, no project-specific terms from reference-content/strip-terms.txt, and no em or en dashes in file names or in any text outside reference-content/. After the starter skill is deleted it also rejects leftover placeholders and setup-only paths that are tracked by Git or not ignored. Stdlib only, no dependencies.

🗂️ Layout

Repository layout

skills/<name>/SKILL.md      one folder per skill (+ references/ where needed)
CHANGELOG.md                release notes; scripts/bump_version.py rolls them
.claude-plugin/             plugin.json and marketplace.json (Claude Code plugin)
plugin.json                 portable plugin manifest for Codex
.agents/plugins/            marketplace.json for Codex
hooks/                      always-on rules and safety checks for Claude Code
evals/cases.jsonl           3+ behavioural cases per skill
evals/triggers.jsonl        triggering tests per skill: obvious, paraphrase, unrelated
quality/evals/              the same cases exported for `claude plugin eval` (generated)
resources/agents/             optional host profiles copied by installer
scripts/install_agents.py     copy optional agent profiles into a project
scripts/skills_tool.py      validate, regenerate catalogue (stdlib only)
.github/workflows/          CI runs `skills_tool.py check` (free on public repos)
AGENTS.md                   agent-facing rules for this repo
SETUP.md                    local checklist; ignored and kept off GitHub
reference-content/          private source material; ignored and kept off GitHub
templates/                  local skill scaffolding; ignored and kept off GitHub

📌 Status and limits

Note

• 26 October 2026: guidance is design advice, not a legal accessibility conformance claim; the skills state which criteria were checked.
• 26 October 2026: one requested article (Medium) returned HTTP 403 and Material Design 3 pages could not be read; Android developer pages stand in for Material guidance.
• Licensed under MIT (see LICENSE).

⚡ Built on the Agent Skills open format · grounded in Apple HIG, WCAG 2.2 and Android design