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

reimagine-it-audit — скилл для Claude Code

Скилл запускает 19 детерминированных проверок HTML-страницы без обращения к LLM. Находит проблемы с вёрсткой, анимацией, типографикой и доступностью перед релизом.

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

Что делает reimagine-it-audit

Скилл проверяет HTML-разметку по 19 правилам в 6 категориях: типографика, цветовая палитра, анимация, контент, структура DOM и скорость загрузки. Он выявляет запрещённые шрифты по умолчанию, строки длиннее 65 символов, анимацию через свойства вне композитора, картинки без указания размеров и текстовые заглушки.

Проверка запускается локально командой npx reimagine-it audit или через Python в scripts/audit.py. Обращений к сторонним нейросетям нет, поэтому ключ API не требуется. Для сборки в CI предусмотрен вывод в --json и коды завершения: 0 означает чистый прогон, 1 выдаёт предупреждения, а 2 останавливает процесс из-за критических ошибок.

Правила доступности MOT-02 и MOT-03 работают как жёсткие блокировщики. Если у интерактивных элементов удалён контур фокуса или отсутствует медиазапрос prefers-reduced-motion, скрипт сразу завершит аудит со статусом ошибки.

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

  • проверить доступность фокуса и реакцию на prefers-reduced-motion
  • найти заполнители текста, смайлики и лишние теги br
  • обнаружить картинки без размеров и анимации вне композитора
  • проконтролировать ширину строки и запрещённые системные шрифты

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

  • /reimagine-it audit path/to/page.html
  • Проверь вёрстку страницы gold/webpage/after.html через /reimagine-it audit
  • Запусти аудит дизайна с выводом в JSON для CI

Как установить reimagine-it-audit

1Через Skills CLI (Vercel)

npx skills add Kayforkind/reimagine-it --skill audit -a claude-code

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

~/.claude/skills/audit/SKILL.md

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

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

Вопросы о reimagine-it-audit

Как установить reimagine-it-audit в Claude Code?

Выполните команду npx skills add Kayforkind/reimagine-it --skill audit -a claude-code. Файл конфигурации сохранится в ~/.claude/skills/audit/SKILL.md.

Что делает reimagine-it-audit?

Запускает 19 детерминированных тестов HTML-документа по категориям шрифтов, палитры, анимации, контента, разметки и производительности.

Нужен ли API-ключ для работы аудита?

Нет. Проверки выполняются детерминированным кодом на Node.js или Python без обращения к сторонним LLM.

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

SKILL.md · MIT
---
name: reimagine-it-audit
description: >-
  Design Health — runs 19 deterministic quality checks on HTML output.
  Use when the user says /reimagine-it audit, "audit this page", "check design quality",
  or wants to verify craft-floor compliance before shipping. Catches blank plates,
  missing focus rings, non-compositor motion, off-palette accents, dead motion,
  fabricated content. No LLM, no API key. CI-ready with --json and exit codes.
  Part of the reimagine-it Content-Derived Design suite.
license: MIT
metadata:
  author: Kayforkind
  version: "2.15.0"
  parent: reimagine-it
  hosts:
    - claude-code
    - cursor
    - codex
    - copilot
    - gemini-cli
keywords:
  - audit
  - quality-check
  - craft-floor
  - design-health
  - html-lint
  - accessibility-check
  - content-derived-design
category: Testing
capabilities:
  - html-audit
  - quality-verification
  - craft-floor-enforcement
trigger_phrases:
  - /reimagine-it audit
  - audit this page
  - check design quality
  - verify craft floor
  - design health check
  - audit my HTML
---

# /reimagine-it audit

**Parent:** [../SKILL.md](../SKILL.md) — the full Content-Derived Design engine. This sub-skill handles only the deterministic quality check.

Runs `npx reimagine-it audit` — 19 checks across 6 categories (`src/audit.js`; Python `scripts/audit.py` is the CI mirror):

