Design on the Flank — скилл
Скилл собирает компоненты Framer на Three.js, WebGL и GSAP: 3D, шейдеры и анимация по прокрутке в одном TSX-файле.
- 65 ★ репозитория
- Последний коммит
Минимальный доступ
Почему такой уровень
- Скилл генерирует код компонентов и сам не выполняет действий вне проекта.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/design-on-the-flankОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл генерирует код компонентов и сам не выполняет действий вне проекта.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Design on the Flank учит агента делать кодовые компоненты Framer по описанию или референсу. Каждый компонент выходит одним готовым TSX-файлом, который вставляют в Framer. Настройки цвета, текста, изображений и параметров движения выведены в панель свойств, и править код для этого не нужно. Скилл охватывает 3D-сцены и частицы, WebGL-искажения и переходы, анимацию GSAP с таймлайнами и привязкой к прокрутке, адаптивную верстку и превращение существующего кода в компонент. Для Codex и Claude есть установка скилла, для ChatGPT предусмотрен документ-справка.
Для кого. Дизайнерам и верстальщикам сайтов во Framer, которым нужны сложные 3D- и scroll-эффекты без ручной работы с шейдерами.
Подходит, если
- Лендинг во Framer требует интерактивной 3D-сцены с продуктом.
- Нужен эффект искажения изображения при наведении курсора.
- Анимация текста и блоков должна идти вместе с прокруткой страницы.
- Готовый кусок кода на React хочется превратить в компонент с настройками в панели Framer.
Не подходит, если
- Сайт собирается не во Framer.
- Нужна простая статическая верстка без анимации.
- Требуется готовое видео или растровая графика, а не код.
Пример запроса к агенту
Сделай компонент Framer: 3D-сфера из частиц, которая реагирует на движение мыши, цвет и скорость вынеси в панель свойств.Ограничения
Скилл работает со Framer: результат вставляют в проект вручную, готовых публикаций он не делает. Лицензия репозитория не определена автоматически (`NOASSERTION`), перед коммерческим использованием прочитайте файл лицензии. Документация и руководства написаны по-вьетнамски, сам скилл рассчитан на запросы на любом языке. Сложные WebGL-сцены нагружают видеокарту слабых устройств, поэтому проверяйте результат на мобильных. Установка для Codex идет текстовым запросом агенту, а не командой.
Как отключить. Удалите папку скилла из каталога скиллов агента. Созданные компоненты остаются в проекте Framer, их удаляют там отдельно.
Частые вопросы
Как поставить скилл в Codex?
Отправьте Codex запрос установить скилл из папки `skills/design-on-the-flank` репозитория и начните новый диалог. Текст запроса есть в README.
Что делать пользователю Claude?
Скачайте архив скилла из каталога `downloads` и добавьте его в раздел Skills. Для Claude Code достаточно попросить агента установить скилл в рабочую среду.
Работает ли скилл с ChatGPT?
Да, через документ-справку: прикрепите его к диалогу и опишите компонент. Недостающие модули ChatGPT просит отправить файлами.
Что получается на выходе?
Один TSX-файл с компонентом и настройками в панели свойств Framer. Его копируют в проект Framer.
Можно доработать готовый компонент?
Да. Скилл умеет добавлять функции и исправлять ошибки в существующем коде, не трогая лишние настройки.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыТри скилла для Framer: код-компоненты и оверрайды, работа через Framer Agent и плагины, плюс сборник приемов и заметок
Маркетплейс плагинов и скиллов Claude Code для 3D, анимации и современного веба: Three.js, GSAP, React Three Fiber, Babylon.js
Скиллы креативного кода для Claude Code: движение, микровзаимодействия и визуальные системы для веба, Android и Apple
Скилл превращает референсы интерфейсов в структурированный профиль дизайна в JSON и генерирует по нему новый интерфейс под ваш контент
Скилл дизайна интерфейсов, презентаций и графики для кодинг-агентов: черновики на холсте через CLI superdesign
Скилл Claude Code и других агентов для сборки сайтов, где режиссура задается до кода: арт-дирекшн, генерация ассетов локальными CLI и проверка анти-слоп линтеро
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| Design on the Flank (эта карточка) | нет | 65 | |
| GSAP AI Skills | нет | 18 323 | учит анимации на GSAP вообще; здесь итог — компонент Framer с панелью свойств |
| Framer Motion AI Skills | нет | 10 | про библиотеку Framer Motion; этот скилл строит кодовые компоненты Framer |
Коротко о README
Набор для Framer-компонентов на Three.js, WebGL и GSAP. Результат — один TSX-файл с настройками в панели свойств, установка описана для Codex, Claude и ChatGPT.