# Qa Design

> UI/UX design audit and verification of web best practices, including responsive/mobile-first breakpoints. Trigger when the user wants to audit the design, verify the UI/UX, check responsive behaviour, or improve the user interface.

- **Type:** Skill
- **Install:** `agentstack add skill-christopherlouet-claude-base-qa-design`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [christopherlouet](https://agentstack.voostack.com/s/christopherlouet)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [christopherlouet](https://github.com/christopherlouet)
- **Source:** https://github.com/christopherlouet/claude-base/tree/main/.claude/skills/qa-design
- **Website:** https://christopherlouet.github.io/claude-base/

## Install

```sh
agentstack add skill-christopherlouet-claude-base-qa-design
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# UI/UX Design Audit

## Objective

Audit a web interface against 100+ rules covering accessibility, forms, animations, typography, images, performance, navigation, dark mode, and internationalization.

## Audit categories

```
┌──────────────────────────────────────────────────────────────────┐
│                      UI/UX AUDIT                                  │
├──────────────────────────────────────────────────────────────────┤
│                                                                   │
│  1. ACCESSIBILITY       ARIA, contrast, focus, keyboard          │
│  2. FORMS               Validation, feedback, autofill           │
│  3. ANIMATIONS          Performance, reduced-motion, timing      │
│  4. TYPOGRAPHY          Hierarchy, readability, responsive       │
│  5. IMAGES              Alt text, lazy loading, formats          │
│  6. UI PERFORMANCE      Layout shift, first paint, bundle        │
│  7. NAVIGATION          Breadcrumbs, mobile menu, deep links     │
│  8. DARK MODE           CSS variables, images, contrast          │
│  9. TOUCH INTERACTIONS  Target size, swipe, gestures             │
│  10. INTERNATIONALIZATION  RTL, dates, plurals, translations    │
│  11. RESPONSIVE         Breakpoints, mobile-first, viewport       │
│                                                                   │
└──────────────────────────────────────────────────────────────────┘
```

## 1. Accessibility

### Critical rules

| # | Rule | Verification |
|---|------|-------------|
| A1 | Minimum contrast 4.5:1 (normal text) | Check CSS colors |
| A2 | Minimum contrast 3:1 (large text, icons) | Check CSS colors |
| A3 | Labels on all form fields | `` or `aria-label` |
| A4 | Alt text on all informative images | `` non-empty |
| A5 | Full keyboard navigation | Tab, Enter, Escape, Arrow keys |
| A6 | Visible focus on interactive elements | `:focus-visible` style |
| A7 | Correct ARIA roles | `role`, `aria-*` attributes |
| A8 | No purely visual content | Text alternatives |
| A9 | Logical heading structure | h1 > h2 > h3, no skipping |
| A10 | Skip to content link | First focusable element |

### Patterns to look for

```
# Images without alt
]*(?]*>

# Buttons without accessible text
]*>(\s*]*>\s*)

# Inputs without label
]*aria-label)(?![^>]*id=["'][^"']*["'][^>]*)[^>]*>

# Insufficient contrast (light colors on light background)
color:\s*#[def][def][def]|color:\s*#[cdef]{6}
```

## 2. Forms

| # | Rule | Detail |
|---|------|--------|
| F1 | Inline validation (not only on submit) | Show error on blur |
| F2 | Descriptive error messages | Not just "Invalid field" |
| F3 | Autocomplete attributes | `autocomplete="email"`, `"name"`, etc. |
| F4 | Submit button disabled if invalid | Or clear feedback |
| F5 | Required field indicator | `*` or explicit text |
| F6 | Correct input type | `type="email"`, `"tel"`, `"number"` |
| F7 | Minimum font size 16px on mobile | Avoids iOS zoom |
| F8 | Loading state on submit | Spinner or disabled |

## 3. Animations and transitions

| # | Rule | Detail |
|---|------|--------|
| AN1 | `prefers-reduced-motion` respected | Disable animations on request |
| AN2 | Duration  3Hz | Epilepsy risk |
| AN4 | CSS transitions preferred over JS | GPU performance |
| AN5 | `will-change` for heavy animations | Compositor optimization |

```css
/* prefers-reduced-motion pattern */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

