Merge pull request #519 from dileeppandey/feat/ux-designer

feat: Add UX Designer skill including comprehensive design rules and agent definitions.

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

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 |
+
+---

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 (`<button>`, `<nav>`, `<main>`, `<header>`)
+- **ARIA:** Use ARIA roles only when semantic HTML is insufficient
+- **Compatibility:** Test with at least 2 screen readers (VoiceOver, NVDA)
+
+## Inclusive Design Patterns
+
+### Motor & Physical
+- Design for one-handed mobile use (key actions within thumb reach)
+- Provide generous tap targets (minimum 44×44px, ideally 48×48px)
+- Avoid hover-only interactions (no hover on touch devices)
+
+### Visual
+- Never use color as the only means of conveying information
+- Support both light and dark modes
+- Allow text resizing up to 200% without layout breakage
+
+### Cognitive
+- Use plain language (6th-8th grade reading level for general audiences)
+- Break complex tasks into smaller, clearly labeled steps
+- Minimize choices per screen to reduce cognitive load
+
+### Situational & Cultural
+- Design for poor network conditions (offline states, loading indicators)
+- Design layouts supporting RTL languages and text expansion (30-40% more space)
+- Avoid culturally specific metaphors or color meanings
+
+## Testing Checklist
+
+- [ ] Automated audit (Axe, Lighthouse)
+- [ ] Keyboard-only navigation (Tab, Enter, Escape, Arrow keys)
+- [ ] Screen reader walkthrough (VoiceOver or NVDA)
+- [ ] Zoom to 200% — no content loss or overlap
+- [ ] High contrast mode — all content remains visible
+- [ ] Reduced motion preference — animations disabled or reduced
+
+## Common Mistakes
+- Using `<div>` and `<span>` for interactive elements instead of `<button>` and `<a>`
+- Hiding focus outlines with `outline: none` without providing an alternative
+- Relying on placeholder text as the only label for form fields
+- Using color alone to indicate errors, status, or required fields
+- Assuming all users have a mouse and precise cursor control
+- Testing only with the latest devices and fast internet

awesome_agent_skills/ux-designer/rules/information-architecture.md

@@ -0,0 +1,62 @@
+# Rule: Information Architecture
+
+**Priority:** HIGH
+**Category:** Information Architecture
+
+## Description
+
+Information architecture determines how content is structured, labeled, and navigated. If users can't find it, it doesn't exist.
+
+## Navigation Structure
+
+### Core Principles
+- Limit primary navigation to 5-7 items
+- Use clear, descriptive labels (nouns for sections, verbs for actions)
+- Group by user mental models, not org charts
+- Validate labels with card sorting and tree testing
+- Provide breadcrumbs for hierarchies deeper than 2 levels
+
+### Navigation Patterns
+- **Top bar:** Best for 3-7 primary sections on desktop
+- **Side nav:** Best for deep hierarchies or tools with many sections
+- **Bottom bar:** Best for mobile apps with 3-5 primary actions
+- **Hamburger menu:** Use sparingly; hides navigation and reduces discoverability
+- **Tabs:** Best for switching between related views at the same level
+
+### Mobile Considerations
+- Use bottom navigation for 3-5 primary actions (most reachable)
+- Reserve hamburger menus for secondary navigation only
+- Highlight the current section in the navigation bar
+- Ensure navigation doesn't consume more than 20% of the viewport
+
+## Content Organization
+
+### Organizational Principles
+- **User-centric grouping:** Organize by user goals, not business departments
+- **Progressive disclosure:** Show only what's needed; reveal details on demand
+- **Consistency:** Same type of content in the same location across pages
+- **Scannability:** Clear headings, short paragraphs, visual breaks
+
+### Content Hierarchy
+1. **Page title:** What is this page about? (one per page)
+2. **Section headings:** Major content groups
+3. **Supporting content:** Details within each section
+4. **Related content:** Cross-links and supplementary information
+
+### Information Scent
+- Labels should clearly indicate what users will find
+- Preview content where possible (descriptions, thumbnails, counts)
+- Use "trigger words" that match user vocabulary
+- Provide visual cues for content types (icons for video, PDF, external links)
+
+### Search as Navigation
+- Include search for products with more than 50 content items
+- Provide autocomplete suggestions based on popular queries
+- Show recent searches for returning users
+
+## Common Mistakes
+- Organizing navigation by internal team structure instead of user needs
+- Using jargon or branded terminology users don't understand
+- Hiding essential navigation behind a hamburger menu on desktop
+- Deep nesting requiring more than 3 clicks to reach important content
+- Mirroring the database structure in the UI

awesome_agent_skills/ux-designer/rules/interaction-design.md

