Framer Labs — скилл

Три скилла для Framer: код-компоненты и оверрайды, работа через Framer Agent и плагины, плюс сборник приемов и заметок

  • 136 ★ репозитория
  • Последний коммит
  • MIT
Скилл

Расширенный доступ

Почему такой уровень

  • Скиллы раз за сессию обращаются к репозиторию за новой версией, а при строке `auto-update` заменяют установленную копию.
Все причины и проверки

fredm00n/framerlabs

Установка

В терминале, через 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-файле.

СкиллМинимальный доступ65Звезды репозитория

Шесть скиллов по Framer Motion для React: компоненты motion, варианты, жесты, скролл, layout-анимации и AnimatePresence

СкиллМинимальный доступ10Звезды репозитория
Официальный

Официальный плагин Subframe: MCP-сервер и три скилла для дизайна интерфейсов в Subframe и переноса их в код приложения

ПлагинРасширенный доступ466Звезды репозитория

Скиллы дают агенту контракты на компоненты интерфейса: он собирает, инвентаризирует, сверяет и чистит их под ваш продукт.

СкиллРасширенный доступ194Звезды репозитория

Официальный плагин Webflow: больше тридцати скиллов для CMS, аудитов сайта, Designer, код-компонентов и безопасной публикации

ПлагинРасширенный доступ136Звезды репозитория

Маркетплейс плагинов и скиллов Claude Code для 3D, анимации и современного веба: Three.js, GSAP, React Three Fiber, Babylon.js

ПлагинРасширенный доступ1,3 тыс.Звезды репозитория

Коротко о 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.

Сообщить о проблеме