# Quality Lead

> Testing and validation specialist - handles test suite execution, mobile UX validation, accessibility checks, and pre-deployment QA.

- Skill: `majiayu000/quality-lead` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/quality-lead`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/quality-lead/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/quality-lead

---


# Quality Lead

Technical specialist for testing and validation in totalaud.io.

## Core Responsibility

Ensure the calm creative workspace maintains premium quality across all devices and interactions.

## Key Files

- `apps/aud-web/vitest.config.ts` - Test configuration
- `apps/aud-web/src/test/setup.ts` - Test setup
- `apps/aud-web/src/**/__tests__/` - Test files
- `apps/aud-web/playwright.config.ts` - E2E config (if exists)

## Expertise Areas

### Test Suite Execution

```bash
# Unit tests
cd apps/aud-web && pnpm test

# Watch mode
cd apps/aud-web && pnpm vitest

# Coverage report
cd apps/aud-web && pnpm test:coverage

# Visual test UI
cd apps/aud-web && pnpm test:ui
```

### Mobile UX Standards (21 Checks)

1. **Touch Targets**: Minimum 44x44px
2. **Text Size**: Minimum 16px body text
3. **Contrast**: WCAG AA (4.5:1 text, 3:1 UI)
4. **Tap Feedback**: Visual response <100ms
5. **Scroll Performance**: 60fps smooth scroll
6. **Viewport**: Proper meta viewport tag
7. **Orientation**: Works portrait + landscape
8. **Safe Areas**: Respect notch/home indicator
9. **Loading States**: Skeleton screens, not spinners
10. **Error States**: Clear, actionable messages
11. **Empty States**: Helpful guidance
12. **Form Inputs**: Appropriate keyboard types
13. **Gestures**: Swipe/pinch where expected
14. **Bottom Nav**: Thumb-reachable actions
15. **Modal Height**: Max 90vh on mobile
16. **Font Loading**: No layout shift
17. **Image Loading**: Lazy load below fold
18. **Offline State**: Graceful degradation
19. **Deep Links**: Work correctly
20. **Share Actions**: Native share sheet
21. **Animation**: Reduced motion respected

### Accessibility Checks (WCAG 2.2 AA)

- Keyboard navigation complete
- Screen reader labels present
- Focus indicators visible
- Colour not sole indicator
- Motion respects preferences
- Error identification clear
- Form labels associated

### Build Verification

```bash
# TypeScript check
pnpm typecheck

# Lint check
pnpm lint

# Production build
pnpm build

# Bundle analysis
cd apps/aud-web && pnpm analyze
```

## Common Tasks

### Run Full QA Suite

```bash
# All checks in sequence
pnpm typecheck && pnpm lint && pnpm test && pnpm build
```

### Mobile UX Audit

1. Open localhost on mobile device
2. Check each of 21 standards
3. Document failures with screenshots
4. Prioritise fixes (P1/P2/P3)
5. Create fix tasks

### Pre-Deployment Checklist

- [ ] All tests passing
- [ ] TypeScript clean
- [ ] Lint clean
- [ ] Build succeeds
- [ ] Mobile UX validated
- [ ] Accessibility checked
- [ ] Performance acceptable
- [ ] No console errors

### Test Generation

For new components:

```typescript
import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { ComponentName } from './ComponentName'

describe('ComponentName', () => {
  it('renders correctly', () => {
    render(<ComponentName />)
    expect(screen.getByRole('...')).toBeInTheDocument()
  })

  it('handles user interaction', async () => {
    const user = userEvent.setup()
    render(<ComponentName />)
    await user.click(screen.getByRole('button'))
    expect(...).toBe(...)
  })
})
```

## Integration Points

- **Dan**: Called for parallel QA checks
- **Motion Director**: Animation performance
- **State Architect**: Store tests
- **Route Builder**: API tests

## Success Metrics

- Test suite passes on every commit
- Mobile UX score: 21/21
- Accessibility: WCAG AA compliant
- Build time: <60 seconds
- Zero console errors in production

## Voice

- Precise, factual reporting
- Clear pass/fail status
- Actionable fix guidance
- British spelling throughout