09 · Audit Checklist · методология¶

Зачем этот файл¶

CEO 2026-05-06: «когда мы будем стартовать проверять аудит экранов синдиката и остальных — ты мог супер точно и легко следовать этим правилам». Этот файл — пошаговый протокол: от «у нас есть продукт X с N экранами» до «закрыли все 4 призмы, push в production».

Используется для: - Audit syndicate (next priority) - Audit gate-admin (после syndicate) - Audit любого нового продукта/раздела - Periodic audit existing продуктов (каждый Q1/Q3)

Pre-flight check (15 мин)¶

Перед началом аудита нового продукта — обязательная подготовка.

Шаг 1 · Inventory¶

Перечислить все экраны продукта:

cd /Users/a/Documents/GOLDJAXE/claude/design.goldjaxe.ai/ecosystem-prototype/[product]/
ls *.html
grep -l "<title>" *.html

Записать в audit-report:

## Inventory
- Total screens: [N]
- List:
  1. landing.html
  2. dashboard.html
  3. ...

Шаг 2 · Categorize per type¶

Каждый экран отнести к одному из 3 типов (см. 01-mental-models.md § 1): - 🅰 UI-app — продуктовый интерфейс (after login) - 🅱 Marketing/Landing — для cold trafic - 🅲 Premium artifact — статический deliverable

Это определит ожидания (footer / typography / hero).

Шаг 3 · Snapshot baseline¶

Screenshot каждого экрана в обеих темах через Chrome MCP:

// Per экран
await navigate(url);
await javascript_tool({ text: "document.documentElement.setAttribute('data-theme','dark')" });
await screenshot();
await javascript_tool({ text: "document.documentElement.setAttribute('data-theme','light')" });
await screenshot();

Сохранить screenshots для before/after compare.

Шаг 4 · Identify ближайшие эталоны¶

Какие из 5 эталонных экранов наиболее близки к каждому экрану продукта? - landing.ai/landing.html — для marketing pages - academy/login.html — для auth screens - academy/checkout-success.html — для status/success screens - academy/lesson-completed.html — для completion screens - academy/onboarding.html — для onboarding flows

Это даст референс для compare.

Шаг 5 · Запустить preview server¶

cd /Users/a/Documents/GOLDJAXE/claude/design.goldjaxe.ai
python3 -m http.server 8090 --bind 127.0.0.1 &

Verify: curl http://127.0.0.1:8090/VERSION → должно вернуть текущую версию.

Шаг 6 · Создать audit-files¶

Для каждой призмы — отдельный файл:

/claude/audit-YYYY-MM-DD-[product]-prism1.md
/claude/audit-YYYY-MM-DD-[product]-prism2.md
/claude/audit-YYYY-MM-DD-[product]-prism3.md
/claude/audit-YYYY-MM-DD-[product]-prism4.md

Использовать template из § Sample audit-report (ниже).

Призма 1 · UI Kit · структурный аудит¶

Время: 45-60 мин на 10 экранов.

Чек-лист per экран¶

[ ] Header canonical v3.2 (77px height + cube 44 + wordmark 17.5 + subline 14)
[ ] Header dark immutable (не адаптируется на light)
[ ] Wordmark пара GOLDJAXE (gold) + [ PRODUCT ] (white br)
[ ] Subline присутствует (контекстный subtitle)
[ ] Search присутствует если nav-heavy
[ ] Status chip присутствует если applicable
[ ] Lang switcher RU/EN
[ ] Theme toggle ☀/🌙
[ ] Profile button (если authenticated context)

CSS hygiene¶

[ ] Tailwind CSS / inline <style> блоки минимизированы
[ ] Нет дублей с master CSS (например .tier-l1 vs .tier-pill-l1)
[ ] data-tier / data-state атрибуты соответствуют schema (L0-L5 для tiers)
[ ] Inline styles ≤ 5 мест (если больше — мигрировать в page-isolated класс)
[ ] Все цвета через tokens (var(--text-primary) etc), не hardcoded #XXX
[ ] Нет color: rgba(255,255,255,X) в class definitions (light theme killer)