## 4. Typography

| # | Rule | Detail |
|---|------|--------|
| T1 | Clear visual hierarchy | Distinct sizes, weights, colors |
| T2 | Line length 50-75 characters | `max-width: 65ch` |
| T3 | Minimum line-height 1.5 for body text | Readability |
| T4 | No more than 2-3 fonts | Visual consistency |
| T5 | Minimum size 16px for body | Mobile readability |
| T6 | System font fallback defined | `font-family: 'Custom', system-ui, sans-serif` |

## 5. Images

| # | Rule | Detail |
|---|------|--------|
| I1 | Descriptive alt text | Not "image", not empty unless decorative |
| I2 | Lazy loading | `loading="lazy"` except above-the-fold |
| I3 | Explicit dimensions | `width` and `height` to avoid CLS |
| I4 | Modern format (WebP, AVIF) | With fallback |
| I5 | Responsive images | `srcset` and `sizes` |
| I6 | Optimized compression | = 44x44px | Apple/Google minimum |
| TC2 | Spacing between targets >= 8px | Avoid tap errors |
| TC3 | No hover-only interactions | Touch alternatives |
| TC4 | Intuitive swipe if used | Natural direction |

## 10. Internationalization

| # | Rule | Detail |
|---|------|--------|
| I18N1 | Externalized text | No hardcoded strings |
| I18N2 | RTL support | `direction: rtl` compatible |
| I18N3 | Local date formats | No hardcoded US format |
| I18N4 | Plurals handled | No "1 item(s)" |

## 11. Responsive & breakpoints

Mobile-first audit across the 7 breakpoints (320, 375, 425, 768, 1024, 1440, 2560px).

| # | Rule | Detail |
|---|------|--------|
| R1 | Viewport meta + mobile-first CSS | `min-width` media queries, not `max-width` |
| R2 | No fixed-pixel container widths | Fluid layouts (flex/grid, %, `max-width`) |
| R3 | Touch targets >= 44px, spacing >= 8px | Shared with category 9 (Touch) |
| R4 | Body font >= 16px, line-height >= 1.5 | Mobile readability (shared with Typography) |
| R5 | Responsive images (`srcset`, `sizes`, lazy) | Shared with category 5 (Images) |
| R6 | Forms usable on mobile | Inputs >= 44px, correct `type`, right keyboard |
| R7 | Portrait + landscape both tested | No clipped/overflowing content |

Report a per-breakpoint OK/KO table (Mobile 320-425, Tablet 768, Desktop 1024-1440)
and list issues by breakpoint with severity. Test on real devices, not only DevTools.

## Expected output

```markdown
## UI/UX Audit: [Project name]

### Overall score: X/100

### Results by category

| Category | Score | Issues |
|-----------|-------|--------|
| Accessibility | X/10 | [N issues] |
| Forms | X/10 | [N issues] |
| Animations | X/10 | [N issues] |
| Typography | X/10 | [N issues] |
| Images | X/10 | [N issues] |
| UI Performance | X/10 | [N issues] |
| Navigation | X/10 | [N issues] |
| Dark Mode | X/10 | [N issues] |
| Touch | X/10 | [N issues] |
| i18n | X/10 | [N issues] |
| Responsive | X/10 | [N issues] |

### Critical issues
- [CRITICAL] [file:line] - Description

### Recommended improvements
- [IMPORTANT] [file:line] - Description

### Suggestions
- [SUGGESTION] - Description
```

## Rules

- Check ALL categories, not just the obvious ones
- Prioritize issues by user impact
- Provide concrete solutions, not just findings
- Test on mobile AND desktop

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [christopherlouet](https://github.com/christopherlouet)
- **Source:** [christopherlouet/claude-base](https://github.com/christopherlouet/claude-base)
- **License:** MIT
- **Homepage:** https://christopherlouet.github.io/claude-base/

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-christopherlouet-claude-base-qa-design
- Seller: https://agentstack.voostack.com/s/christopherlouet
- 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%.