From developer-tools
Reviews UI code for compliance with modern web standards: accessibility, focus states, forms, animation, typography, content handling, images. Outputs concise, high-signal feedback.
npx claudepluginhub kriscard/kriscard-claude-plugins --plugin developer-toolsReview UI code for compliance with modern web interface standards. Output concise but comprehensive—sacrifice grammar for brevity. High signal-to-noise. - Icon-only buttons need `aria-label` - Form controls need `<label>` or `aria-label` - Interactive elements need keyboard handlers (`onKeyDown`/`onKeyUp`) - `<button>` for actions, `<a>`/`<Link>` for navigation (not `<div onClick>`) - Images ne...
UI/UX auditor that scans TSX code for accessibility issues (semantic HTML, ARIA labels, alt text, contrast), consistency (design tokens, component duplication), and UX patterns (loading states, error handling). Outputs markdown report to .claude/audits.
Reviews UI implementations for visual consistency, accessibility compliance, responsive behavior, and design pattern adherence. Supports live Playwright testing, wireframe comparisons, and confidence-based issue scoring.
Manages AI prompt library on prompts.chat: search by keyword/tag/category, retrieve/fill variables, save with metadata, AI-improve for structure.
Share bugs, ideas, or general feedback.
Review UI code for compliance with modern web interface standards. Output concise but comprehensive—sacrifice grammar for brevity. High signal-to-noise.
aria-label<label> or aria-labelonKeyDown/onKeyUp)<button> for actions, <a>/<Link> for navigation (not <div onClick>)alt (or alt="" if decorative)aria-hidden="true"aria-live="polite"<button>, <a>, <label>, <table>) before ARIA<h1>–<h6>; include skip link for main contentscroll-margin-top on heading anchorsfocus-visible:ring-* or equivalentoutline-none / outline: none without focus replacement:focus-visible over :focus (avoid focus ring on click):focus-within for compound controlsautocomplete and meaningful nametype (email, tel, url, number) and inputmodeonPaste + preventDefault)htmlFor or wrapping control)spellCheck={false})… and show example patternautocomplete="off" on non-auth fields to avoid password manager triggersbeforeunload or router guard)prefers-reduced-motion (provide reduced variant or disable)transform/opacity only (compositor-friendly)transition: all—list properties explicitlytransform-origin<g> wrapper with transform-box: fill-box; transform-origin: center… not ..." " not straight "10 MB, ⌘ K, brand names…: "Loading…", "Saving…"font-variant-numeric: tabular-nums for number columns/comparisonstext-wrap: balance or text-pretty on headings (prevents widows)truncate, line-clamp-*, or break-wordsmin-w-0 to allow text truncation<img> needs explicit width and height (prevents CLS)loading="lazy"priority or fetchpriority="high"virtua, content-visibility: auto)getBoundingClientRect, offsetHeight, offsetWidth, scrollTop)<link rel="preconnect"> for CDN/asset domains<link rel="preload" as="font"> with font-display: swap<a>/<Link> (Cmd/Ctrl+click, middle-click support)useState, consider URL sync)touch-action: manipulation (prevents double-tap zoom delay)-webkit-tap-highlight-color set intentionallyoverscroll-behavior: contain in modals/drawers/sheetsinert on dragged elementsautoFocus sparingly—desktop only, single primary input; avoid on mobileenv(safe-area-inset-*) for notchesoverflow-x-hidden on containers, fix content overflowcolor-scheme: dark on <html> for dark themes (fixes scrollbar, inputs)<meta name="theme-color"> matches page background<select>: explicit background-color and color (Windows dark mode)Intl.DateTimeFormat not hardcoded formatsIntl.NumberFormat not hardcoded formatsAccept-Language / navigator.languages, not IPvalue need onChange (or use defaultValue for uncontrolled)suppressHydrationWarning only where truly neededhover: state (visual feedback)& over "and" where space-constraineduser-scalable=no or maximum-scale=1 disabling zoomonPaste with preventDefaulttransition: alloutline-none without focus-visible replacementonClick navigation without <a><div> or <span> with click handlers (should be <button>).map() without virtualizationaria-labelIntl.*)autoFocus without clear justificationGroup by file. Use file:line format (VS Code clickable). Terse findings.
## src/Button.tsx
src/Button.tsx:42 - icon button missing aria-label
src/Button.tsx:18 - input lacks label
src/Button.tsx:55 - animation missing prefers-reduced-motion
src/Button.tsx:67 - transition: all → list properties
## src/Modal.tsx
src/Modal.tsx:12 - missing overscroll-behavior: contain
src/Modal.tsx:34 - "..." → "…"
## src/Card.tsx
✓ pass
State issue + location. Skip explanation unless fix non-obvious. No preamble.