Framer Labs skill
Three Framer skills: code components and overrides, Framer Agent and plugins, plus a collection of tricks and notes
- 136 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The skills query the repository once per session for a newer version and, with the `auto-update` line, replace the installed copy.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/framer-labsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skills query the repository once per session for a newer version and, with the `auto-update` line, replace the installed copy.
This is third-party code. Review the repository files before installing.
What it does
Framer Labs teaches an agent to build sites, components and plugins in Framer. The repository holds three skills, each grown from real projects and keeping findings with dates. The `framer-code-components-overrides` skill covers code components, overrides, property controls, WebGL shaders and CMS work from code. Its first section asks whether code is needed at all: accordions, tabs and sliders are better built with native tools. The `framer-agent-playbook` skill is meant for use before the first Framer Agent call. It lists operations that cannot be undone, DSL and API traps, breakpoint failures, CMS and form pitfalls and rules for working safely on live client sites. The `framer-plugins` skill walks through the Plugin SDK: plugin modes, canvas insertion, CMS sync, permissions, licensing and Marketplace submission. A separate `hacks/` folder holds notes: a fix for choppy SVG animation in Safari, a magnetic hover effect, shared state between overrides, showing a popup only once and opening an overlay from a URL parameter.
Who it is for. Framer designers and developers who hand live-site edits to an agent, write code components or prepare a plugin for the Marketplace.
Good fit when
- An agent builds a code component with property controls, and in Framer it has to appear in the override picker.
- Before editing a client site through Framer Agent you want to know which deletions cannot be undone.
- Menus and pages link to each other, and the agent needs the right creation order.
- A Marketplace plugin faces the automated code review, and you need to learn how to pass it.
- A published site has to show a banner once per visit.
Not a fit when
- An accordion, tabs or a slider can be built natively, and code is not needed at all.
- The site is made in another builder: the skills are built for Framer only.
- A one-off text edit on a page is done in the editor without an agent or a skill.
Example request
Read framer-agent-playbook and move the menu to the new page without deleting anything irreversibly.Limitations
The skills are kept by volunteers and describe what broke in real projects, so some findings may go stale: each carries a date for rechecking. Each skill looks into the repository once per session for a newer version. The `auto-update` and `contribute` lines in `CLAUDE.md` or `AGENTS.md` allow the agent to replace the installed copy and offer a pull request. Without those lines a skill does not change itself. `framer-agent-playbook` describes Framer Agent, which is recent and changes quickly.
How to disable. Delete the skill folders from the project `.claude/skills/` or from `~/.claude/skills/`. Remove the `auto-update` and `contribute` lines from `CLAUDE.md` or `AGENTS.md`.
FAQ
How do I install the Framer Labs skills?
Run `npx skills add fredm00n/framerlabs --skill framer-code-components-overrides`. For the others, swap the name for `framer-plugins` or `framer-agent-playbook`. The skill lands in the project `.claude/skills/`.
Which skill is needed for work through Framer Agent?
`framer-agent-playbook`. Read it before the first Framer Agent call: it gathers irreversible operations, errors that pose as success and rules for live client sites.
What does the auto-update line in CLAUDE.md mean?
It lets a skill replace the installed copy with a newer one from the repository, in its own commit. Without the line the skill only reports that an update exists.
How does a skill share findings with the project?
With the `contribute` line, the agent may open a pull request at the end of a session. It first strips company names, domains, keys and paths, and shows you the diff before sending.
What is inside the hacks folder?
Short notes: a fix for choppy SVG in Safari, a magnetic hover effect, shared state for overrides, opening one FAQ item while closing the rest and forcing an npm package version through esm.sh.
Discussion
No questions or reviews yet.
Related
SkillsA skill that builds Framer components with Three.js, WebGL and GSAP: 3D, shaders and scroll animation in a single TSX file.
Six Framer Motion skills for React: motion components, variants, gestures, scroll, layout animations and AnimatePresence
Official Subframe plugin: an MCP server and the design, develop and import skills to design interfaces and move them into code
Skills that give an agent component contracts: it builds, inventories, audits and cleans interface components to fit your product.
The official Webflow plugin: over thirty skills for the CMS, site audits, Designer, code components and safe publishing
A Claude Code plugin and skill marketplace for 3D, animation and modern web: Three.js, GSAP, React Three Fiber, Babylon.js
README in short
The page gives tables of the three skills and the hacks, explains the `auto-update` and `contribute` lines and keeps a dated changelog since 30 January 2026. The log shows which findings were added to which skill.
README badge
Original 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.