| Category | Checks | What it catches |
|----------|--------|-----------------|
| Typography | 3 | Banned default fonts, type-scale range, measure > 65ch |
| Palette | 3 | Palette drift, `transition: all`, un-styled `::selection` |
| Motion | 4 | Outline removal, missing `prefers-reduced-motion`, missing `:focus-visible`, non-compositor animation |
| Content | 4 | Placeholder copy, vibe adjectives, emoji farm, `<br><br>` spacing |
| Structure | 3 | CDN, external font fetch, figure system doing no work |
| Performance | 2 | Images without dimensions, long pages without `content-visibility` |

## Usage

```bash
# Agent
/reimagine-it audit path/to/page.html

# CLI (Node — no Python required)
npx reimagine-it audit gold/webpage/after.html
npx reimagine-it audit gold/webpage/after.html --verbose
npx reimagine-it audit gold/webpage/after.html --json

# CI mirror
python scripts/audit_all.py
```

## Exit codes

| Code | Meaning |
|------|---------|
| 0 | CLEAN — no issues |
| 1 | WARNINGS — advisory only, no blockers |
| 2 | FAIL — must fix before shipping |

## Procedure

1. If the user passed a file path, run `python scripts/audit.py <path>`.
2. If no path, run `python scripts/audit_all.py` to audit all gold files.
3. Report the verdict with a summary table.
4. For each failure, name the specific rule and the fix.
5. If `--verbose`, show per-category breakdown.
6. If `--json`, output machine-readable JSON for CI.

## Must not

- Use an LLM for the check — this is deterministic Python only
- Skip the craft-floor rules (MOT-02, MOT-03 are hard blockers)
- Report "clean" without actually running the script
- Invent checks not in `scripts/audit.py`

© Kayforkind · MIT · Kayforkind/reimagine-it

Похожие скиллы

Все скиллы по теме «Тесты и QA» →
improve-codebase-architecture Matt Pocock Скилл ищет архитектурные узкие места в кодовой базе и показывает варианты углубления модулей в HTML-отчёте. Подойдёт для ревью перед рефакторингом. 1 163 035установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок tdd Matt Pocock Скилл управляет циклом красный-зелёный в TDD: проверяет, что тесты пишутся до кода, держит их на уровне публичных интерфейсов и не завязывает на внутреннюю структуру. 1 141 062установок skill-creator официальный anthropics Помогает создать новый скилл, доработать существующий и проверить результат через тестовые промпты и оценки. 414 180установок agent-browser vercel-labs Скилл управляет браузером через CLI: открывает страницы, заполняет формы, нажимает кнопки и проверяет веб-приложения. Подходит для задач, где агенту нужно действовать в интерфейсе. CX Codex +1 1 200 000установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок

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

reimagine-it-variations Скилл создаёт несколько дизайн-направлений из одного HTML-файла и собирает их на контрастном листе. Пригодится для сравнения вариантов до выбора финального. CX Codex +1 ★ 212звёзд репо reimagine-it-lock Скилл снимает палитру, шрифты, мотивы и анимацию с готового HTML-файла и сохраняет их как переносимый набор для повторного использования. CX Codex +1 ★ 212звёзд репо reimagine-it-infographic Строит статистический инфографический плакат строго по фактам из переданного файла. Помогает визуализировать данные без шаблонных диаграмм и выдуманных метрик. CX Codex +1 ★ 212звёзд репо reimagine-it-generate Читает HTML-страницу и перестраивает её в новом визуальном направлении — лендинг, инфографику, дашборд или одно из 17 других. Факты из исходника сохраняются, меняется только композиция. CX Codex +1 ★ 212звёзд репо reimagine-it-extract Вытаскивает из HTML-файла заголовок, ссылки, имена, даты, числа, почты и палитру в JSON. Ничего не перерисовывает — только показывает, что видит движок. CX Codex +1 ★ 212звёзд репо reimagine-it Скилл анализирует HTML-страницу и создаёт отдельную версию на основе её текста и цветов. Пригодится, когда нужно переосмыслить существующую страницу или сделать инфографику. CX Codex +1 ★ 212звёзд репо

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

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