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.

rulesa11y-disabled-control-tooltip.md

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

Do not put tooltips on disabled controls

A tooltip on a disabled button never reaches keyboard or screen-reader users: disabled controls are omitted from the tab order, so the reason the action is blocked is invisible. Mouse users see a hover hint; everyone else hits a dead control with no explanation.

Wrap the control and put the message on the wrapper, or keep the control enabled and handle the blocked action with an inline error. Do not use pointer-events-none on the button plus a tooltip on a parent as a substitute unless the parent is focusable and named.

Detection

Search for disabled on a control that sits inside a tooltip trigger, or a tooltip whose child is a disabled button.

rg -nUP '<[^>]*\bdisabled\b[^>]*>[\s\S]{0,400}<(Tooltip|HoverCard)' -g '*.tsx' -g '*.jsx' src/
rg -nUP '<(Tooltip(Trigger)?|HoverCard)[^>]*>[\s\S]{0,500}\bdisabled\b' -g '*.tsx' -g '*.jsx' src/

A native title on a disabled button matches the same failure. Skip aria-disabled="true" controls that remain focusable and expose the reason via aria-describedby.

Incorrect (tooltip on a disabled button):

<Tooltip content="You need billing access">
  <button type="button" disabled>
    Invoice
  </button>
</Tooltip>

Correct (focusable wrapper carries the message):

<Tooltip content="You need billing access">
  <span tabIndex={0} className="inline-flex">
    <button type="button" disabled>
      Invoice
    </button>
  </span>
</Tooltip>

Source: SKILL.md on GitHub

No alerts8d5 checks · Risk SAFE
  • Gen Agent Trust Hub8d

    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.

  • Socket8d

    No alerts

  • Snyk8d

    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 1 hour ago.

Activeupdated last week

README badge

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