Typography¶

[ ] Шрифты только из 3 семейств (Inter / Space Mono / JetBrains Mono)
[ ] Typography hierarchy (h1 / h2 / h3 / body / caption) консистентна
[ ] Brand caps Space Mono uppercase 12px letter-spacing 0.20-0.30em
[ ] Body text min 14px (правило 7 v4.2.8)
[ ] Inter 400/500/600/700/800 weights только

Spacing¶

[ ] Spacing из стандартных значений (4/8/12/14/16/22/24/32/40)
[ ] Card padding canonical 24px (если course-card-big)
[ ] Card gap canonical 14px

[ ] Footer соответствует контексту экрана:
UI-app → cream var(--bg-secondary) page-isolated
Marketing → Stripe-pattern dark #0E0D0B master
[ ] Triad-grid (если присутствует) corrupted markup OK

Components¶

[ ] Tier-pill / status-chip / badge — canonical классы
[ ] Buttons из semantic mapping (btn-action / btn-ai-* / btn-auth / toolbar-btn)
[ ] .btn-group для symmetry если 2+ кнопок в группе
[ ] Forms используют .eco-input canonical

Symmetry rule v4.4.12¶

[ ] Cards в строке равной высоты (уровень 1)
[ ] Кнопки в группе равной ширины (уровень 2)
[ ] Accordion заголовки grid fixed-col (уровень 3)
[ ] Timeline text-x = meta-x (уровень 4)

Compact-fold¶

[ ] Если single-purpose / status / dashboard — fits 1440×900 без скролла
[ ] Используется V3 или V4 pattern

Output¶

audit-YYYY-MM-DD-[product]-prism1.md: - Findings per экран - Cross-cutting issues (системные, на 5+ экранах) - Recommendations с priority HIGH/MED/LOW - Decision needed CEO

Призма 2 · Light theme¶

Время: 45-60 мин на 10 экранов.

Чек-лист per экран¶

Открыть в Chrome MCP, переключить ☀ light:

Header¶

[ ] Header текст WHITE (не чёрный, не невидимый)
[ ] Wordmark gold preserved
[ ] Lang/theme buttons readable

Body¶

[ ] Body bg cream #FAFAF7 (через DevTools Computed)
[ ] Body text dark #0A0A0A (не pure black, не #1A1A1A)

Cards¶

[ ] Cards white #FFFFFF с тенями (layered depth)
[ ] Borders cream tone rgba(26,26,26,0.06-0.20)
[ ] Shadows visible (light theme depth = layered shadows)

CTAs¶

[ ] CTAs deep bronze #998018 (не яркий gold #EBC554)
[ ] Border + text bronze
[ ] Hover state — solid bronze bg + WHITE text + glow

Footer¶

[ ] Footer соответствует контексту (UI-app cream / marketing dark)
[ ] Если cream — text dark + bronze accents
[ ] Если dark — text WHITE + gold accents

Hover states (КРИТИЧНО)¶

[ ] Btn :hover (success/vip/investor) = solid brand bg + WHITE text (не cream-on-cream)
[ ] Locked-chip / badge :hover bg + color оба меняются
[ ] Computed verify через getComputedStyle() для каждого hover

Theme switch¶

[ ] Theme переключается одним кликом без перезагрузки
[ ] localStorage сохраняет выбор (eco-theme)
[ ] При reload — theme persists

Light theme anti-patterns¶

[ ] Нет hardcoded rgba(255,255,255,X) в class definitions (это invisible в light)
[ ] Hover states имеют bg + color оба
[ ] Premium artifacts — light surface + gold preserved
[ ] Нет hybrid dark cards на cream body

Verification protocol (новое v4.5.0)¶

Per каждый critical element: 1. Screenshot (full page или region) 2. Zoom (если детализация нужна) 3. Computed style через getComputedStyle()

