design-review

Solid

Review or audit a design/UI across 6 weighted dimensions with Nielsen's 10 heuristics and a prioritized findings table. Use when the user wants a design critique, quality score, heuristic evaluation, or audit of an existing screen, page, or product before/after build.

Web & Frontend 731 stars 77 forks Updated today

Install

View on GitHub

Quality Score: 83/100

Stars 20%
95
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
44
Issue Health 10%
50
License 10%
0
Description 5%
100

Skill Content

# Skill: Design Review Run a structured, scored review. ## Steps 1. Read `workflows/design-review.md` (rubric, scoring guide, Nielsen heuristics, process). 2. Gather context: the screen(s)/flow, target users, platform, constraints. 3. Score the 6 dimensions (Visual Hierarchy 20%, Consistency 20%, Accessibility 20%, Usability 20%, Responsiveness 10%, Performance 10%); compute the weighted overall. 4. Run the accessibility lens with `accessibility/wcag-checklist.md`; use `scripts/contrast.py` for any color-pair doubts. 5. Check against the anti-slop tells in `taste/design-taste.md` (Banned Defaults checklist). 6. Apply Nielsen's 10 heuristics; flag violations by number. ## Output - The 6-dimension scored table + overall score. - A prioritized findings table: # · Severity (Critical → Major → Minor → Enhancement) · Finding · Recommendation. - Concrete, token-referenced fixes.

Details

Author
plugin87
Repository
plugin87/ux-ui-agent-skills
Created
5 months ago
Last Updated
today
Language
JavaScript
License
None

Integrates with

Tailwind CSS · Frontend

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

design-review

Run a structured UX critique on a screenshot, URL, or HTML snippet - a 0-4 score, 3-6 prioritized issues each with Before/After/Why, and one citation per claim. Given two or more variants, compares them on shared dimensions and names a winner. Given a screen plus a decision question, answers the question with the screen as evidence instead of returning a critique. Trigger phrases - "review this design", "critique this screen", "what's wrong with this UI", "score this design", "which of these two is better", "did the redesign improve this", "should I use a modal or a drawer". Do not use for WCAG-only accessibility audits (use accessibility-audit) or turning a mockup into a dev spec (use design-handoff).

2 Updated 5 days ago
humbleteam
Web & Frontend Listed

design-critique

Critiques a design against heuristics: visual hierarchy, typography, spacing, colour, accessibility and interaction. Use when reviewing a design or wanting specific, structured feedback rather than an opinion.

0 Updated 6 days ago
poorvith-mp
Web & Frontend Listed

design-critique

Critiques a design against heuristics: visual hierarchy, typography, spacing, colour, accessibility and interaction. Use when reviewing a design or wanting specific, structured feedback rather than an opinion.

0 Updated 6 days ago
prvthmpcypher