К основному содержанию
скилл CX Codex

jury — скилл для Claude Code: оценка сайта по критериям Awwwards

Снимает скриншоты всех типов страниц, замеряет LCP, CLS, FPS и доступность, потом отдельный критик выставляет баллы и список правок.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add juliobsz/skills --skill jury -a claude-code
Открыть на GitHub

Что делает jury

Скилл проходит по сайту краулером и снимает по одному представителю каждого типа страниц: главная, разделы, элементы коллекций, страница 404. Для каждой — десктоп на 1440, телефон на 390 с урезанным до среднего устройства процессором и медленным соединением, режим reduced motion, подсветка фокуса с клавиатуры и пары кадров «покой/наведение». Скрипт audit.mjs дополняет это метриками LCP, CLS, FPS, нарушениями axe и проверкой SEO и метаданных.

Баллы ставит свежий критик, который видит только скриншоты и замеры. Исходников, DESIGN.md и объяснений владельца ему не дают — иначе он оценивал бы замысел, а не экран. Четыре категории (Design, Usability, Creativity, Content) и шесть областей разработчика превращаются в карточку с доказательством под каждой цифрой и пронумерованным списком правок по убыванию влияния.

Для запуска нужны Node 20+, Playwright и axe-core в рабочей папке. Если в проекте их нет, скилл советует поставить всё в отдельный кеш-каталог, чтобы не трогать зависимости чужого проекта. Сайт за логином или паролем оценить не выйдет — нужен публичный адрес или локальная production-сборка. Dev-сервер для замеров не годится: неминифицированный JS и оверлеи портят цифры.

Какие задачи решает

  • Оценить лендинг по критериям Awwwards и понять, тянет ли он на Site of the Day
  • Собрать доказательства под каждой оценкой вместо вкусовых суждений
  • Проверить доступность клавиатурой, контраст и отклик на наведение
  • Прогнать SEO-аудит и метаданные вместе с визуальной проверкой
  • Сравнить два сайта бок о бок, каждый со своим критиком

Примеры запросов агенту

  • Оцени мой лендинг по критериям жюри Awwwards и дай список правок по убыванию влияния
  • Сделай дизайн-QA для localhost:4400, но перед этим собери production-версию
  • Сравни мой сайт с этим: оцени оба и положи карточки рядом

Как установить jury

1Через Skills CLI (Vercel)

npx skills add juliobsz/skills --skill jury -a claude-code

2Вручную: положить файлы

~/.claude/skills/jury/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/jury/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора2

Похожие

accessibility-testing kindlmann Скилл для проверки доступности: гоняет axe-core через Playwright, аудит клавиатуры и экранных дикторов, разбор ARIA. CX Codex +1 1 100установок playwright-best-practices currents.dev Справочник по тестированию на Playwright: от написания E2E-сценариев до Page Object Model. Помогает разбирать флакующие тесты, настраивать мокирование API и проверять доступность. CX Codex +1 98 500установок design-component plugin87 Создаёт спецификацию UI-компонента с анатомией, 8 состояниями, токенами и доступностью. Пригодится при проектировании контролов в дизайн-системе до написания кода. CX Codex +1 522установок Web Design Builder rknall Собирает HTML5-макеты и лендинги по описанию, а потом сам проверяет доступность и работу интерфейса через Playwright MCP. CX Codex +1 416установок next-cache-components-optimizer vercel Ускоряет отрисовку статического каркаса страниц в Next.js. Скилл находит медленные Suspense-границы через падающий e2e-тест Playwright и чинит навигацию. CX Codex +1 18 800установок browser-qa affaan-m Гоняет живой интерфейс через браузерный MCP: ошибки в консоли, Core Web Vitals, формы, скриншоты на трёх ширинах и axe-core. Выносит вердикт SHIP или DO NOT SHIP. CX Codex +1 4 900установок

Рядом в теме «Дизайн»

Всё по теме «Дизайн» →

Вопросы о jury

Как установить jury в Claude?

Выполните npx skills add juliobsz/skills --skill jury -a claude-code. Скилл появится в ~/.claude/skills/jury/SKILL.md и будет доступен по вызову /jury.

