agentleFS
Sign inStart free
authrain-cloud-abdullahformuliauthrain-cloud-abdullahformuli/unslop/skills/audit/SKILL.md

audit

Skill1 starsChanged 17 days agoMITView on GitHub

Score an existing React + Tailwind site against the anti-slop checklist and produce DESIGN-AUDIT.md with evidence. Use when the user says their site "looks AI-generated", "looks generic", "feels off", asks "why is my site ugly", or wants a design audit/score before improving it. Read-only — never edits source.

193 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use delight, teach-impeccable and 10 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • HK-hubSkill

    delight

    Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.

    Also in 32 projects that use this

  • HK-hubSkill

    teach-impeccable

    One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines.

    Also in 19 projects that use this

  • zwy123zwySkill

    normalize

    将用户随意输入的提示词规范化为结构清晰、便于大模型执行的标准化提示词。适用于需要整理、统一提示词格式时调用。

    Also in 19 projects that use this

  • SkillPilotCHSkill

    level-up

    Eine Automatisierung pro Woche finden, scopen, shippen. Output landet als proposed-Eintrag in cadence.md mit konkreten Implementations-Schritten.

    Also in 12 projects that use this

  • ww-w-aiSkill

    pm-discovery

    PM Agent Team - Automated product discovery, strategy, and PRD generation. Runs PM analysis workflow to produce comprehensive PRD before PDCA Plan phase.

    Also in 3 projects that use this

  • +7 more from HK-hub

The file

We split this skill into the rules it gives an agent

5 rules. 0 are common, 4 are distinctive, and 1 is very specific to this project.

  • 0

    Common

    Most of the 175 edited versions we read keep these.

  • 4

    Distinctive

    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:

    Capture: Run the bundled screenshot script against the running site:

    line 22
  2. Very specific:

    Visual evaluation: Read all four screenshots.

    line 39
  3. Distinctive:

    Never modify source files, configs, or styles.

    line 58
  4. Distinctive:

    Every failure needs evidence a stranger could verify.

    line 59
  5. Distinctive:

    If the dev server can't start, report the build error and stop — that's a prerequisite bug, not a design finding.

    line 60

“Common” is measured: kept by at least 6 in 10 of the 175 edited versions of this file we could read. “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

Design Audit

Audit the current project's visual design and produce a scored, evidence-backed DESIGN-AUDIT.md. This skill is strictly read-only on source code — it writes only the audit report and screenshots.

Preconditions

  1. Confirm the project is React + Tailwind (look for tailwind.config.* or the Tailwind v4 CSS import, plus React in package.json). If it isn't, stop and say: v1 of unslop supports React + Tailwind only.
  2. The site must be viewable. Find the dev command (npm run dev or equivalent) and the port. Start it in the background if not already running.

Procedure

  1. Capture. Run the bundled screenshot script against the running site:
    node "${CLAUDE_PLUGIN_ROOT}/scripts/screenshot.mjs" <url> ./unslop/screenshots
    It captures 375 / 768 / 1024 / 1440 px full-page shots and reports horizontal overflow per viewport. If Playwright is missing, it prints install instructions — follow them, then re-run.
  2. Deterministic checks.
    node "${CLAUDE_PLUGIN_ROOT}/scripts/slop-scan.mjs" .
node "${CLAUDE_PLUGIN_ROOT}/scripts/contrast-check.mjs" <url>
    slop-scan greps the source for slop tells (stock palette, transition-all, arbitrary px values, uniform radius, weight sprawl) with file:line evidence. contrast-check reports WCAG AA failures on the rendered page.
  3. Visual evaluation. Read all four screenshots. Walk ${CLAUDE_PLUGIN_ROOT}/rules/anti-slop-checklist.md item by item — every item is PASS / FAIL / N-A with evidence (file:line from the scans, or a screenshot observation named precisely, e.g. "1440px: hero is centered headline + two buttons + 3-col icon grid → L1 FAIL"). Read key source files to confirm suspected failures; do not guess.
  4. Report. Write unslop/DESIGN-AUDIT.md:
    • Overall score (passes ÷ applicable × 100) and per-category scores.
    • Failures with evidence, grouped by category, referencing checklist IDs.
    • Top 5 fixes by visual impact, ordered, each mapped to checklist IDs.
    • Paths to the screenshots.
  5. Tell the user their score, the 2–3 most damning findings in plain language, and the next step: run /unslop:interview to define a design lane, then /unslop:retheme to fix it.

Rules

  • Never modify source files, configs, or styles. Audit only.
  • Every failure needs evidence a stranger could verify. "Feels generic" is banned.
  • If the dev server can't start, report the build error and stop — that's a prerequisite bug, not a design finding.

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