# Ux Design > User research, interaction patterns, information architecture, and UX methods. Defines the five-plane model, user flows, UX laws, and validation methods for user-centered digital products. - **Type:** Skill - **Install:** `agentstack add skill-flitzrrr-frontend-design-skills-ux-design` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [flitzrrr](https://agentstack.voostack.com/s/flitzrrr) - **Installs:** 0 - **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [flitzrrr](https://github.com/flitzrrr) - **Source:** https://github.com/flitzrrr/frontend-design-skills/tree/main/skills-src/ux-design ## Install ```sh agentstack add skill-flitzrrr-frontend-design-skills-ux-design ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # UX Design > Systematically designing user experiences -- from strategy to validated interaction. ## Scope Use this skill when: You are planning user research, creating personas, defining information architectures, documenting user flows, designing interaction patterns, or auditing existing products for UX quality. ## Principles ### 1. The User Determines the Design -- Not the Designer Every design decision is based on real user data. Assumptions without validation are speculation. ### 2. Design Experiences, Not Surfaces UX encompasses the entire interaction -- from first perception to long-term usage. ### 3. Simplicity Beats Completeness One feature that everyone understands is more valuable than ten features that nobody can find. ### 4. Emotions Are Measurable Success Factors Positive experiences generate trust and return visits. UX is directly business-critical. ### 5. Iteration Over Perfection Rapid prototyping, early testing, and continuous improvement beats extended planning phases. ## Rules ### The 5 Planes of User Experience (Garrett Model) - **DO**: Work from bottom to top: Strategy > Scope > Structure > Skeleton > Surface. - **DO**: At Plane 1 (Strategy), define: Who are the users? What are their goals? What are the business objectives? - **DO**: At Plane 2 (Scope), prioritize features by user need, not by stakeholder wishes. - **DON'T**: Jump directly to visual design (Plane 5) without defining the underlying planes. ### User Research - **DO**: Conduct at least 5 user interviews or usability tests BEFORE design. - **DO**: Create data-driven personas: name, demographics, goals, pain points, context. - **DO**: Use empathy maps as a quick format: What does the user think, feel, say, and do? - **DON'T**: Create personas based on team assumptions. At least 3 real data points per persona. - **DON'T**: Test only with colleagues. Always test with the actual target audience. ### Information Architecture (IA) - **DO**: Structure content according to the users' mental model, not the organizational structure. - **DO**: Conduct card sorting to validate the content structure. - **DO**: Keep navigation depth shallow: max. 3 clicks to reach target content. - **DO**: Label navigation items in user language, not in industry jargon. - **DON'T**: Use mega-menus with more than 7 main categories (Miller's Law: 7 +/- 2). ### Interaction Design - **DO**: Provide immediate feedback on every action (max. 400ms without feedback). - **DO**: Make error handling helpful: WHAT went wrong and HOW to fix it. - **DO**: Provide undo capability for destructive actions (min. 5-second undo window). - **DO**: Reduce decisions per page (Hick's Law). - **DON'T**: Show error messages only after form submission. Inline validation is the standard. - **DON'T**: Use confirmation dialogs for trivial actions. Only for irreversible actions. ### UX Laws - **DO**: Fitts' Law -- Touch targets at least 44x44px, close to the expected location. - **DO**: Jakob's Law -- Follow established conventions (users know other websites). - **DO**: Doherty Threshold -- System responses under 400ms feel instantaneous. - **DO**: Postel's Law -- Be liberal in what you accept, strict in what you produce. ### User Flows - **DO**: Define the primary flow (happy path) + at least 2 alternative paths. - **DO**: Document flows as flowcharts with decision points. - **DO**: Validate flows with real users before creating wireframes. - **DON'T**: Create flows that lead to dead ends (pages without a next action or a way back). ## Patterns Detailed pattern descriptions: see `references/patterns.md` ### Progressive Disclosure Show only the essentials at the first level. Details behind "Learn more." Multi-step forms instead of one long form. ### Onboarding Flow Max. 3-5 steps. Progress indicator visible. Skip option. After completion: direct access to core value. ### Search-Centric Design Prominent search bar. Autocomplete with instant results. Filter options. Zero-results page with alternatives. ### Feedback Loop Visual feedback (hover, active), system feedback (loading indicator), result feedback (success message). ### Empty States Never leave blank areas. Always: explanation + call to action + appropriate visual. ## Anti-Patterns ### Feature Creep Ever more features without validation. **Solution**: Every feature needs validated user demand. Under 20% usage = remove or hide. ### Assumption-Driven Design "I think the user wants..." **Solution**: At least 3 data points per key decision. ### The Happy Path Only Designing only for the ideal case. **Solution**: Define and design at least 3 error scenarios per flow. ### Cognitive Overload Too many options per page. **Solution**: Miller's Law (7 +/- 2). One page = one primary goal. ### Ignoring Context Same UX across all devices. **Solution**: Design context-dependently (mobile: on the go, one hand; desktop: more attention). ## Checklist - [ ] Strategy plane defined: user goals and business objectives documented? - [ ] At least 3 data-driven personas created? - [ ] User flows documented (happy path + edge cases)? - [ ] Information architecture validated (card sorting or tree testing)? - [ ] Navigation labels in user language (no internal jargon)? - [ ] Navigation depth max. 3 levels? - [ ] Immediate feedback on every action (under 400ms)? - [ ] Error handling helpful (WHAT + HOW)? - [ ] Undo for destructive actions? - [ ] Inline validation on forms? - [ ] Empty states with explanation and call to action? - [ ] Touch targets at least 44x44px? - [ ] Max. 7 main navigation items? - [ ] No feature without validated user demand? ## Cross-References - `ui-design` -- Visual implementation of UX concepts - `accessibility` -- Inclusive design as a UX cornerstone - `usability` -- Testing methods and heuristics - `navigation-design` -- IA implementation in navigation structures - `customer-journey` -- UX in the overall context of the user journey - `design-process` -- UX methods in the project workflow - `landing-pages` -- Conversion-optimized UX patterns ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [flitzrrr](https://github.com/flitzrrr) - **Source:** [flitzrrr/frontend-design-skills](https://github.com/flitzrrr/frontend-design-skills) - **License:** MIT Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-flitzrrr-frontend-design-skills-ux-design - Seller: https://agentstack.voostack.com/s/flitzrrr - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.