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-media-captions.md

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

Caption Video and Transcribe Audio

Deaf and hard-of-hearing users get nothing from uncaptioned media. Video needs synchronised captions via <track kind="captions">; audio-only needs a text transcript. Auto-generated captions alone are not sufficient for meaning-critical media.

Detection

Find files that render <video> or <audio> and never ship a captions track; a hit is confirmed when the media carries speech or meaning-critical sound.

rg -lP '<video\b|<audio\b' -g '*.tsx' -g '*.jsx' src/ \
| xargs -r rg --files-without-match -P 'kind="captions"'

A muted decorative background loop has no audio to caption and is not a finding. A shared player component that injects its own <track> also matches at each call site, so read the player before reporting.

Incorrect (video with no captions track):

<video src="/demo.mp4" controls />

Correct (captions track + transcript link):

<video controls>
  <source src="/demo.mp4" type="video/mp4" />
  <track kind="captions" src="/demo.en.vtt" srcLang="en" label="English" default />
</video>
<a href="/demo-transcript">Read the transcript</a>

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