Что делает jury?

Снимает скриншоты всех типов страниц в нескольких режимах, замеряет LCP, CLS, FPS и нарушения axe, проверяет SEO. Затем отдельный критик без доступа к коду выставляет баллы и список правок.

Что нужно, чтобы скилл заработал?

Node 20+, Playwright и axe-core. Если в проекте их нет, ставьте в отдельный кеш-каталог, чтобы не добавлять зависимости в чужой репозиторий.

Исходный текст

SKILL.md · MIT
---
name: jury
description: Score any website the way an Awwwards jury would, from evidence alone. Screenshots every page type on desktop, a throttled phone and reduced motion, measures LCP, CLS, FPS, axe, keyboard focus and hover feedback, audits SEO and metadata, then a fresh critic that never sees the code scores Design, Usability, Creativity, Content and the six developer areas, with a ranked fix list. Use when someone asks to review, critique, score, rate or roast a website, portfolio or landing page, asks whether a site is good enough for Awwwards or Site of the Day, or wants design QA of a live URL or a local build. Not for building or redesigning a site; use /awwwards for that.
---

# /jury

Score a website the way the Awwwards jury would: from what a visitor sees and what the browser
measures, never from the code, the design notes or what the owner meant. Hand back a score card
with evidence for every number and a ranked list of fixes.

**Not affiliated with Awwwards.** The criteria and weights are theirs and public
(awwwards.com/about-evaluation); the scores are an estimate. Say so on every card.

**Skill root:** the directory containing this file (`$SKILL`; substitute the absolute path in
commands). The scripts need Node 20+ and Playwright, plus axe-core for the accessibility pass.
`references/quality-bar.md` has the system, the rubric and the critic brief.
`references/calibration.md` has the measured gap between this critic and real juries. It is for
you, for the score card. Never give it to the critic.

## Why blind

Anyone who knows what a site is meant to do scores the intent instead of the screen. A juror
gets a URL and a few minutes. So the critic gets only screenshots and measurements: no source,
no `DESIGN.md`, no README, no pitch from the owner. If the user explains the idea, hold it until
the score is in, then compare (step 5).

## Workflow

### 1. Target

- **A URL:** score what is deployed.
- **A local project, no URL:** build it and serve the production output. Never score a dev
  server: unminified JS and dev overlays wreck WPO and add console noise.
  - Next.js: `npm run build`, then `npx next start -p 4400` in the background.
  - Static output (Astro, Vite, Next `output: 'export'`):
    `node $SKILL/scripts/serve.mjs <dist|out> --port 4400` in the background.
  - Anything else: its own production build and start commands.
- **A dev URL only** (localhost with hot reload): build production instead if the project is
  here. If it isn't, score it and say the WPO numbers are pessimistic.
- **Several URLs** ("mine vs theirs"): run steps 3 to 5 for each, each with its own fresh
  critic, then put the cards side by side.
- **Behind a login or password:** it can't be scored. Ask for a public URL or a local build.

Evidence goes in `.jury/<host>/` in the current directory (`<host>` such as `example.com` or
`127.0.0.1-4400`). Use absolute paths for it below.

### 2. Tools

The scripts resolve Playwright and axe-core from their working directory.

- If the current project already has Playwright (`node -e "require.resolve('playwright')"`
  succeeds), run the scripts from there.
- Otherwise don't add dependencies to someone's project for a review. Install once into a cache
  folder outside it and run the scripts from that folder:
  ```bash
  mkdir -p ~/.cache/jury && cd ~/.cache/jury && npm init -y > /dev/null && npm i -D playwright axe-core
  ```
- If `shoot.mjs` reports no Chromium, run `npx playwright install chromium` once in that folder.

### 3. Evidence

```bash
node $SKILL/scripts/shoot.mjs <url> --crawl --nav --out <abs>/.jury/<host>/shots
node $SKILL/scripts/audit.mjs <url> > <abs>/.jury/<host>/audit.txt
```