@@ -0,0 +1,78 @@
+# Rule: Interaction Design
+
+**Priority:** HIGH
+**Category:** Interaction Design
+
+## Description
+
+Interaction design covers user flows and microcopy — the two elements that most directly determine whether users complete tasks or abandon them.
+
+## User Flow Best Practices
+
+### Design Principles
+- Map the happy path first, then design for errors and edge cases
+- Minimize steps — every additional step loses a percentage of users
+- Provide clear progress indicators for flows with 3+ steps
+- Allow users to go backward without losing entered data
+- Auto-save form data at each step when possible
+- Confirm all destructive actions with clear, specific consequences
+
+### Multi-Step Flows
+- Show total steps and current position (step 2 of 4)
+- Allow skipping optional steps
+- Summarize entered data before final submission
+- Send confirmation via email/notification for important transactions
+
+### Error Recovery
+- Detect errors as early as possible (inline validation)
+- Explain what went wrong in plain language and how to fix it
+- Preserve all valid input — never clear the form on error
+- Offer alternative paths when the primary path fails
+
+### Good vs. Bad Flow
+
+```
+✅ Cart → Shipping → Payment → Review → Confirmation
+    ↑       ↑          ↑        ↑
+    [Back]  [Back]     [Back]   [Edit]
+  Progress bar visible · Each step validates · Review before commit
+
+❌ Cart → Login Required → Shipping → Re-enter email → Payment → Surprise fees → Submit
+                                                                      ↓
+                                                                 [No going back]
+```
+
+## Microcopy Guidelines
+
+### Buttons & CTAs
+- Use specific verbs: "Save Draft", "Send Message", "Create Account"
+- Avoid generic labels: "Submit", "OK", "Click Here"
+- For destructive actions, name the consequence: "Delete Project" not "Confirm"
+
+### Error Messages
+- Explain what happened AND how to fix it
+- Be specific: "Password must be at least 8 characters" not "Invalid input"
+- Don't blame the user: "We couldn't find that page" not "You entered a wrong URL"
+
+### Empty States
+- Explain why it's empty and what to do next
+- Example: "No projects yet. Create your first project to get started." + [Create Project]
+
+### Confirmation Dialogs
+- Use asymmetric button labels: "Delete Project" / "Keep Project" (not "Yes" / "No")
+- Mention if the action is irreversible
+- Provide context: "Delete 'Marketing Plan'? All files and comments will be permanently removed."
+
+| Context | ❌ Weak | ✅ Strong |
+|---------|---------|----------|
+| Save button | Submit | Save Changes |
+| Delete dialog | "Are you sure?" / Yes / No | "Delete 'Q4 Report'? This can't be undone." / Delete / Cancel |
+| Empty inbox | No messages | You're all caught up! New messages will appear here. |
+| Form error | Invalid | Enter a valid email address (e.g., name@example.com) |
+
+## Common Mistakes
+- Requiring account creation before the user sees any value
+- Dead ends with no clear next action
+- Using "Yes" and "No" for destructive action confirmations
+- Inconsistent terminology (using "remove", "delete", and "trash" for the same action)
+- Missing feedback after the final action (did it work?)

awesome_agent_skills/ux-designer/rules/research.md

