agentsclimarketplace

Web design auditor

Skill ancuica/web-design-pipeline/skills/web-design-auditor

A closed loop of three agent skills for website design: analyze a site, recreate its design system as a static-site template, and audit the build against the original analysis.

Install
npx -y skills add ancuica/web-design-pipeline --skill web-design-auditor

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Audit how faithfully a built or live website embodies a design system described in a website-analysis note. Use after a site is built (from a template or by hand) to grade fidelity to the original analysis — palette, type, layout grammars, voice registers, naming, accessibility, and especially whether the defining "one move" survived. Returns a scored report and a prioritized punch list, separating intentional posture from real regressions. Closes the analyze -> template -> build loop with feedback.

SKILL.md

5.2 KB, ~1.1k tokens by cl100k_base, as published. Nobody here has run it

Web Design Auditor

Compare a built site against the website-analysis that specifies its intended design system, and report where the build is faithful, where it drifted, and what to fix. This is the verification half of the analyze → create → build pipeline.

When to use

  • A site has been built (filled from a template, hand-coded, or is a live URL) and you want to know if it actually embodies the analyzed design system.
  • You want a feedback step that loops back into the analysis/template.

Inputs

  1. The analysis (the contract) — a website-analysis note covering artistic decisions (typography, color, layout, imagery, motion, iconography, naming), philosophical decisions (mission, voice, theory of commerce, posture), and the named "one move." If it includes a "keep vs. fix" / posture section, treat that as authoritative for distinguishing intent from bugs.
  2. The build (the subject) — one of: a directory of *.html/template files, a local dev server, or a live URL. If a URL, fetch read-only.

If either input is missing, ask for it before auditing. Never guess the contract.

Procedure

  1. Extract the contract from the analysis into a checklist:

    • Palette (intended hexes / count of hues), type system (faces + how they're used), layout grammar(s), voice registers (and where each belongs), naming system, motion budget, iconography/props logic, and the one move.
    • Pull the keep-vs-fix posture: which "mess" is intentional, which is neglect.

  2. Observe the build with evidence, not assumption:

    • Read the HTML/CSS (use file tools; for a URL, fetch). Record actual palette hexes, @font-face/linked fonts, layout structure, real copy (for voice), presence/absence of the one-move page or mechanism, and accessibility basics (alt, focus states, heading order, aria-hidden on ornament).
    • Cite the file + line or the rendered string for each observation.

  3. Compare per dimension → verdict with evidence:

    • MATCH — build honors the contract.
    • DRIFT — present but off (wrong hue count, an elegant font pairing where a kit-bash was required, a softened voice).
    • MISSING — required element absent.
    • REGRESSION — a genuine defect (broken link, unlabeled image, legal page to nowhere).
    • POSTURE — looks like a defect but the analysis marks it intentional → do not flag as a bug.

  4. Judge the one move explicitly. State whether it survived intact, was watered down, or is gone. If gone or diluted, that is the headline finding regardless of other scores.

  5. Score and prioritize. Give each dimension 0–5 against the rubric, compute an overall, then emit a punch list ordered by severity (one-move and regressions first; cosmetic drift last). Every item: what, where (evidence), why it diverges, and the minimal fix.

Scoring rubric (per dimension, 0–5)

  • 5 indistinguishable from the contract's intent
  • 4 faithful, minor cosmetic drift
  • 3 recognizable but noticeably off
  • 2 present but contradicts the intent
  • 1 token gesture only
  • 0 absent

Dimensions: Palette · Typography · Layout grammar(s) · Imagery/art direction · Motion · Iconography/props · Naming · Voice registers · The one move (weight ×2) · Accessibility · Posture fidelity (kept intentional quirks, fixed real defects).

Report format

# Design Fidelity Audit — <site> vs <analysis>

## Verdict
<one paragraph: overall fidelity + the single most important finding>

## The one move
STATUS: intact | diluted | missing
<evidence + impact>

## Scorecard
| Dimension | Score | Verdict | Note |
| --------- | :---: | ------- | ---- |
| ...       | 4/5   | DRIFT   | ...  |
Overall: <n>/<max>

## Punch list (ordered by severity)
1. [REGRESSION] <what> — <file:line / evidence> — fix: <minimal change>
2. [MISSING]    ...
3. [DRIFT]      ...

## Correctly intentional (do NOT change)
- <posture items the build rightly preserved>

Rules

  • Evidence over opinion. Every verdict cites a hex, a filename+line, or a rendered string. State what you inspected and what you couldn't (e.g. "cannot verify pixel rendering without a browser").
  • Honor posture. Quirks the analysis marks intentional are not bugs. Flagging them is itself an error.
  • The one move is load-bearing. Weight it double; lead with it if it's compromised.
  • Be specific in fixes. "Use a kit-bash of the five named faces" not "improve typography."
  • Don't rebuild. This skill reports; it does not edit the site unless the user asks.

Reference

See reference.md for a worked checklist derived from the re-animators.net analysis and a filled example scorecard.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.