diff --git a/awesome_agent_skills/ux-designer/AGENTS.md b/awesome_agent_skills/ux-designer/AGENTS.md new file mode 100644 index 0000000..ddb7fdf --- /dev/null +++ b/awesome_agent_skills/ux-designer/AGENTS.md @@ -0,0 +1,125 @@ +# 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 support design decisions in priority discussions + +### Working with Developers +- Provide detailed specs with all states and edge cases +- Be available during implementation; review against specs before release + +### Working with Stakeholders +- Present design rationale, not just deliverables +- Use prototypes to make abstract ideas concrete + +--- + +## Tools & Workflow + +### Recommended Tools (2025-2026) +- **Design:** Figma (primary), Sketch (macOS) +- **Prototyping:** Figma prototyping, ProtoPie +- **Research:** Maze, UserTesting, Lookback +- **Analytics:** Hotjar, FullStory, Google Analytics diff --git a/awesome_agent_skills/ux-designer/SKILL.md b/awesome_agent_skills/ux-designer/SKILL.md new file mode 100644 index 0000000..e08ebbe --- /dev/null +++ b/awesome_agent_skills/ux-designer/SKILL.md @@ -0,0 +1,213 @@ +--- +name: ux-designer +description: | + 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. +license: MIT +metadata: + author: awesome-llm-apps + version: "1.1.0" +--- + +# 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 + +1. **Review [AGENTS.md](AGENTS.md)** for a complete compilation of all rules with examples +2. **Reference specific rules** from `rules/` directory for deep dives +3. **Follow priority order**: User Needs → Accessibility → Usability → Visual Hierarchy → Consistency + +### Available Rules + +| Priority | Rule | Description | +|----------|------|-------------| +| 🔴 CRITICAL | [User Research](rules/research.md) | Interviews, personas, and synthesis | +| 🔴 CRITICAL | [Accessibility](rules/accessibility.md) | WCAG compliance and inclusive design | +| 🟡 HIGH | [Information Architecture](rules/information-architecture.md) | Navigation and content organization | +| 🟡 HIGH | [Interaction Design](rules/interaction-design.md) | User flows and microcopy | +| 🟢 MEDIUM | [Visual Design](rules/visual-design.md) | 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 + +```markdown +## [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 + +```markdown +## 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 + +```markdown +## 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](rules/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](rules/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](rules/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](rules/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 | + +--- diff --git a/awesome_agent_skills/ux-designer/rules/accessibility.md b/awesome_agent_skills/ux-designer/rules/accessibility.md new file mode 100644 index 0000000..671406c --- /dev/null +++ b/awesome_agent_skills/ux-designer/rules/accessibility.md @@ -0,0 +1,75 @@ +# Rule: Accessibility & Inclusive Design + +**Priority:** CRITICAL +**Category:** Accessibility + +## Description + +Accessible design is a legal requirement in many jurisdictions and a moral imperative. Inclusive design goes further — proactively considering the full range of human diversity (ability, language, culture, context) so that experiences work for everyone. + +## WCAG AA Requirements (Minimum Standard) + +### Perceivable +- **Color contrast:** 4.5:1 for normal text, 3:1 for large text (18px bold or 24px+) +- **Text alternatives:** All images have descriptive alt text; decorative images use `alt=""` +- **Captions:** Video content includes synchronized captions +- **Adaptable:** Content meaning preserved when CSS is disabled or layout changes + +### Operable +- **Keyboard accessible:** Every interactive element reachable and usable via keyboard +- **Focus visible:** Focus indicators clearly visible (minimum 2px, high contrast) +- **Skip links:** Provide "Skip to main content" for keyboard users +- **Touch targets:** Minimum 44×44 CSS pixels for touch interfaces +- **No time traps:** Users can extend or disable time limits +- **No seizure triggers:** No content flashes more than 3 times/second + +### Understandable +- **Labels:** All form inputs have visible, associated labels +- **Error identification:** Errors described in text, not just color +- **Error prevention:** Confirm destructive actions; allow undo +- **Consistent navigation:** Same navigation order across pages +- **Language:** Page language declared in HTML (`lang` attribute) + +### Robust +- **Semantic HTML:** Use proper elements (`