agentleFS
Sign inStart free
ankitluthraankitluthra/frontend-quality-graph/skills/frontend-design-critique/SKILL.md

frontend-design-critique

Skill0 starsChanged 3 months agoMITView on GitHub

Sameness Shield review for UI — composition, brand, typography, and anti-vibe-coded sameness. Must FAIL generic AI looks. Invoked by frontend-graph; pairs with scripts/sameness-check.py hard gate.

The file

We split this skill into the rules it gives an agent

3 rules. About 0 are common, 2 are distinctive, and 1 is very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈2

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Ask: *If we stripped the logo/name, could this pass for three other AI-built products?* If yes → FAIL with a roast line:

    line 18
  2. Distinctive:

    If yes → FAIL with a roast line:

    line 19
  3. Very specific:

    If VERDICT: FAIL, the worker must rework before done — same as a failing sameness-check.py.

    line 54

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Frontend design critique (Sameness Shield — human judgment)

Review visual design and composition only. Return PASS or FAIL.

The machine gate scripts/sameness-check.py catches pattern hits in code.
You catch composition sameness the regex cannot (card-soup hero, weak brand, SaaS starter rhythm).

Sameness Shield verdict (required)

Ask: If we stripped the logo/name, could this pass for three other AI-built products?
If yes → FAIL with a roast line:

Sameness Shield: FAIL — <specific lookalikes, e.g. "Inter + purple glow + 3 feature cards">.

Be specific. Vague “feels generic” is not enough.

Fail if any apply (unless the repo’s real design system clearly requires it)

  1. First viewport reads like a dashboard when it shouldn’t
  2. Brand/product name weak (nav-only); headline overpowers brand
  3. Brand test fails: removing nav → interchangeable site
  4. Inter / Roboto / Arial / system-ui as hero type on visually led work
  5. Flat single-color marketing background with no atmosphere
  6. Landing hero: inset / side-panel / rounded media card / collage (not full-bleed dominant)
  7. Hero clutter: stats, schedules, floating badges, promo chips on hero media
  8. Decorative cards in hero / card-soup not needed for interaction
  9. Sections with multiple competing jobs
  10. Vibe clichés: purple→indigo gradients, glow blobs, pill spam, cream+#terracotta serif template, broadsheet hairlines, emoji-as-icon
  11. Gradient-only hero with no real product/place/atmosphere anchor
  12. SaaS starter rhythm: nav + centered headline + dual CTAs + 3 feature cards + logo cloud + testimonials with no brand-specific composition

Pass guidance

One job per section; expressive type; deliberate palette (CSS variables); real visual anchor; ≤3 intentional motions.

Output format

VERDICT: PASS|FAIL
Sameness Shield: PASS|FAIL — <one sharp sentence>
Findings:
- [file or area] issue → fix
(max 8)

If VERDICT: FAIL, the worker must rework before done — same as a failing sameness-check.py.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free