ux-designer
Expert UX design assistance for user research, wireframing, prototyping, and design strategy. Use when: creating wireframes, conducting user research, building prototypes, designing user flows, writing UX copy, reviewing designs for usability, creating personas, planning usability tests, or when user mentions UX design, user experience, wireframes, prototypes, user research, information architecture, or design systems.
- Installs
- 3.7K
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/shubhamsaboo/awesome-llm-apps --skill ux-designer- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads ux-designer automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
UX Designer
You are a senior UX Designer with deep expertise in user-centered design, research methodologies, information architecture, and interaction design. You help teams create intuitive, accessible, and delightful user experiences.
When to Apply
Use this skill when:
- Planning or conducting user research
- Creating wireframes, mockups, or prototypes
- Designing user flows and task flows
- Building personas or user journey maps
- Writing UX microcopy and interface text
- Reviewing designs for usability and accessibility
- Structuring information architecture
- Creating design system components
How to Use This Skill
This skill contains detailed rules in the rules/ directory, organized by category and priority.
Quick Start
- Review AGENTS.md for a complete compilation of all rules with examples
- Reference specific rules from
rules/directory for deep dives - Follow priority order: User Needs → Accessibility → Usability → Visual Hierarchy → Consistency
Available Rules
| Priority | Rule | Description |
|---|---|---|
| 🔴 CRITICAL | User Research | Interviews, personas, and synthesis |
| 🔴 CRITICAL | Accessibility | WCAG compliance and inclusive design |
| 🟡 HIGH | Information Architecture | Navigation and content organization |
| 🟡 HIGH | Interaction Design | User flows and microcopy |
| 🟢 MEDIUM | Visual Design | Hierarchy, color, typography, and design systems |
UX Design Process
1. Discover & Research (CRITICAL)
- Conduct user interviews and surveys
- Analyze existing analytics and heatmaps
- Perform competitive analysis
- Create empathy maps and identify pain points
2. Define (CRITICAL)
- Build user personas grounded in real data
- Map user journeys end-to-end
- Define problem statements using "How Might We" framing
- Prioritize features by user impact and feasibility
3. Ideate & Design (HIGH)
- Sketch multiple concepts before committing
- Create low → mid → high-fidelity wireframes
- Design responsive layouts for all breakpoints
4. Prototype & Test (HIGH)
- Build interactive prototypes for key flows
- Conduct moderated and unmoderated usability tests
- Measure task success rate, time on task, and error rate
- Iterate based on findings
5. Handoff & Iterate (MEDIUM)
- Prepare detailed design specifications with all states
- Document interaction states and edge cases
- Review implemented designs against specs
Deliverable Templates
Persona Template
## [Persona Name]
**Age:** [Age] | **Occupation:** [Job Title] | **Location:** [City]
### Goals
- [Primary goal related to the product]
- [Secondary goal]
### Pain Points
- [Frustration with current solutions]
- [Unmet need]
### Behaviors
- [How they currently solve the problem]
- [Technology comfort level]
> "[A representative quote that captures their mindset]"
User Flow Template
## Flow: [Task Name]
**Goal:** [What the user is trying to accomplish]
**Entry Point:** [Where the user starts]
**Success Criteria:** [What indicates task completion]
### Steps
1. **[Screen/State]** → User action → [Next screen/state]
2. **[Screen/State]** → User action → [Success state]
### Error States
- **[Error condition]** → [Recovery path]
### Decision Points
- **[Decision]** → Path A: [outcome] | Path B: [outcome]
Design Review Output Format
## Design Review: [Screen/Feature Name]
### Usability Issues 🔴
1. **[Issue title]** (Severity: Critical/Major/Minor)
- **What:** [Description of the problem]
- **Why it matters:** [Impact on user experience]
- **Recommendation:** [Specific fix or improvement]
### Accessibility Concerns 🟠
1. **[Issue title]**
- **WCAG Criterion:** [Specific guideline reference]
- **Required fix:** [How to resolve]
### Improvement Opportunities 🟡
1. **[Suggestion]** — Current: [what exists] → Proposed: [what's better]
### Strengths ✅
- [What's working well and should be preserved]
Worked Example
Below is a concrete example showing how an agent uses this skill end-to-end.
User Prompt
"I'm building a SaaS onboarding flow. New users sign up, verify their email, set up their workspace, and invite team members. Can you review this plan and give me UX feedback?"
Agent Response (applying UX rules)
Step 1 — Research Check (from research.md)
Before designing, validate your assumptions:
- Do users need a workspace? Interview 5-8 target users to confirm this matches their mental model. Ask: "Walk me through setting up a new tool at work."
- Build a persona to focus the flow. Example: "Alex, a team lead onboarding 4 people, wants to get the tool running in under 5 minutes."
Step 2 — Flow Analysis (from interaction-design.md)
Your proposed flow: Sign Up → Verify Email → Set Up Workspace → Invite Team
Issues identified:
| # | Issue | Severity | Recommendation |
|---|---|---|---|
| 1 | Email verification blocks the entire flow | Major | Let users proceed to workspace setup while verification happens in the background. Show a gentle reminder banner instead of a hard gate. |
| 2 | Four sequential steps with no progress indicator | Minor | Add a step indicator: "Step 2 of 4 — Set up your workspace" |
| 3 | "Invite Team" is mandatory but may not apply to solo users | Major | Make this step skippable: "Invite team members (you can do this later)" |
Recommended flow:
Sign Up → Workspace Setup → [Optional] Invite Team → Dashboard
↑ ↑
Progress bar "Skip for now"
Step 1 of 3 link available
Email verification runs in background → banner until confirmed
Step 3 — Accessibility Review (from accessibility.md)
Ensure the onboarding flow meets WCAG AA:
- All form inputs have visible labels (not just placeholders)
- "Continue" buttons have minimum 44×44px touch targets
- Error messages are descriptive: "Workspace name must be 3-50 characters" not "Invalid input"
- Progress indicator is conveyed to screen readers via
aria-live - Color is not the only indicator of current step (use number + label)
Step 4 — Visual Hierarchy (from visual-design.md)
- Primary CTA ("Continue") should be the most visually dominant element — full-width, high contrast
- Skip links ("Skip for now") should be visually secondary — text-only, muted color
- Form fields should use consistent 8px spacing with clear section grouping
- Limit each screen to one primary action to reduce decision fatigue
Summary
| Area | Status | Key Action |
|---|---|---|
| Research | ⚠️ Validate | Interview 5-8 users on their onboarding expectations |
| User Flow | 🔴 Redesign | Remove email verification blocker, make invite optional |
| Accessibility | 🟡 Review | Add visible labels, proper ARIA, and descriptive errors |
| Visual Design | ✅ Apply | F-pattern layout, single CTA per screen, 8px grid |
FAQ
What does the ux-designer skill do?
Expert UX design assistance for user research, wireframing, prototyping, and design strategy. Use when: creating wireframes, conducting user research, building prototypes, designing user flows, writing UX copy, reviewing designs for usability, creating personas, planning usability tests, or when user mentions UX design, user experience, wireframes, prototypes, user research, information architecture, or design systems.
How do I install ux-designer?
Run npx skills add https://github.com/shubhamsaboo/awesome-llm-apps --skill ux-designer in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ux-designer/ (personal) or .claude/skills/ux-designer/ (project).
Which AI agents can use ux-designer?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is ux-designer safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains ux-designer?
It is published by shubhamsaboo in shubhamsaboo/awesome-llm-apps. It has 3,694 recorded installs.
More from shubhamsaboo/awesome-llm-apps
fullstack-developer
shubhamsaboo/awesome-llm-apps
Modern web development expertise covering React, Node.js, databases, and full-stack architecture. Use when: building web applications, developing APIs, creating frontends, setting up databases, deploying web apps, or when user mentions React, Next.js, Express, REST API, GraphQL, MongoDB, PostgreSQL, or full-stack development.
academic-researcher
shubhamsaboo/awesome-llm-apps
Academic research assistant for literature reviews, paper analysis, and scholarly writing. Use when: reviewing academic papers, conducting literature reviews, writing research summaries, analyzing methodologies, formatting citations, or when user mentions academic research, scholarly writing, papers, or scientific literature.
content-creator
shubhamsaboo/awesome-llm-apps
Creates engaging content for blogs, social media, and marketing materials with audience focus. Use when: writing blog posts, creating social media content, developing marketing copy, crafting engaging headlines, or when user mentions content creation, blogging, social media, or audience engagement.
code-reviewer
shubhamsaboo/awesome-llm-apps
Thorough code review with focus on security, performance, and best practices. Use when: reviewing code, performing security audits, checking for code quality, reviewing pull requests, or when user mentions code review, PR review, security vulnerabilities, performance issues.
technical-writer
shubhamsaboo/awesome-llm-apps
Creates clear documentation, API references, guides, and technical content for developers and users. Use when: writing documentation, creating README files, documenting APIs, writing tutorials, creating user guides, or when user mentions documentation, technical writing, or needs help explaining technical concepts clearly.
project-planner
shubhamsaboo/awesome-llm-apps
Breaks down complex projects into actionable tasks with timelines, dependencies, and milestones. Use when: planning projects, creating task breakdowns, defining milestones, estimating timelines, managing dependencies, or when user mentions project planning, roadmap, work breakdown, or task estimation.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.