Skill
Claude
UX Expert
ux-expert/
2 views
0 downloads
UX research and design critique for your agent: research plans, personas, storyboards, heuristic reviews and measured design forensics, with at most three priority actions.
UX research and design critique, the reasoning BEFORE a wireframe and the judgment AFTER a build.
Why use it
- Design decisions defended by taste instead of evidence.
- "Analyze this design" answered with guessed hex codes and invented font sizes.
- A reviewer who recites all ten heuristics and prioritizes nothing.
What it does
research, pick the method that fits the question × product stage, and mine the free evidence first.personas, 2-4 relevance-tested personas, each carrying its provenance (grounded, or clearly labelled proto).storyboard, one persona · one scenario · one path, with an emotion per panel.heuristics, Nielsen H1-H10 applied selectively: critique, or design guidance handed to the designer.review, the combined lens (usability · cognitive load/conversion · craft · a11y · AI-product) with a verdict and max 3 priority actions.analysis, design forensics: measured hexes, type scale, spacing ladder, contrast pairs, composition metrics, tokens.
Benefits
- Numbers, not opinions. Every hex, size and ratio is measured, anything inferred is labelled.
- Findings you can act on today: 3-5 issues, each with its cost, and max 3 priority actions.
- Know who you're designing for before the first wireframe, and whether the build served them after.
- No turf wars. It critiques and routes; it never touches your design system or your code.
Install
Download this skill and copy the ux-expert folder to .claude/skills/ux-expert/ in your project, or to ~/.claude/skills/ux-expert/ to use it in every project. Claude Code finds it on its own; you can also call it with /ux-expert.
Part of the Web Dev Design Pipeline bundle. To get the whole set as a Claude Code plugin: /plugin marketplace add endorphin-ai/hasbrains-agent-kit, then /plugin install web-dev@hasbrains-agent-kit.
Source: endorphin-ai/hasbrains-agent-kit. License: MIT.
Files (29)
Files
-
- ai-product-ux.md
- cognitive-load-and-conversion.md
- design-forensics-scripts.md
- eight-dimensions-and-tokens.md
- example.md
- honest-rendering.md
- journey-empathy-and-prioritization.md
- nielsen-heuristics.md
- persona-craft.md
- research-method-matrix.md
- storyboard-craft.md
- verification-instruments.md
- visual-craft-rules.md
- FORMAT.md
- README.md
- SKILL.md
- VOICE.md
# The 12 Visual Craft Rules
> **Source**: adapted from [tommyjepsen/awesome-ux-skills](https://github.com/tommyjepsen/awesome-ux-skills) (`general-design-review.md`).
> **Load when**: Reviewing high-fidelity UI or frontend CSS — report only violations, each with a concrete replacement value. SKIP for wireframes, flows, and early concepts.
---
## Visual Craft Lens
For high-fidelity UI or frontend code, run a quick pass against the 12 craft rules (the source points at a separate `craft` skill; **this file is the full version here** — see "Repo adaptation" below):
1. **No gradients** — flat, deliberate color; a gradient is usually an unmade color decision.
2. **No glow** — emphasis from size, weight, contrast, and space; shadows are for elevation only.
3. **No `transition: all`** — transition named properties with explicit durations and easings.
4. **Kill visual monotony** — break same-width, same-weight, all-centered rhythm; hierarchy should survive the squint test.
5. **No placeholder text** — real microcopy is part of the design.
6. **Contained stacking contexts** — `isolation: isolate` per layered component, one small z-index scale, no `z-index: 9999`.
7. **No pure black or white** — tuned neutral ramps for text, backgrounds, and borders.
8. **Space on a scale** — 4/8px grid; gaps within a group smaller than gaps between groups.
9. **Type does the work** — small scale, hierarchy from weight and color, max measure for body text.
10. **One elevation language** — borders for structure or shadows for floating, not both stacked.
11. **Every state designed** — hover, focus-visible, active, disabled, loading, empty, error.
12. **Motion is physics** — 120–250ms, transform/opacity only, `prefers-reduced-motion` respected.
Report only violations, with concrete replacement values. Skip this lens for wireframes, flows, and early-stage concepts.
---
## Project adaptation
- The source points at a separate `craft` skill for the full rule bodies; there is no such skill here. **This file is the full version** — the 12 rules above, applied with a concrete replacement value per violation.
- Rule 8 ("space on a scale") is enforced as the spacing grid the project's design system declares (an **8pt grid** is the common default), plus the label→title breathing rule: an eyebrow/badge above a heading gets ≥ one grid step of clearance. A cramped label→title pair is a finding.
- Rule 11 ("every state designed") maps to the project's required page states — loaded / loading / empty / error **plus** every access state the product has (read them from `{config.frontend_runtime}`) and the gated/paywalled state. A craft pass that only saw the happy path is incomplete.
- **The project's approved design system OVERRIDES these rules where they conflict.** Rules 1, 2 and 7 ("no gradients / no glow / no pure black or white") are generic defaults; a project whose approved system is built ON a gradient, a glow-as-depth language, or a true-black canvas has not violated anything. Judge against `docs/design/design-system.md` — that is the local oracle — and flag a gradient/glow only when it is OFF-system (a second, unsanctioned gradient; a glow used as elevation where the system says drop-shadow), never merely for existing.