- `shoot.mjs --crawl` takes one page of every type (home, each top-level page, one item per
  collection) plus the 404. For each: desktop at 1440, a phone at 390 throttled to a mid-range
  device (4x CPU, slow 4G), reduced motion, keyboard focus, rest/hover pairs for pointer
  targets, idle motion, and page-transition frames. Allow a minute or two per page.
- `audit.mjs` exits with code 1 when it finds a FAIL. That is a finding, not a broken run.
- For a quick look at one page, drop `--crawl` and pass `--max 10` to the audit. Say on the
  card that it covers one page.
- **Check the evidence is real before scoring.** Open `shots/home/d-01-hero.png` and
  `shots/summary.json`. A bot challenge, a login wall, an error page, or a blank frame with
  errors in `report.json` means there is nothing to score: stop and tell the user. A cookie
  banner is not a reason to stop. Visitors see it too, so it counts.
- Crawling is light: at most 40 HTML pages for the audit and 8 page types for screenshots.
  Don't raise those limits on a site the user doesn't own.

### 4. Score

- **With subagents:** give a fresh one the critic brief from `references/quality-bar.md`
  ("Critic brief"), with its three paths filled in (the rubric, `.jury/<host>/shots/`,
  `.jury/<host>/audit.txt`). Give it nothing else, and never `calibration.md`. It reads every
  screenshot, so your own context stays small.
- **Without subagents:** score it yourself under the same brief, from the evidence alone, and
  mark the card as a self-score.
- **If you built or edited this site in this conversation**, a self-score isn't blind. Use a
  subagent, or say on the card that the score is not independent.

### 5. Score card

Write `.jury/<host>/scorecard.md` and give the same card in chat:

```markdown
# <site>: jury score
Estimate, not affiliated with Awwwards. <Independent critic | Self-score>, from <n> pages on <date>.

**The idea, as the critic read it:** one sentence
**Critic overall: 6.2** (0.4 Design + 0.3 Usability + 0.2 Creativity + 0.1 Content, on the critic's strict scale)
**Jury estimate: about 7.3** (critic + 1.1, measured on two recent Sites of the Day)
**Band, from the estimate:** below Honorable Mention (under 6.5) | Honorable Mention range (6.5 to 7.1) | Site of the Day range (7.2 and up)

| Criterion | Score | Evidence |
|---|---|---|
| Design (40%) | | file or report field, and what it shows |
| Usability (30%) | | |
| Creativity (20%) | | |
| Content (10%) | | |

| Developer | Score | Evidence |
|---|---|---|
| Semantics/SEO | | |
| Animations/Transitions | | |
| Accessibility | | |
| WPO | | |
| Responsive | | |
| Markup/Meta-data | | |

## Fixes, most score first
1. [Usability] m-03: what is wrong, and what to change
2. ...

## Measured
Mobile LCP and CLS, loader time, FPS, serious axe violations, overflow, `noHoverChange`,
`colorOnly`, idle motion, audit FAIL and WARN counts (from `summary.json` and the audit).

Not scored: anything stills can't show (how motion feels, sound).
```

Take the offset for the jury estimate from `references/calibration.md` (the 1.1 above is the
offset when this was written) and follow its rules: the critic's own numbers stay as scored, and
the developer areas get no jury estimate.

Then, in chat only:
- If the user told you what the site is meant to say, one line: does the critic's reading
  match? If not, the site isn't saying it, and that is the first Creativity fix.
- The two fixes that would move the overall most.
- An offer: fix the list in this project if it's here, or run `/awwwards` in it for a redesign.

### Re-scoring after fixes

Run steps 3 to 5 again with a **new** critic, never the earlier one, and never show it the
earlier card: it would anchor on the old numbers. Before writing the new card, rename the old
one to `scorecard-<n>.md`, then show the change per category.

## Rules

- No evidence, no points. Every score cites a screenshot file or a report field. Start each
  category at 6 and make the evidence earn every point above it.
- Don't argue a score up. Dispute one only by pointing at a screenshot the critic misread.
- Judge the site on screen. Don't propose a new concept; fix what's there.
- Specific, not cruel: "m-03: the title wraps to five lines at 390 px; drop it to 14vw", never
  "the typography needs work". Someone made this.

© juliobsz · MIT · juliobsz/skills

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой