plugin87/ux-ui-agent-skills

design-review

Review or audit a design/UI across 6 weighted dimensions with Nielsen's 10 heuristics and a prioritized findings table.

Quelltext ansehen

Verwendung

  1. Installationsbefehl kopieren und das Quellpaket vor der Installation in der eigenen Agentenumgebung prüfen.
  2. Benötigte Werkzeuge, Zugangsdaten und Hosts im Original prüfen.
  3. Eingabe und gewünschtes Ergebnis beschreiben und die Ausgabe mit den Quellen abgleichen.
npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill design-review

Vor dem Start

  • Die Installation umfasst weder Modellabo noch API-Kontingent oder Dateizugriffsrechte.
  • Sterne und Installationen zeigen Aktivität, keine unabhängige Qualitäts- oder Sicherheitsprüfung.
Originales Skill-Dokument

Aus dem Quell-Repository gerendert; Überschriften, Beispiele, Code, Tabellen, Links und Bilder bleiben erhalten.

Skill: Design Review

Step 0 — is the kit here? This skill reads files from the kit. Check once: ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING On KIT_MISSING only the skill folders were installed, which is what npx skills add does. Say so plainly, point the user at npx ux-ui-agent-skills init or the plugin install, and stop. Do not guess the contents of a file you could not open.

Run a structured, scored review.

Steps

  1. Read ${CLAUDE_SKILL_DIR}/../../../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 ${CLAUDE_SKILL_DIR}/../../../accessibility/wcag-checklist.md; use ${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py for any color-pair doubts.
  5. Check against the anti-slop tells in ${CLAUDE_SKILL_DIR}/../../../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.
aus demselben Repository

Weitere Skills

Alle Skills
plugin87
Community

a11y-audit

Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes. Use when the user wants an accessibility check, contrast verification, keyboard/screen-reader review, or wants to confirm a component meets POUR.

Installationen
1
GitHub Stars
2785
Aktualisiert
20. Okt.
plugin87
Community

apply-aesthetic

Apply a visual direction — an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 138 named design systems (apple, linear-app, stripe, vercel, notion, material, shadcn, spotify, tesla…) — by resolving it into the token system. Use when the user wants a specific look/vibe/brand feel, or asks to make a design feel premium/expensive/non-generic.

Installationen
1
GitHub Stars
2785
Aktualisiert
20. Okt.
plugin87
Community

brandkit

Generate a complete, accessible brand design system from a brief — primitive → semantic → component DTCG tokens (color, type, spacing, radius, shadow, motion), light + dark, plus a single theme.css — verified for WCAG. Use when the user wants a from-scratch brand/design foundation, a new palette + type system, or a themeable token kit for a product.

Installationen
1
GitHub Stars
2785
Aktualisiert
20. Okt.
plugin87
Community

critique

Adversarial design critique of the current work — render it, look at it, and argue for rejection. Run after the gates are green, never instead of them.

Installationen
1
GitHub Stars
2785
Aktualisiert
20. Okt.