@@ -0,0 +1,94 @@
+# Rule: User Research
+
+**Priority:** CRITICAL
+**Category:** User Research
+
+## Description
+
+User research is the foundation of evidence-based design. It ensures decisions are grounded in real user data — through interviews that yield actionable insights and personas that keep teams focused on real needs.
+
+## Conducting User Interviews
+
+### Planning
+- Define clear research objectives before scheduling
+- Write a discussion guide with 8-12 open-ended questions
+- Recruit 5-8 participants per round for qualitative insights
+- Schedule 45-60 minutes per session (30 min interview + buffer)
+
+### During the Interview
+- Start with easy warm-up questions to build rapport
+- Ask about past behavior, not hypothetical future behavior
+- Use "Tell me about a time when..." framing
+- Follow up with "Why?" and "Can you show me?"
+- Stay silent after asking — let the participant fill the space
+
+### Synthesis
+1. Debrief within 24 hours while memory is fresh
+2. Extract key observations as individual data points
+3. Cluster observations into themes using affinity mapping
+4. Identify patterns across multiple participants
+5. Prioritize insights by frequency and impact
+6. Create actionable recommendations tied to specific findings
+
+### Good vs. Bad Interview Questions
+
+| ✅ Good | ❌ Bad |
+|---------|-------|
+| "Walk me through the last time you [did the task]." | "Don't you think this feature would be useful?" (leading) |
+| "What was the hardest part of that experience?" | "Would you use a product that does X?" (hypothetical) |
+| "What did you try before finding this solution?" | "Do you like this design?" (opinion, not behavior) |
+
+## Creating Effective Personas
+
+### Creation Process
+1. Conduct user interviews and gather behavioral data
+2. Identify patterns in goals, behaviors, and pain points
+3. Cluster users into 3-5 distinct groups
+4. Draft persona profiles based on data patterns
+5. Validate with additional research or stakeholder input
+6. Share personas with the full team; refer to them by name
+
+### What to Include
+- **Name and photo** — makes the persona memorable
+- **Goals** — functional and emotional objectives
+- **Pain points** — current frustrations and unmet needs
+- **Behaviors** — how they currently solve the problem
+- **Context** — when, where, and why they use the product
+- **Quote** — a representative statement capturing their mindset
+
+### Example
+
+#### Good Persona
+```markdown
+## Sarah, The Busy Parent
+**Age:** 34 | **Occupation:** Marketing Manager | **Location:** Austin, TX
+
+### Goals
+- Order groceries in under 10 minutes during her commute
+- Never run out of essentials (milk, diapers, snacks)
+
+### Pain Points
+- Hates scrolling through irrelevant promotions to find basics
+- Forgets items because she can't easily reorder past purchases
+
+### Behaviors
+- Shops on her phone, never desktop
+- Reorders 70% of the same items weekly
+
+> "I just need the basics fast. Don't make me think about groceries more than I have to."
+```
+
+#### Bad Persona
+```markdown
+## User Type A
+**Age:** 25-45 | **Gender:** Any | **Income:** Middle class
+Goals: Wants a good experience. Likes easy-to-use apps.
+[Too vague to inform any design decision]
+```
+
+## Common Mistakes
+- Asking leading questions that suggest the "right" answer
+- Interviewing only power users and missing beginner perspectives
+- Creating personas in a brainstorming session without research data
+- Making personas but never referencing them in design reviews
+- Treating a single participant's feedback as representative of all users

awesome_agent_skills/ux-designer/rules/visual-design.md

@@ -0,0 +1,61 @@
+# Rule: Visual Design
+
+**Priority:** MEDIUM
+**Category:** Visual Design
+
+## Description
+
+Visual design communicates hierarchy, establishes brand consistency, and guides user attention — without requiring users to think about it. A solid design system ensures these principles are applied consistently.
+
+## Visual Hierarchy Principles
+
+### Establishing Hierarchy
+1. **Size:** Larger elements attract attention first; use for headings and primary CTAs
+2. **Contrast:** High contrast draws the eye; use for key actions and critical information
+3. **Color:** Saturated/brand colors for emphasis; muted tones for secondary elements
+4. **Position:** Top-left scanned first (LTR); place key content in F-pattern or Z-pattern
+5. **Whitespace:** Generous spacing isolates and elevates important elements
+6. **Typography:** Weight, size, and style create clear content levels
+
+### Typography Scale
+- Limit to 3-4 distinct text sizes per screen
+- Maintain a consistent ratio between levels (1.25× or 1.333× scale)
+- Use weight (bold vs. regular) to differentiate within the same size
+- Reserve ALL CAPS for very short labels only (buttons, tags)
+
+### Color Usage
+- Primary color for main CTAs and key interactive elements
+- Neutral colors (grays) for body text and secondary elements
+- Semantic colors for feedback: green (success), red (error), yellow (warning), blue (info)
+- Limit accent colors to 1-2 per screen to maintain focus
+
+### Layout Principles
+- Align to a consistent grid (8px base unit is standard)
+- Use tighter spacing between related elements, looser between unrelated
+- Group related items visually using proximity and shared containers
+
+## Design System Foundations
+
+### Core Elements
+- **Color palette:** Primary, secondary, neutral, and semantic colors with usage rules
+- **Typography:** Font families, size scale, weight usage, and line heights
+- **Spacing:** A base unit (typically 4px or 8px) applied consistently
+- **Grid:** Column structure, gutters, and margins for each breakpoint
+- **Elevation:** Shadow levels indicating depth and layering
+- **Border radius:** Consistent rounding (4px subtle, 8px cards, full for pills)
+
+### Component Documentation
+Every component should define:
+- **Purpose, anatomy, and states** (default, hover, active, focus, disabled, error)
+- **Variants** (size options, with/without icons)
+- **Responsive behavior** and **accessibility requirements**
+
+### Essential Components
+Buttons · Text inputs · Select/Dropdown · Checkbox/Radio · Toggle · Cards · Modals · Toast notifications · Navigation (tabs, breadcrumbs, sidebar) · Tables/Lists · Loading indicators
+
+## Common Mistakes
+- Making everything bold or large (if everything is emphasized, nothing is)
+- Using too many colors without clear purpose
+- Competing CTAs of equal visual weight on the same screen
+- Building a design system before understanding actual product needs
+- Maintaining separate design and code component libraries that drift apart