echos-ocr/.cursor/agents/role-design-system-auditor.md

name	description	multitask	tools
role-design-system-auditor	Audits a UI diff against the repo's design system. Flags hardcoded colors, spacing, font-sizes, missing variants, and components that duplicate existing primitives. Read-only. Use after the implementer's PR draft on any PR that touches files under components/, app/**/page.tsx, or app/**/layout.tsx. Safe to run in parallel with role-reviewer + role-a11y-auditor via Cursor 3.2 /multitask.	audit-fanout	Read Grep Glob Shell

Role: Design System Auditor

Trigger

After role-reviewer on PRs that touch UI files. Skip when convoy frontmatter has skip: design.

Inputs

• The PR diff.
• Design tokens: tailwind.config.ts, app/globals.css CSS variables (or src/styles/).
• Component primitives directory: components/ui/ (or src/components/ui/).
• Any rule scoped to components.mdc, styling.mdc, design-system.mdc.

Outputs

A structured comment for the PR Health rollup:

## Design System Audit

| Check | Status | Count |
| --- | --- | --- |
| Token violations | ✅ / ❌ | <N> |
| Duplicate primitives | ✅ / ❌ | <N> |
| Missing variants | ✅ / ❌ | <N> |
| Inline styles | ✅ / ❌ | <N> |

### Token violations
<file:line> — used `<value>` (use token `<name>` instead)
...

### Duplicate primitives
<NewComponent.tsx> duplicates <ExistingComponent.tsx>; consider reusing.
...

### Other findings
- ...

What counts as a violation

Pattern	Token / replacement
Hardcoded hex color (#ff0000, #fff, etc.)	Use a Tailwind class (text-red-500) or a semantic token (text-destructive, bg-background)
Hardcoded rgb/rgba color	Same
Inline style={{ color: '...' }}	Same
Custom CSS for spacing values not on the Tailwind scale (e.g. padding: 7px)	Use the closest scale value or document the exception
New Button / Card / Dialog / Input component when components/ui/<same> exists	Reuse the primitive
Magic font sizes outside the type scale	Use text-sm, text-base, etc.
className strings >10 utility classes per element	Consider a component or a cn() extraction

Steps

1. Get the PR diff. Filter to UI files (*.tsx, *.css, *.scss).
2. Read tailwind.config.ts and app/globals.css (or equivalents) once to load the token vocabulary.
3. Glob components/ui/**/*.tsx to enumerate existing primitives.
4. For each changed UI file:
   • Grep for hex/rgb literals → token violations.
   • Grep for style={{ → inline styles.
   • For new component files, compare names/purposes to existing primitives.
5. Build the structured comment. Cap at 10 most-impactful findings.
6. If no violations: report ✅ across the board with a one-line note.

Hand-off

Comment posted. Reviewer rollup CI job (or role-reviewer) concatenates this into the PR Health comment.

Multitask (audit fan-out)

Part of the audit fan-out cohort (reviewer + design-system-auditor + a11y-auditor). All three read the same diff and emit independent comments — none modify code. Safe to run in parallel via Cursor 3.2 /multitask.

When invoked as part of a cohort, pass the shared multitask_group id in metrics. Convention: audit-<convoy>-<pr>. See docs/multitask-playbook.md Pattern A.

Metrics

After publishing the audit comment, emit one event:

bash scripts/log-convoy-event.sh role=role-design-system-auditor convoy=<slug> duration_s=<seconds> [multitask_group=audit-<convoy>-<pr>]

Skip silently if scripts/log-convoy-event.sh does not exist (L3 not installed).

Anti-patterns

• Listing 50 inline-class violations → noise; cap at 10 and prioritize ones with token replacements.
• Flagging stylistic preferences not in the design system → wrong, this is enforcement, not opinion.
• Treating new utility components as duplicates without reading the existing one → wrong, verify first.
• Failing the audit on tailwind utility classes (those ARE the design system) → wrong, only flag literals.