design-system/prompt-template.md

Промпт-шаблон: переверстка веб-части под дизайн-систему @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 — только переменные токенов