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-image-alt-text.md

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

Give Every Image a Correct Alt Attribute

Every <img> needs an alt: describe the purpose for informative images, use an empty alt="" for decorative ones so screen readers skip them. A missing alt makes the file name get read aloud. The alt is also what renders when the image itself fails to load.

Detection

Search for <img> tags with no alt attribute anywhere in the tag, including tags split across lines.

rg -nUP '<img\b(?![^>]*\balt=)[^>]*>' -g '*.tsx' -g '*.jsx' -g '*.html' src/

A wrapper that forwards props (<img {...rest} />) matches while every call site passes alt, so check the callers before reporting. The grep also cannot judge an alt that exists but is wrong, so read the decorative images separately: alt="decorative swirl divider" needs to become alt="".

Incorrect (missing alt, and decorative image announced):

<img src="/chart.png" />
<img src="/divider.svg" alt="decorative swirl divider" />

Correct (purpose described; decorative image silenced):

<img src="/chart.png" alt="Revenue grew 40% from Q1 to Q2" />
<img src="/divider.svg" alt="" />

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