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.

rulesslop-slogan-headings.md

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

Headings built from stacked slogan fragments

"Same file. Different flights. Both edits kept." "Good questions. Clear answers." "Stay in sync. Keep it simple." Each heading is two to four words, a full stop, and a line break, repeated. The visitor has to assemble the meaning from the pieces, and often there is none to assemble: "Keep it simple" says nothing about this product and could head any page on the web. Two different models wrote "Stay in sync. Keep it simple." for the same brief, which is the tell: the line is the average of a thousand landing pages, not a sentence about this one. Stacked fragments also flatten the page, since every heading has the same clipped cadence and none reads as more important.

A single short heading is fine, and so is one fragment pair that carries a concrete fact ("One plan. $8 a seat."). The failure is the stack as house style, or a stock line any brand could print.

Detection

Headings that open with two sentences of at most four words each.

rg -nUP "<h[1-3]\b[^>]*>(?:\s|<br\s*/>|<span[^>]*>|</span>)*[A-Z\$\d][\w’'\$,-]*(?:[ \t]+[\w’'\$,-]+){0,3}[.!?](?:\s|<br\s*/>|<span[^>]*>|</span>)+[A-Z\$\d][\w’'\$,-]*(?:[ \t]+[\w’'\$,-]+){0,3}[.!?]" \
  -g '*.tsx' -g '*.jsx' src/

Confirmed when two or more headings on one page match, or when one match contains no noun specific to the product (a name, a number, a feature). Also check any heading against the stock list: "Stay in sync", "Keep it simple", "Built for teams", "Work smarter", "Ready when you are", "Good questions".

False positives

  • A fragment pair with a fact. "One plan. $8 a seat." names the price; one such heading on a page is a choice. Report it only as part of a stack.
  • Brand taglines set by the company and used across its site are a decision, not a default. Check the existing site or brand guide before reporting the hero line.
  • Headings rendered from a CMS ({section.title}) will not match and are not this rule's to judge.

Fix

Write one sentence that says what happens.

// before
<h2>Same file.<br />Different flights.<br />Both edits kept.</h2>

// after
<h2>Two people edit the same file offline, and both versions are kept</h2>

For wording beyond the heading, hand the copy to ghostwriter, whose tells list carries the same pattern for prose.

Why this needs a rule

Clipped fragment stacks are the current frontier-model default for display type: they look confident at 72px and cost nothing to generate, while a sentence specific to the product requires knowing what the product does.

Suppression

{/* ui-audit-ignore:slop-slogan-headings, hero line is the brand tagline from the style guide */}

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