Записать:

const card = document.querySelector('.X');
const s = getComputedStyle(card);
console.log({ bg: s.backgroundColor, color: s.color, border: s.borderColor });

Призма 3 · Англицизмы¶

Время: 30-45 мин на 10 экранов.

Чек-лист per экран¶

UI text¶

[ ] CTA buttons на RU (Купить → Buy внутри RU UI = англицизм)
[ ] Status labels на RU (Active → Активен)
[ ] Описания фич на RU
[ ] Tooltip / placeholder / aria-label — RU

Запрещённые термины¶

Поиск в HTML / inline scripts:

grep -E "sprint|scope|refactor|boilerplate|MVP|hero|viewport|anti-pattern|LTV" \
  ecosystem-prototype/[product]/*.html

Замены (см. 06-anti-patterns.md группа D): - sprint → этап - scope → объём / задачи - refactor → переработка - MVP → минимальная рабочая версия - hero → главный экран - viewport → область просмотра - anti-pattern → плохая практика - LTV → пожизненная ценность клиента

Branding immutable (НЕ переводить)¶

См. 08-i18n.md § Branding vs translatable. Оставить: - Названия продуктов - Wordmarks [ ACADEMY ] / [ VISION ] - Course codes - Tier коды - Tech idents (JWT / cookie / Stripe) - Brand caps ▸ CERTIFICATE OF COMPLETION - URLs

Error messages¶

[ ] Error messages — RU (не «Something went wrong» на RU UI)
[ ] Loading states — RU («Загрузка» не «Loading»)
[ ] Empty states — RU («Пока ничего нет» не «Nothing yet»)

Tooling¶

Можно делегировать subagent с promptом:

«Проверь экран [product]/[screen].html на англицизмы. Список запрещённых терминов в feedback_anglicisms_audit_prompt.md. Branding immutable в 08-i18n.md. Дай report что заменить, без правок».

Призма 4 · EN перевод¶

Время: 60+ мин на 10 экранов.

Чек-лист per экран¶

i18n coverage¶

[ ] Все translatable text узлы обёрнуты в data-i18n="namespace.key"
[ ] Соответствующие keys добавлены в i18n/ru.js + i18n/en.js
[ ] Namespace [product]_[screen] per экран (не размывать в common)
[ ] Title тэг переключается через i18n
[ ] Меню / nav / footer переключаются

EN перевод качество¶

[ ] EN перевод native (не machine translation)
[ ] Idiomatic (используем native idioms)
[ ] Tone matches RU
[ ] Punctuation EN style (не RU «» в EN)
[ ] Capitalization correct (Title Case headlines, sentence case body)
[ ] Spacing single

Динамические элементы¶

[ ] Date/number/currency формат соответствует locale (см. 08-i18n.md table)
[ ] MutationObserver на динамические элементы (date / counter / pluralization)
[ ] Pluralization работает для RU 3 форм

Switch verification¶

[ ] EN switch проверен через клик EN button
[ ] Обратное переключение RU работает
[ ] Theme + lang independent (можно RU+light, EN+dark, etc.)

Edge cases¶

[ ] Нет fallback на RU при missing EN key (visible bug)
[ ] Нет hardcoded EN в HTML без i18n (e.g. branded ▸ CERTIFICATE OF COMPLETION правильно, но Read more без i18n — anti-pattern)
[ ] Computed verify через JS query

Pattern для verify¶

// Test all data-i18n elements rendered correctly
document.querySelectorAll('[data-i18n]').forEach(el => {
  const key = el.dataset.i18n;
  const lang = document.documentElement.lang;
  const value = window.ECO_I18N[lang]?.[key.split('.')[0]]?.[key.split('.')[1]];
  if (!value) console.warn('Missing key:', key, 'in', lang);
  if (el.textContent !== value && value) console.warn('Mismatch:', key, el.textContent, '!=', value);
});

Sample audit-report шаблон¶

Использовать как template для /claude/audit-YYYY-MM-DD-[product]-prismN.md:

# AUDIT · [Product] · Призма [N] · YYYY-MM-DD

## Контекст
- Продукт: [имя]
- Экранов: [N]
- Призма: [1/2/3/4]
- Аудитор: Claude (Senior UX 18+)
- Длительность: [X мин]

## Метод
[Как проверял — Chrome MCP / computed style / visual]

## Inventory
- Total: [N]
- Categorized:
  - UI-app: [N1]
  - Marketing: [N2]
  - Premium artifact: [N3]

## Findings (по экранам)

### Экран 1 · [имя файла]
- ✅ [что ОК]
- ❌ [что не ОК] · [приоритет HIGH/MED/LOW]
- 🔍 [что под вопросом — спросить CEO]

### Экран 2 · [имя файла]
[...]

[... 10 экранов ...]

## Cross-cutting issues (системные)

### CC-1 · [Системная проблема]
**Симптом:** [описание]
**Затронуто:** [N экранов · список]
**Причина:** [root cause analysis]
**Fix recommendation:** [конкретный план]
**Estimate:** [время]
**Risk:** [low/med/high]

[... ещё CC issues ...]

## План фиксов (priority order)

### HIGH priority (must-fix перед commit)
1. [fix · estimate · кого затрагивает]
2. ...

### MED priority (should-fix)
1. ...

### LOW priority (nice-to-have)
1. ...

## Decision needed CEO

### Вопрос 1 · [конкретный вопрос]

**Контекст:** [почему это вопрос]

**Рекомендую:** [мой выбор]

**Логика:**
- [причина 1]
- [причина 2]
- [причина 3]

**Что отверг:**
- Y — потому что [причина]
- Z — потому что [причина]

**Если не подходит:**
- Y подойдёт если [условие]

### Вопрос 2 · [...]

## Status checklist

- [ ] Audit closed
- [ ] CEO approved fix plan
- [ ] Fixes applied (working tree)
- [ ] Visual verification done (screenshot + computed)
- [ ] CEO approved visual results
- [ ] CSS bumped (?v=X.Y.Z)
- [ ] Memory updates done
- [ ] Commit + push
- [ ] ROOT_LOG entry

## Next steps

[Что после закрытия этой призмы]

Memory updates после аудита¶

После закрытия каждой призмы:

Что обновить¶

Если новый canonical pattern → создать feedback_X_canonical.md + ссылка в 05-patterns.md
Если новая anti-pattern → расширить 06-anti-patterns.md
Если нашёл missing token → обновить 02-tokens-canonical.md
Если новая закрытая призма → обновить project_*.md status
Если новый эталонный экран → расширить 01-mental-models.md § 5
Если новый i18n pattern → обновить 08-i18n.md
Если новый workflow learning → обновить 07-workflow.md

MEMORY.md index обновление¶

После создания/обновления memory files — обязательно добавить/обновить entry в MEMORY.md:

- [Title](file.md) — one-line hook (~150 chars)

Time budget по продуктам¶

Продукт	Экранов	Призма 1	Призма 2	Призма 3	Призма 4	Total
Academy (закрыто)	13	60 мин	60 мин	45 мин	90 мин	~4 ч
Syndicate (next)	~15-20	75 мин	75 мин	60 мин	120 мин	~5.5 ч
Gate-admin	~10-12	50 мин	50 мин	40 мин	80 мин	~3.5 ч
.ai/.com/.org landings	6-9	45 мин	45 мин	30 мин	90 мин	~3.5 ч

Распределить по дням — не делать всё за раз. Например syndicate: Призма 1 (день 1) → CEO ОК → Призма 2 (день 2) → ... 4 призмы за неделю.

Когда читать¶

Перед стартом аудита нового продукта — ОБЯЗАТЕЛЬНО (полностью)
Перед каждой призмой — освежить нужный раздел
При создании audit-report — копировать sample шаблон
При onboarding нового подрядчика для аудита — обязательно