---
id: pattern.page.experts
status: stable
version: 1.0.0
owner: AI CJM
evidence: https://aicjm.ru/edu/teachers/
---

# Experts catalog pattern

## Назначение и evidence

Показывает не «звёздность», а соответствие эксперта задаче, роли и стеку.
Production evidence: `/edu/teachers/` с H1 «Эксперты под задачу, роль и технологию».

## Композиция

`header → title/selection principle → skill filters + result count → expert grid →
selection CTA → footer`. Карточка: portrait, name, primary role, verified skill tags,
короткое evidence, ссылка на profile.

## Компоненты

Stable registry IDs: `site-header`, `filter-bar`, `people`,
`article-content`, `button`, `site-footer`.

## Токены

Exact token IDs: `surface.page`, `surface.card`, `surface.subtle`, `text.primary`,
`text.secondary`, `border.default`, `component.card.background`,
`component.card.text`, `component.card.border`, `component.card.border-width`,
`component.card.radius`, `component.card.padding-desktop`, `component.card.padding-mobile`,
`component.filter.background`, `component.filter.text`,
`component.filter.active-background`, `component.filter.active-text`,
`component.filter.active-indicator`, `component.filter.border`,
`component.filter.radius`, `component.filter.minimum-height`, `layout.container-max`,
`layout.gutter-desktop`, `layout.gutter-tablet`, `layout.gutter-mobile`,
`type.size.heading-large`, `type.size.heading-small`, `type.size.body`,
`type.size.metadata`, `focus.ring`. Portrait crop берётся из asset metadata,
а не из локального CSS.

## Адаптивность и доступность

Filters wrap/scroll без скрытия options; grid падает до одной колонки. Portrait имеет
контекстный alt и согласие; имя — текст, а не часть картинки. Вся карточка
может быть ссылкой, но не содержит nested interactive controls.

## Контент

Каждая компетенция и кейс ссылаются на approved profile/source. Теги описывают
задачу и роль, а не самооценку «топ». CTA: «Собрать команду под задачу».

## Разрешено и запрещено

**Разрешено:** «AI-стратегия · руководители · проектирование пилота» при evidence.

**Запрещено:** ранжировать людей по внешности; выдумывать должности, клиентов,
навыки; создавать вариант карточки для одного эксперта.

## Acceptance criteria

- filters, count, empty state и selection CTA работают;
- все profiles/assets/claims имеют source и owner;
- карточки сравнимы, keyboard-доступны и стабильны на four viewports.

## V2 exact composition

Pattern ID: `pattern.page.experts`. Complete visual reference:
`/brandbook/web/examples/experts/`.

Required sequence:

1. `section.hero.editorial`
2. `section.catalog.results`
3. `section.people.experts`
4. `section.proof.strip`
5. `section.task.framing`
6. `section.content.related`
7. `section.lead.form`

Shared shell: exactly one stable `site-header` and one stable `site-footer`.
Heading: one H1; accent may wrap one semantic phrase in
`aicjm-headline__accent`. Every following section owns one H2.

## V2 responsive contract

Desktop preserves the declared grid and evidence adjacency. Mobile uses one
semantic reading column, preserves every required section and action, and
permits local horizontal scrolling only for explicit filter/navigation rails.
Page-level horizontal overflow is prohibited.

## V2 state and content contract

Filters expose selected and result status. Forms expose validation, loading,
success and error through the shared lead flow. Empty states explain the query
and a recovery action. Every metric, logo, portrait, case and quotation keeps
its source. Placeholder claims remain visibly `[уточнить]` and never ship as proof.

## V2 acceptance

- one H1, valid H2/H3 hierarchy and named landmarks;
- one primary action per semantic stage;
- all components and sections resolve to stable registry IDs;
- 1440, 1024, 768 and 375 px pass without content loss or page overflow;
- keyboard, focus, reduced motion, links, assets and source labels pass QA.