Ux Designer
Run research-first UX discipline—interviews, personas, WCAG AA, and inclusive patterns—before and alongside UI work in agent-driven product builds.
Overview
UX Designer is a journey-wide agent skill that enforces research-first UX, WCAG AA accessibility, and inclusive design—usable whenever a solo builder needs to validate flows and UI decisions before committing to pixels o
Install
npx skills add https://github.com/shubhamsaboo/awesome-llm-apps --skill ux-designerWhat is this skill?
- Priority 1 user research: open-ended interviews, 5 Whys, affinity mapping—not anecdotes
- Personas limited to 3–5 primary, grounded in data with goals, pain points, behaviors, context
- Priority 2 WCAG AA: 4.5:1 text contrast, 44×44px touch targets, keyboard and focus requirements
- Inclusive design: one-handed mobile, light/dark support, semantic HTML with restrained ARIA
- Anti-patterns called out: demographic-only personas, aspirational personas, stale persona sets
- WCAG AA 4.5:1 text contrast and 3:1 large text
- 44×44px minimum touch targets
- 3–5 primary personas per product
Adoption & trust: 3.1k installs on skills.sh; 114k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are about to design or ship screens without interviewed-user evidence, accessible contrast, or keyboard-ready flows—and your agent defaults to generic UI guesses.
Who is it for?
Solo founders and indie builders who want agent-guided UX rigor from discovery through frontend build without hiring a full research team.
Skip if: Pure backend-only services with no UI, or teams that already have signed-off research artifacts and only need pixel-perfect Figma execution.
When should I use this skill?
Before opening design tools or implementing UI whenever research, personas, accessibility, or inclusive layout decisions are still implicit.
What do I get? / Deliverables
Agent outputs follow prioritized research and accessibility rules so personas, flows, and UI specs meet WCAG AA targets and inclusive patterns before implementation.
- Research-backed persona set (3–5)
- WCAG AA-aligned UI guidance and anti-pattern checks
- Interview and affinity-mapping synthesis themes
Recommended Skills
Journey fit
Useful at every journey phase - explore requirements and options before committing to a direction.
Where it fits
Agent structures interviews and 5 Whys before you commit to a problem statement or feature list.
Define 3–5 evidence-based personas and journey scope before prototyping checkout or dashboard flows.
Apply WCAG contrast and touch-target rules while sketching clickable MVP screens.
Enforce semantic HTML, focus states, and error copy while generating components.
Review landing and onboarding pages for perceivable, operable patterns before traffic hits.
How it compares
Rule-based UX methodology for agents—not a component library generator, analytics MCP, or automated usability testing SaaS.
Common Questions / FAQ
Who is ux-designer for?
Product-minded solo builders and small teams using coding agents who need structured UX research, personas, and WCAG-aligned UI guidance.
When should I use ux-designer?
At Idea research and Validate scope/prototype before Figma or code; during Build frontend for accessibility checks; at Launch distribution when polishing onboarding and marketing UI; and in Grow content when shaping readable, inclusive layouts.
Is ux-designer safe to install?
It is documentation and rules without shell or network side effects; still review the Security Audits panel on this page like any third-party skill.
SKILL.md
READMESKILL.md - Ux Designer
# UX Designer — Complete Agent Rules This document compiles all rules, guidelines, and best practices for the UX Designer skill, organized by priority. --- ## Priority 1: User Research (CRITICAL) > Full details: [rules/research.md](rules/research.md) ### Conducting User Interviews - Always start with research before opening a design tool - Use open-ended questions: *"Walk me through the last time you [did the task]"* - Follow the "5 Whys" technique to uncover root motivations - Synthesize findings into themes using affinity mapping, not individual anecdotes ### Creating Effective Personas - Base on real research data, never assumptions - Limit to 3-5 primary personas per product - Include goals, pain points, behaviors, and context - Update as you learn more about users **Anti-Patterns:** Demographic-only personas · Aspirational personas · Too many personas · Stale personas --- ## Priority 2: Accessibility (CRITICAL) > Full details: [rules/accessibility.md](rules/accessibility.md) ### WCAG AA Requirements - **Perceivable:** Color contrast 4.5:1 for text, 3:1 for large text; alt text for images; captions for video - **Operable:** Full keyboard access; 44×44px touch targets; visible focus states; no seizure triggers - **Understandable:** Visible form labels; descriptive error messages; consistent navigation - **Robust:** Semantic HTML; ARIA only when needed; screen reader compatible ### Inclusive Design - Design for one-handed mobile use - Support light/dark modes and 200% zoom - Use plain language (6th-8th grade reading level) - Never use color as the only indicator of meaning - Design for RTL languages and text expansion --- ## Priority 3: Information Architecture (HIGH) > Full details: [rules/information-architecture.md](rules/information-architecture.md) ### Navigation - Limit primary navigation to 5-7 items - Group by user mental models, not org charts - Use breadcrumbs for hierarchies deeper than 2 levels - Mobile: bottom nav for 3-5 primary actions; hamburger for secondary only ### Content Organization - **Progressive disclosure:** Show only what's needed; reveal details on demand - **Scannability:** Clear headings, short paragraphs, visual breaks - Place the most important content in high-visibility areas - Validate labels with card sorting and tree testing --- ## Priority 4: Interaction Design (HIGH) > Full details: [rules/interaction-design.md](rules/interaction-design.md) ### User Flows - Map the happy path first, then errors and edge cases - Minimize steps; provide progress indicators for 3+ step flows - Allow going back without losing data; auto-save when possible - Confirm destructive actions with specific consequences ### Microcopy - Use specific verbs for buttons: "Save Draft", "Create Account" (not "Submit", "OK") - Error messages: explain what happened AND how to fix it - Confirmation dialogs: asymmetric labels ("Delete Project" / "Keep Project", not "Yes" / "No") - Empty states: explain why it's empty and what to do **Common flow problems:** Dead ends · Loops · Forced registration before value · Missing error recovery --- ## Priority 5: Visual Design (MEDIUM) > Full details: [rules/visual-design.md](rules/visual-design.md) ### Visual Hierarchy 1. **Size** — larger elements attract attention first 2. **Contrast** — high contrast for key actions 3. **Color** — saturated for emphasis, muted for secondary 4. **Position** — top-left scanned first (LTR); F-pattern / Z-pattern 5. **Whitespace** — isolation creates emphasis ### Design System Essentials - **Color:** Primary, secondary, neutral, semantic (success/error/warning/info) - **Typography:** 3-4 sizes per screen, consistent scale ratio - **Spacing:** 8px base grid applied consistently - **Components:** Document purpose, states, variants, responsive behavior, accessibility --- ## Cross-Functional Collaboration ### Working with Product Managers - Share research findings early; align on user needs vs. business goals - Use data to supp