API ВЕГА

Навык задаёт правила для генерации UX/UI на React: строит страницы по AIDA, требует разнообразить композицию и добавлять анимации на GSAP. Он помогает избежать узких заголовков, пустот в bento-сетках, повторяющихся макетов и нечитаемых кнопок.

Возможности

  • Требует перед написанием UI-кода вывести <design_plan> с выбором макета Hero, компонентов, анимаций GSAP и шрифта через симуляцию Python-рандомизации.
  • Задаёт структуру страницы по AIDA: Navigation, Hero, блок с возможностями, секция с GSAP-анимацией и Footer или Pricing.
  • Ограничивает заголовок Hero двумя-тремя строками и требует широкого контейнера, например max-w-5xl или max-w-6xl.
  • Требует плотную bento-сетку без пустых ячеек: grid-flow-dense и проверку сочетания col-span и row-span.
  • Предписывает использовать @gsap/react и ScrollTrigger для pinning, scrubbing, появления изображений и наложения карточек.
  • Запрещает эмодзи, метки вроде SECTION 01, узкие заголовки и низкий контраст текста на кнопках.

Когда использовать

  • Когда нужно сгенерировать промостраницу или лендинг на React с выраженной визуальной структурой.
  • Когда интерфейс должен включать GSAP-анимации при прокрутке и интерактивные карточки.
  • Когда нужно проверить макет на типичные проблемы: пустоты в сетке, повторяющиеся композиции и слишком длинные заголовки.

Примеры

Обёртка страницы, которая предотвращает горизонтальную прокрутку:

<main className="overflow-x-hidden w-full max-w-full">

Изображение внутри заголовка:

I shape <span className="inline-block w-24 h-10 rounded-full align-middle bg-cover bg-center mx-2" style={{backgroundImage: 'url(...)'}}></span> digital spaces.

Масштабирование карточки при наведении:

group-hover:scale-105 transition-transform duration-700 ease-out

Установка

npx skills add https://github.com/leonxlnx/taste-skill --skill gpt-taste