humbleteam
UserClaude Code skill: scored UX critique with Before/After/Why fixes and Nielsen/WCAG citations
Categories
Indexed Skills (9)
design-review
Run a structured UX critique on a screenshot, URL, or HTML snippet - a 0-4 score, up to 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).
design-qa
Runs a pre-ship design QA gate on a screenshot, URL, or PR HTML/CSS - checks states, WCAG 2.2 contrast, touch targets, breakpoints, and keyboard paths, then returns a pass/fail table and fix list. Trigger phrases - "QA this screen", "is this ready to ship", "check this PR for accessibility issues", "audit before launch". Skip for style critique - use design-review instead; this checks only verifiable gate criteria.
design-brief
Extract a 5-bullet design brief (Problem, Audience, Success metric, Must-haves, Constraints) from messy inputs - transcripts, docs, freetext - with a gap report instead of guessing at missing fields. Trigger phrases - "write a design brief", "turn this transcript into a brief", "what's missing from this brief", "update the brief, now it's B2C". Do not use for visual design tokens (extract-design-tokens) or a dev handoff spec (design-handoff).
ux-writing
Write interface microcopy for buttons, error messages, empty states, and confirmations, or strip AI-generated tells out of copy you already have. Use for "write the button copy for...", "draft an error message for...", "this copy sounds AI-generated", "write empty state copy", or "rewrite this confirmation dialog". Do not use for marketing pages or long-form content - interface microcopy only.
extract-design-tokens
Extracts a design-token set - palette, type, spacing, radii, shadows, motion - from a live URL, screenshots, or a CSS file, into CSS custom properties plus a W3C Design Tokens JSON file. Trigger on "extract design tokens from this site", "pull the tokens from this screenshot", "turn this CSS into tokens", "build a token file from this URL". Do not use to find token drift in an existing codebase - use audit-design-tokens for that.
html-mockup
Builds a pixel-faithful single-file HTML mockup from a reference screenshot by counting colors, photos, items, and states before writing markup. Use when a user says "turn this screenshot into HTML", "build a mockup that matches this design", "code this screen exactly", or pastes an image and asks for a coded version. Do not use for layout exploration with no reference image - use ascii-wireframes instead.
ascii-wireframes
Sketches three genuinely different layout hypotheses as ASCII wireframes before any hi-fi design work starts. Use when a user asks to "show me some layout options", "sketch a few wireframes", "give me 3 versions of this screen", "explore layouts before Figma", or "ascii wireframe this". Do not use for pixel-faithful HTML mockups built from a reference screenshot - use html-mockup for that.
design-handoff
Turns a mockup, screenshot, or HTML file into a dev-ready handoff spec - layout measurements, a token map, a component-state inventory, accessibility notes, and numbered open questions. Use for "write a handoff spec for this screen", "turn this mockup into dev docs", "document component states", or "what tokens does this screen use". Not for critiquing design quality or generating new UI - see design-review or html-mockup.
accessibility-audit
Runs a WCAG 2.2 accessibility audit of a screenshot, URL, or HTML/JSX and reports findings by severity (P0 blocks use, P1 degrades use, P2 friction), each with a success-criterion citation. Use for "check accessibility", "run an a11y audit", "is this WCAG compliant", "is this accessible", or "audit contrast and keyboard support". Skip for axe-core/Lighthouse scans or legal ADA/Section 508 certification - this is expert review, not a scanner.
Bio shown is the top-scored skill's repo description as a fallback — real GitHub bios land in a future update.