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-invented-behaviour.md

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

Product behaviour the brief never stated

The brief said the product keeps both versions when offline edits conflict, and the settings screen offers "Keep both versions" or "Ask me". The brief said LAN first with an encrypted relay fallback, and the screen offers "Relay only". Neither mode exists, and one contradicts the fact it sits beside. A user who reads a setting believes the product can do it; a stakeholder who reviews the screen assumes someone decided it. The same goes for an app sidebar with Overview and Files pages nobody specified, a "contact your administrator" line for a product with no admin role, and "most sync tools pick a winner" about competitors nobody researched. Each is a claim about the product or the market, invented to fill a layout, and it ships as a commitment.

slop-unverifiable-proof owns invented numbers, logos, and testimonials. This rule owns invented capability: settings, modes, roles, integrations, navigation, and comparisons.

Precondition: this rule requires the brief

The finding is "not in the source of truth", so it needs one: the prompt, the PRD, product docs, or the existing app. Without any of them, report result unknown and list the candidate claims for a human to confirm. Never report a capability as invented because it seems unlikely.

Detection

Three candidate sources, each read against the brief.

# 1. Choice sets: every option a user can pick, and the union types behind them
rg -nUP '<input\b[^>]*\btype="(radio|checkbox)"|role="(switch|radio|checkbox)"|<select\b' -g '*.tsx' -g '*.jsx' src/
rg -nP '\btype \w*(Mode|Role|Policy|Strategy|Level|Plan|Tier)\w* = ' -g '*.tsx' -g '*.ts' src/

# 2. Claims about roles, integrations, and competitors
rg -niP "\b(most|other|traditional|legacy) (sync )?(tools|apps|services|products)\b|\bunlike\b|\bcompetitors?\b|\badmin(istrator)?s?\b|\b(SSO|SAML|SCIM|audit log|webhook)s?\b|\b(Slack|Zapier|Dropbox|Google Drive|OneDrive|iCloud)\b" -g '*.tsx' -g '*.jsx' src/

# 3. App shell around a single requested screen
rg -nP '<(aside|nav)\b' -g '*settings*.tsx' -g '*Settings*.tsx' src/

For signal 1, list each option label and check it against the brief: an option the brief did not state is a candidate, and an option that contradicts a stated fact is confirmed. For signal 3, read the nav items; a sidebar of destinations that were not requested is confirmed when none of them route anywhere real.

False positives

  • The existing app. When the screen is added to a real product, its sidebar, roles, and settings already exist; read them from the codebase before reporting. The rule fires on new surfaces that invent structure, not on ones that inherit it.
  • Standard controls implied by the feature. Choosing the synced folder, pausing sync, and signing out follow from "desktop folder sync" without being listed. The test is whether a reasonable reader of the brief would expect the control, not whether the word appears in it.
  • Competitor claims with a source. A comparison page that names the tool and links its docs is research, not invention.

Fix

Render only what the brief states, and ask about the rest.

// before: two modes, one contradicting the brief
<Radio value="keep-both">Keep both versions</Radio>
<Radio value="ask">Ask me</Radio>

// after: the fixed behaviour, stated as fact
<p>When two people edit the same file offline, Northwind keeps both versions side by side.</p>

Where a real choice probably exists but was not specified, leave it out and list it as an open question in the hand-off. A missing setting is easy to add; a shipped one is a promise.

Why this needs a rule

A settings page with no settings looks unfinished, so a model supplies plausible ones, and plausible is exactly what makes them hard to spot: every invented option reads like a product decision that someone else made.

Default tier and overrides

Defaults to: fix-this-sprint

Surface Tier
Settings, onboarding, or any control the user can change fix-this-sprint
Marketing page capability or competitor claim fix-this-sprint
Prototype or design exploration explicitly scoped as speculative backlog

Never a release blocker on its own, but an option that contradicts a stated fact should not survive review.

Suppression

{/* ui-audit-ignore:slop-invented-behaviour, relay-only mode is in PRD-142 */}

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 25 minutes ago.

Activeupdated last week

README badge

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