All skills
mblode avatar

/ui-design

@e7db33d
by Matthew Blodemblode/agent-skills136 stars
12

Designs and builds React/Next/Tailwind UI and audits visual and interaction defects. Use when asked to "build a landing page", "extract our design system", "add dark mode", "make this responsive", "remove UI slop", or "audit this component". For product decisions use product-design; for browser measurements use ui-verification; for motion use ui-animation.

Use this Skill: https://skilld.dev/gh/mblode/agent-skills/ui-design

This session only. Nothing lands on disk.

rulesinteraction-keyboard-operable.md

≈383 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Ensure Full Keyboard Operability

Pointer-only handlers are not acceptable for critical actions. Anything reachable only by pointer cannot be completed by keyboard, switch, or screen reader users at all.

Detection

Search for elements given a button role or a focusable tabIndex that carry no key handler; a hit is confirmed when the element's action has no keyboard path.

rg -nUP '(?s)<[A-Za-z][^>]*?\b(?:role="button"|tabIndex=\{[0-9])(?![^>]*?(?:onKeyDown|onKeyUp|onKeyPress))[^>]*?>' \
   -g '*.tsx' -g '*.jsx' src/

The key-handler exclusion is a lookahead inside the element, not a | rg -v after it. Filtering the output of a multiline match works line by line, so a correctly written element whose attributes Prettier split across lines gets its onKeyDown line stripped and the rest reported. That is the common formatting, so the pipeline form fires on correct code more often than on broken code.

Headless libraries spread the handlers in ({...getButtonProps()}, Radix asChild), so the keyboard path is real but lives in the hook, not this file. A clickable element with no role at all does not match here: that is a11y-semantic-html-first.

Incorrect (mouse only):

<div onClick={openMenu}>Open menu</div>

Correct (keyboard + pointer by default):

<button type="button" onClick={openMenu}>Open menu</button>

Source: SKILL.md on GitHub

No alerts7d5 checks · Risk SAFE
  • Gen Agent Trust Hub7d

    A comprehensive UI design and auditing skill that uses standard developer tools and trusted services like Tailwind CSS and placeholder asset APIs to build and verify React/Next.js interfaces. It includes explicit guardrails to prevent instruction following from analyzed project files.

  • Socket7d

    No alerts

  • Snyk7d

    Risk: LOW · No issues

  • Runlayer6mo

    4/5 files flagged

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Signed by skilld at e7db33d. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 25 minutes ago.

Activeupdated last week

README badge

README badge for mblode/agent-skills/ui-design