# UI/UX Instructions — MRPS Agent Toolkit

## Overview
Inspecting and critiquing user interfaces: visual hierarchy, spacing, typography,
responsive integrity, and interactive states.

## Category & Tools
- **Tools**: `impeccable` (`kind: skill`)
- **Category**: `ui-ux`
- **ID prefix**: `uiux` · **Report slug**: `uiux`
- **Produces findings**: yes (critique)

## When to Reach for What
Reach for `impeccable` to evaluate hierarchy, aesthetic balance, spacing rhythm,
responsive layout, and typography. It supplies the vocabulary; you supply the evidence.

## What Inspect means here
Read templates, component markup, and CSS/SCSS/Tailwind tokens. Do not start a dev
server unless the critique depends on rendered output — if it does, announce it in the
plan first.

## The ladder, applied here
- **Inspect** — read the files and the design tokens. No edits.
- **Critique** — name the specific rule or token violated, and the user impact.
- **Recommend** — give the exact token, variable, or class to use instead.
- **Fix** — only on explicit instruction, one concern at a time.

## Evidence rules (this is where UI audits go wrong)
A UI finding is only admissible if it cites **one** of:
- `file:line` plus the offending value (`margin: 13px`), or
- a selector plus the computed/declared value, or
- a screenshot path plus the region.

Never write "spacing feels off" or "looks inconsistent". That is taste, not a finding.
If it is genuinely a judgement call, mark it `Low` and say it is subjective.

## What to look for
1. **Spacing rhythm** — values off the 4/8 scale, arbitrary margin/padding.
2. **Type scale** — more than 4–5 sizes, or line-height below 1.4 on body text.
3. **Hierarchy** — competing emphasis, weak primary action, heading-level jumps.
4. **States** — missing `:hover`, `:focus-visible`, `:disabled`, `:active`, loading, error, empty.
5. **Responsive** — breakpoint gaps, horizontal overflow, tap targets under 44px.
6. **Contrast** — but leave the authoritative check to `axe-core` (`a11y` category).

## Tool Guidance: Impeccable
### When to use
Design reviews, component refactors, landing-page audits, and any "this looks AI-generated" pass.
### When NOT to use
Functional testing, backend logic, binary analysis.
### Invocation
There is no CLI. Load the skill into the agent environment, or apply its rubric manually
and say that you did so:

```text
Load https://github.com/pbakaus/impeccable into your agent instructions,
then review the diff against its design rubric.
```

If the skill is unavailable, record `NOT CHECKED` — do not silently substitute opinion.

## Report example
```markdown
# uiux — 2026-11-09T14-32-05Z

Prior: none (first run)
Toolchain: Impeccable (manual rubric)
Delta: +1 new · 0 still open · 0 resolved · 0 not checked

## What was found (plain English)
- **uiux-01** — Buttons use three different horizontal paddings, so they do not line up. (Medium)

## What changed since last run
- First run.

## Technical detail
| ID | Sev | Evidence | File | Rule | Status |
|----|-----|----------|------|------|--------|
| uiux-01 | M | padding: 12px / 14px / 16px | src/components/Button.tsx:22-40 | spacing-rhythm | NEW |

## Commands run
| Command | Exit | Note |
|---------|------|------|
| (manual read) | 0 | no CLI for this skill |

## Not checked
- Rendered states — no dev server run.

Generated by <agent name>. Read-only. No source files were modified.
Findings are advisory; the user decides what to fix.
```