All skills
mblode avatar

/ui-design

@e7db33d
by Matthew Blodemblode/agent-skills134 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.

rulesslop-decorative-ordinals.md

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

Ordinal numbers on items that are not a sequence

Three feature cards labelled "01", "02", "03": "Your folder, in sync", "Two edits? Keep both", "Local comes first". A number tells the reader that order matters, that step two depends on step one, or that there is a fourth to come. Here nothing does: the cards can be shuffled without changing a word, so the reader goes looking for the sequence, finds none, and learns that this page's typography says things it does not mean. The zero-padding makes it worse, since "01" borrows the look of a spec sheet or an index for three items.

Numbering is right when the order is real: install steps, a setup flow, a ranked list, or a fallback chain ("1. Local network, 2. Encrypted relay").

Detection

Zero-padded ordinals in item data or rendered as a lone label.

rg -nP "\b(number|num|step|index|idx|no|label|eyebrow)\s*:\s*[\"'\`]0[1-9]\b|>\s*0[1-9]\s*[./)]?\s*<" -g '*.tsx' -g '*.jsx' src/

Also check a .map((item, i) => ...) that renders String(i + 1).padStart(2, "0") or {i + 1} as a label on a card. For each hit, read the items in order and ask whether any of them depends on the one before. Confirmed when the answer is no.

False positives

  • Real procedures. "1. Install, 2. Pick a folder, 3. Invite your team" is a sequence; keep its numbers, and prefer an <ol> so assistive tech announces it.
  • Row numbers, line numbers, and version counters inside tables, code views, and changelogs are data.
  • Timestamps, prices, and dates that start with a zero (09:00, $0.50, 05/2026) can match the second pattern; they are not ordinals.

Fix

Drop the numbers, or earn them with a real sequence and an ordered list.

// before: order implied, none exists
<span className="font-mono text-[11px]">{feature.number}</span>
<h3>{feature.title}</h3>

// after: the cards stand on their titles
<h3>{feature.title}</h3>

Why this needs a rule

Zero-padded ordinals are a current model default for any group of three, and they pass a glance review because they look deliberate; only reading the items reveals there is no order to number.

Suppression

{/* ui-audit-ignore:slop-decorative-ordinals, these are the three setup steps in order */}

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 2 days ago.

Activeupdated last week

README badge

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