# Промпт-шаблон: переверстка веб-части под дизайн-систему @tansu/design-system

Открой новый чат с Claude в папке нужного проекта. Приложи:
1. `tansu_v5_executive_premium.html` — визуальный эталон компонентов.
2. Код веб-части (`.tsx` и `.module.scss`).

Токены **не прикладывай** — они уже в проекте как пакет
`@tansu/design-system`. Затем вставь промпт ниже (замени `[…]`).

---

```
Ты — senior SPFx-разработчик. Перевёрстай стили веб-части под общую дизайн-систему.

## Дизайн-система (уже установлена как пакет)
Стили берём ТОЛЬКО из @tansu/design-system. В каждом .module.scss:
  @import '~@tansu/design-system/styles/tokens';
Доступны: $navy-*, $gold-*, $gray-*, семантические цвета, $font-serif/$font-sans,
$fs-*, $r-*, $sh-*, $grad-*, $sp-1…$sp-8 и миксины:
page-header, card-hover-gold, btn-accent, input-focus-gold, hairline.

## Референс (приложен)
tansu_v5_executive_premium.html — эталонный вид всех компонентов.
ВНИМАНИЕ: тёмная верхняя навигация с табами в мокапе — ТОЛЬКО для просмотра,
НЕ часть дизайна. Не добавляй её в веб-часть (навигацию даёт сам SharePoint).
Веб-часть начинается с хлебных крошек и шапки (.ph).

## Контекст проекта
- SPFx 1.22.1, сборка на Heft (команда запуска: `heft start`, НЕ gulp).
- React 17, TypeScript strict, SCSS Modules.
- Это веб-часть [НАЗВАНИЕ].

## Задача
1. В каждом .module.scss добавь @import '~@tansu/design-system/styles/tokens'.
2. Замени ВСЕ хардкод-цвета на переменные из токенов (сырой hex запрещён).
3. Приведи компоненты к эталону из HTML:
   - Шапка экрана → @include page-header + заголовок $font-serif.
   - Кнопки → 5 уровней (Primary navy / Accent gold / Secondary / Ghost / Danger),
     не больше одной Accent на экран.
   - Инпуты → @include input-focus-gold.
   - Карточки → @include card-hover-gold.
   - Таблицы → uppercase-заголовки, hover строки $gold-50.
   - Бейджи → со статус-точкой.
4. Иконки — @fluentui/react-icons, стиль Regular (outline).
5. Формат всех дат: дд.мм.гггг.

## Стиль кода (обязательно)
- React Function Components + hooks, без классов.
- interface Props явно; логика отделена от JSX; ранние return.
- Один компонент — один файл. Запросы к SharePoint — только в services/.
- Явно обрабатывай loading / error / empty.

## Ограничения
- НЕ меняй бизнес-логику, props, state, обработчики, запросы к SharePoint.
- НЕ переименовывай CSS-классы, на которые ссылается .tsx, без правки .tsx.
- Выводи полные файлы целиком, а не фрагменты.

## Код веб-части
[приложены файлы]
```

---

## Порядок работы
- **Одна веб-часть (или один экран) = одна сессия.** Не грузи весь проект сразу.
- После сессии: `heft start` → workbench → скриншот → при расхождении попроси
  сравнить скриншот с нужной вкладкой HTML-референса и поправить.

## Чек-лист соответствия V5 (по каждой веб-части)
- [ ] НЕТ тёмной верхней навигации из мокапа
- [ ] Шапка: navy-градиент, золотая линия снизу, заголовок Lora
- [ ] Хлебные крошки с золотым разделителем
- [ ] Кнопки: не больше одной Accent на экран
- [ ] Инпуты: золотой focus-ring
- [ ] Таблицы: uppercase-заголовки, золотой hover
- [ ] Карточки: подъём на 2px + золотая рамка при hover
- [ ] Бейджи со статус-точкой
- [ ] Даты: дд.мм.гггг
- [ ] Иконки: Fluent UI Regular (outline)
- [ ] Нет сырого hex — только переменные токенов