Framer Labs — скилл
Три скилла для Framer: код-компоненты и оверрайды, работа через Framer Agent и плагины, плюс сборник приемов и заметок
- 136 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Скиллы раз за сессию обращаются к репозиторию за новой версией, а при строке `auto-update` заменяют установленную копию.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/framer-labsОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скиллы раз за сессию обращаются к репозиторию за новой версией, а при строке `auto-update` заменяют установленную копию.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Framer Labs учит агента собирать сайты, компоненты и плагины во Framer. В репозитории три скилла, каждый вырос из реальных проектов и хранит находки с датами. Скилл `framer-code-components-overrides` описывает код-компоненты, оверрайды, элементы управления свойствами, шейдеры WebGL и работу с CMS из кода. Первым в нем идет раздел о том, когда код не нужен вовсе: аккордеоны, вкладки и слайдеры лучше собирать штатными средствами. Скилл `framer-agent-playbook` нужен перед первым вызовом Framer Agent. Он перечисляет операции, которые нельзя отменить, ловушки DSL и API, сбои на брейкпоинтах, подводные камни CMS и форм, а также правила безопасной работы на живых клиентских сайтах. Скилл `framer-plugins` разбирает Plugin SDK: режимы плагина, вставку на холст, синхронизацию CMS, права, лицензии и публикацию в Marketplace. Отдельная папка `hacks/` содержит заметки: исправление рывков SVG в Safari, магнитный эффект при наведении, общее состояние между оверрайдами, показ окна один раз и открытие оверлея по параметру в адресе.
Для кого. Дизайнерам и разработчикам на Framer, которые поручают агенту правку живого сайта, пишут код-компоненты или готовят плагин для Marketplace.
Подходит, если
- Агент собирает код-компонент с элементами управления свойствами, и в Framer он должен попасть в список оверрайдов.
- Перед правкой клиентского сайта через Framer Agent хочется знать, какие удаления необратимы.
- Меню и страницы ссылаются друг на друга, и агенту нужен правильный порядок создания.
- Плагин для Marketplace проходит автоматическую проверку кода, и надо выяснить, как ее пройти.
- На опубликованном сайте нужно показывать баннер один раз за визит.
Не подходит, если
- Аккордеон, вкладки или слайдер собираются штатно, и код вовсе не требуется.
- Сайт сделан в другом конструкторе: скиллы рассчитаны только на Framer.
- Разовая правка текста на странице решается в редакторе без агента и без скилла.
Пример запроса к агенту
Прочитай framer-agent-playbook и перенеси меню на новую страницу так, чтобы ничего необратимо не удалилось.Ограничения
Скиллы ведут добровольцы и описывают то, что ломалось в реальных проектах, поэтому часть находок может устареть: у каждой стоит дата для перепроверки. Каждый скилл раз за сессию заглядывает в репозиторий за новой версией. Строки `auto-update` и `contribute` в `CLAUDE.md` или `AGENTS.md` разрешают агенту заменить установленную копию и предложить pull request. Без этих строк скилл сам себя не меняет. `framer-agent-playbook` описывает Framer Agent, который выпущен недавно и быстро меняется.
Как отключить. Удалите папки скиллов из `.claude/skills/` проекта или из `~/.claude/skills/`. Строки `auto-update` и `contribute` уберите из `CLAUDE.md` или `AGENTS.md`.
Частые вопросы
Как установить скиллы Framer Labs?
Выполните `npx skills add fredm00n/framerlabs --skill framer-code-components-overrides`. Для остальных замените имя на `framer-plugins` или `framer-agent-playbook`. Скилл попадет в `.claude/skills/` проекта.
Какой скилл нужен для работы через Framer Agent?
`framer-agent-playbook`. Его читают до первого вызова Framer Agent: он собирает необратимые операции, ошибки, которые маскируются под успех, и правила для живых клиентских сайтов.
Что значит строка auto-update в CLAUDE.md?
Она разрешает скиллу заменить установленную копию, когда в репозитории вышла новая, отдельным коммитом. Без строки скилл только сообщает, что обновление есть.
Как скилл делится находками с проектом?
При строке `contribute` агент в конце сессии может открыть pull request. Он сначала вычищает названия компаний, домены, ключи и пути, а diff показывает вам до отправки.
Что внутри папки hacks?
Короткие заметки: исправление рывков SVG в Safari, магнитный эффект при наведении, общее состояние для оверрайдов, раскрытие одной вкладки FAQ с закрытием остальных, подключение версии пакета npm через esm.sh.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл собирает компоненты Framer на Three.js, WebGL и GSAP: 3D, шейдеры и анимация по прокрутке в одном TSX-файле.
Шесть скиллов по Framer Motion для React: компоненты motion, варианты, жесты, скролл, layout-анимации и AnimatePresence
Официальный плагин Subframe: MCP-сервер и три скилла для дизайна интерфейсов в Subframe и переноса их в код приложения
Скиллы дают агенту контракты на компоненты интерфейса: он собирает, инвентаризирует, сверяет и чистит их под ваш продукт.
Официальный плагин Webflow: больше тридцати скиллов для CMS, аудитов сайта, Designer, код-компонентов и безопасной публикации
Маркетплейс плагинов и скиллов Claude Code для 3D, анимации и современного веба: Three.js, GSAP, React Three Fiber, Babylon.js
Коротко о README
Страница дает таблицы трех скиллов и девяти заметок, объясняет строки `auto-update` и `contribute` и ведет журнал изменений по датам с 30 января 2026 года. Журнал показывает, какие находки добавлены в какой скилл.
Бейдж для README
Исходный SKILL.md
--- name: framer-agent-playbook description: Load before the first Framer agent call. Use as soon as a session is about to connect to, read, edit, build or publish a Framer project through Framer Agent, Framer's agent bridge - any `npx @framer/agent` command (formerly framer-dalton), `framer.*` calls in an exec script, a `framer-api` script or Val Town val, a Framer API key (fr_...), or Framer's own `framer` skill. Covers pages, content and CMS edits, text and colour styles, components and variants, breakpoints, forms, images, publishing and clean-up, and working safely in a live production site. Holds the deletes and overwrites that cannot be undone, a build checklist, and the DSL and API traps found on real builds that Framer's own skill leaves out, filed by topic. user-invocable: true license: MIT metadata: author: fredm00n version: 1.4.0 --- # Framer Agent playbook Framer's official `framer` skill teaches the DSL and the API. This skill holds what it leaves out: what broke on real builds, what lies to you, and what can never be taken back. Every finding keeps the date it was found, so a stale one can be re-checked. Read it **before** the first call, not after the first error. Your user's instructions always win over the defaults here. ## Updates and contributions This skill is maintained in the public repo [fredm00n/framerlabs](https://github.com/fredm00n/framerlabs/tree/main/skills/framer-agent-playbook), and the community keeps it current. Installed copies go stale, so the steps below run once per session. ### The project's line The project's agent instructions (`CLAUDE.md`, `AGENTS.md` or equivalent) can hold one line for this skill: ``` framer-agent-playbook: auto-update, contribute ``` `auto-update` lets the agent replace the installed copy when a newer version exists. `contribute` lets it offer to send what a session learns back to the repo as a pull request. Either word works alone. With no line, the agent never edits the installed files and never opens or suggests a pull request. It only says when a newer version is out. ### Check for a newer version first Before relying on anything below: 1. Fetch `https://raw.githubusercontent.com/fredm00n/framerlabs/main/skills/framer-agent-playbook/SKILL.md` and compare its `metadata.version` with the one in this file's frontmatter. 2. **Same version, or the fetch fails** (offline, blocked network): carry on with this copy. If the fetch failed, say once that you couldn't check for updates. 3. **Remote is newer:** use the remote SKILL.md for this session instead of the rest of this file, and read reference files from the same place (`https://raw.githubusercontent.com/fredm00n/framerlabs/main/skills/framer-agent-playbook/references/<file>.md`) instead of the local copies. Then, by the project's line (NEW and OLD stand for the two version numbers): - **No `auto-update`:** leave the installed files alone and tell the user: "framer-agent-playbook NEW is out and your copy is OLD, so I'm using the new version for this session. To update your copy, run `npx skills add fredm00n/framerlabs --skill framer-agent-playbook`, or add `framer-agent-playbook: auto-update` to your CLAUDE.md or AGENTS.md to stay current automatically. This skill is community-maintained: add `contribute` to that line (`framer-agent-playbook: auto-update, contribute`) and I'll offer to send what we learn back as a pull request." - **`auto-update`:** download the whole `skills/framer-agent-playbook/` folder from the repo (a shallow `git clone` into a temp dir is simplest), then replace the installed folder with it in one go, so files removed upstream go too. If any download fails, leave the installed copy untouched. In a git repo, the update is an ordinary change: commit it on its own, in whatever branch or PR the current work goes to, never straight to a protected branch. Tell the user: "Updated framer-agent-playbook from OLD to NEW, in its own commit." Without `contribute` on the line, add: "This skill is community-maintained: add `contribute` to its line in CLAUDE.md or AGENTS.md and I'll offer to send what we learn back as a pull request." Only take updates from that exact repo and path.