skilld
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.

Ask your Agent

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

This session only. Nothing lands on disk.

guidelinesimages.md

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

Images

Covers: photos, thumbnails, screenshots, app mockups, product images, media frames, and image borders/outlines.

Design Rules

  • Never border photos or thumbnails: use outline-1 -outline-offset-1 outline-black/5 or outline-black/10 if a visible edge is needed
  • For screenshots and app UI mockups: outline-1 -outline-offset-1 outline-black/5 or outline-black/10 on light surfaces, outline-white/10 on dark
  • When the screenshot is proof people must inspect, keep it straight-on, legible, and large enough to read. Avoid perspective, depth-of-field, aggressive crops, and fake device or browser chrome that obscure product detail.
  • Put the shadow and outline on the same element that clips, not on a child of it. A rounded overflow-hidden parent clips its descendants, so a child carrying shadow-* loses the shadow at the corners; the clipping element's own outline and shadow are never clipped.

Coding Rules

  • Use alt="" when adjacent visible text identifies the subject

Source: SKILL.md on GitHub

Third-party checks

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

Provenance

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 4 hours ago.

Activeupdated last week

README badge

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