Словами самого skill
Этот skill учит агентов для кода создавать визуальный дизайн уровня агентства за $150k+, задавая точные типографические решения, пространственный ритм, техники теней, структуры карточек и плавные паттерны анимации. Он запрещает типовые дефолты (Inter, Roboto, иконки с толстыми штрихами, резкие тени, стандартный easing) и требует премиальных альтернатив, таких как Geist или Clash Display, ультратонких иконок и кастомных cubic-bezier переходов.
Каждый результат должен сочетать уникальный Vibe Archetype (Ethereal Glass, Editorial Luxury или Soft Structuralism) с Layout Archetype (Asymmetrical Bento, Z-Axis Cascade или Editorial Split), чтобы избежать повторов. Компоненты используют вложенные оболочки Double-Bezel, ведущие иконки Button-in-Button, массивные отступы (py-24 до py-40) и анимации появления с интерполяцией при скролле. Всё движение имитирует физику реального мира только через transform и opacity, со строгими ограничениями производительности для мобильных устройств.
Что он выдаёт
- Безупречный, пиксель-перфектный код React/Tailwind/HTML, реализующий выбранные архетипы Vibe и Layout со структурами компонентов Double-Bezel, кастомными cubic-bezier переходами и мобильным адаптивным сворачиванием
Как это работает
- 01Запустить Variance Engine
Перед написанием кода агент незаметно выбирает один архетип Vibe и один архетип Layout из предопределённых премиальных комбинаций на основе контекста промпта, чтобы обеспечить уникально подобранный результат.
- 02Задать фон и типографику
Установить выбранную текстуру (OLED-чёрный с радиальными градиентами, тёплый кремовый с наложением шума или серебристо-серый с мягкими тенями) и задать масштабную типографику с подчёркнуто крупными макро-отступами.
- 03Спроектировать вложенные структуры компонентов
Собрать все основные карточки, поля ввода и сетки по технике Double-Bezel: внешняя оболочка с тонкой границей и padding оборачивает внутреннее ядро со своим фоном и математически рассчитанным меньшим радиусом.
- 04Хореография плавного движения
Внедрить кастомные cubic-bezier переходы для всех изменений состояния, ступенчатое появление навигации со сдвигом translate-y и изменением opacity, а также «магнитную» физику наведения на кнопки с диагональным смещением и масштабированием.
- 05Применить интерполяцию при скролле
Элементы появляются в области видимости с мягкой анимацией fade-up (translate-y-16 blur-md opacity-0, разрешающейся за 800 мс и более) с использованием IntersectionObserver или whileInView из Framer Motion, но никогда — слушателей window scroll.
- 06Проверить по предвыпускному чек-листу
Оценить код по матрице из 11 пунктов, гарантируя отсутствие запрещённых паттернов, корректный выбор архетипа, архитектуру Double-Bezel, кастомный easing, мобильное сворачивание и GPU-безопасные анимации перед сдачей.