New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Framer Agent Playbook

by fredm00n in fredm00n/framerlabs

Load before the first Framer agent call. An agent skill from fredm00n/framerlabs.

MITAuto-check passedFrontend & Design

Install Framer Agent Playbook

skills CLI
$ npx skills add fredm00n/framerlabs --skill framer-agent-playbook -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install fredm00n/framerlabs framer-agent-playbook --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/fredm00n/framerlabs.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/framer-agent-playbook .claude/skills/framer-agent-playbook && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
framer-agent-playbook
GitHub stars
135
Token cost
~2.1k tokens
SKILL.md length
953 words
Files
16 (incl. references)
Skills in repo
2
Repo updated
First seen
Licence
MIT

At a glance

Load before the first Framer agent call. An agent skill from fredm00n/framerlabs.

  • Works in 4 steps: Is the project a live production site? A… → Connect with npx @framer/agent@latest… → Build it natively. Layers, variants,… → …
  • Tasks that involve Responsive design
  • SKILL.md covers Before the first call, What cannot be undone, The traps that cost the most and Where to look, by task, plus 2 more sections
  • Calls npx

What it does

Framer Agent Playbook is an agent skill from fredm00n/framerlabs. 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…

Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 16 other files, including reference files (for example `references/breakpoints.md`, `references/build-checklist.md` and `references/cms.md`).

It sits in Frontend & Design, covering Responsive design. The repository describes itself as: For experienced Framer creators looking to push the boundaries. The licence is MIT.

When your agent uses it

  • Tasks that involve Responsive design

Example prompts

  • “/framer-agent-playbook”

Requirements

  • Node.js

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Is the project a live production site? A file whose domain real visitors hit, or one that
  2. Connect with npx @framer/agent@latest setup, then project auth (once per project per
  3. Build it natively. Layers, variants, effects and CMS bindings first; a code component or
  4. For a new build, open references/build-checklist.md and

What it can do on your machine

Read from SKILL.md and the folder at commit 2a1c62e. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Framer Agent Playbook loads about 2.1k tokens when it runs, and up to ~32k if it reads all its reference files. Until then it costs about 189 tokens; SKILL.md has 953 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~189
When it runs · the whole SKILL.md, loaded when a task matches
~2.1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~32k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from fredm00n/framerlabs at commit 2a1c62e, republished under its MIT licence (© fredm00n). 953 words, ~2,056 tokens.

Download SKILL.mdSave it as .claude/skills/framer-agent-playbook/SKILL.md (or your agent's skills folder). This skill also uses 15 other files; get the full folder from GitHub.
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
metadata.version
1.0.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.

Before the first call

  1. Is the project a live production site? A file whose domain real visitors hit, or one that other people or their agents also edit, deserves the habits in references/live-files.md before you connect: write only where you were asked, on the branch you were given and confirmed by reading it back; keep tests and experiments out of the live file; leave shared components and styles alone; hide instead of delete; merge or publish only when the user asks. A sandbox or a fresh build can skip this step.
  2. Connect with npx @framer/agent@latest setup, then project auth (once per project per machine) and session new. Load Framer's framer skill only after setup. Then read the generated ~/.claude/skills/framer/projects/<projectId>/index.md, follow its task map, and read project-inventory.md before using any id or name. Details and the session traps (stalls, relay death, several agents on one session): references/setup-and-sessions.md.
  3. Build it natively. Layers, variants, effects and CMS bindings first; a code component or override only for what those cannot express (WebGL, canvas, third-party SDKs, browser APIs). An accordion, tabs, a slider, a pricing toggle or a modal are native: the site owner can edit them without code, bind them to the CMS and restyle them with text and colour styles. A disclosure is one component with two variants (Collapsed, Expanded), repeated by a Collection List. For .tsx, load framer-code-components-overrides.
  4. For a new build, open references/build-checklist.md and references/breakpoints.md before laying out desktop.

What cannot be undone

  • There is no undo, history or restore anywhere in the API or the CLI. Whatever you delete or overwrite, assume it is gone.
  • Deleting a collection list page also deletes its CMS detail page, while getParent() reports both as having no parent. Serialize everything adjacent first, name the collateral to the user, and confirm every delete. Approval of a cleanup plan is not approval of its collateral.
  • Removal calls lie in both directions. DEL <pageId> reports success and leaves the page; only framer.removeNodes([id]) removes a page. removeNodes in turn returns without removing component variants, variables and some form nodes, which need DEL. Read the parent back after every removal.
  • collection.addItems([{ id, fieldData }]) replaces every field it names, wholesale. No merge, no version history. Never use a live item as a test fixture. If one is clobbered, the last published deployment still serves the old content: rebuild from its HTML before publishing again.

Full detail: references/destructive-operations.md.

Show full SKILL.md (481 more words)Show less

The traps that cost the most

  • Send one MOVE or SET per applyChanges call and read the node back. Several in one call can report "applied cleanly" and run only the first.
  • res.errors is an object keyed by message, not an array. Test Object.keys(res.errors).length; errors.length is undefined and hides every failure. A rejected attribute fails the whole SET.
  • A temporary id stays reserved for the whole exec session, and one reused or shared between builders silently writes onto the wrong node. Fresh prefixes per call and per builder.
  • applyChanges can time out while the write lands. Re-read before re-applying.
  • A text style preset blocks inline type, and the preset decides the published tag (h1 or p).
  • Any hoverEffect.* adds scale: 1.1: pass hoverEffect.scale="1". onInView appear effects replay by default: set appearEffect.replay="false" when an effect should play once.
  • The three breakpoint killers, invisible until a narrow width: a 1fr or % child inside an auto parent (one character per line), inline fontSize (ignores presets), and fixed height, minHeight or height: 1fr (dead space once a grid drops to one column).
  • getRect, canvas screenshots and lint spacing warnings lie. Verify on the published page, in a real browser.
  • publish can be blocked by the agent's own permission checks, even a preview publish. Publish from the editor or an interactive session, and only when the user asks.

Where to look, by task

About to...Read
Connect, reconnect, run several agents, understand what the bridge can't dosetup-and-sessions.md
Write or run an exec script, read applyChanges results, use temp idsexec-scripts.md
Set node attributes, effects, event handlers, variants, sticky, rotation, ariadsl-and-nodes.md
Create or merge text styles, pick fonts, check variation axestext-styles-and-fonts.md
Add tablet and phone, or fix a layout that breaks narrowbreakpoints.md
Make components, variants, controls, code files, iconscomponents-and-code.md
Read or write CMS collections, items, bindings, collection listscms.md
Build a form or a webhookforms-and-webhooks.md
Upload or place images, SVG, videoimages-and-assets.md
Create pages, links, anchors, layout templates, SEO and site metadatapages-links-metadata.md
Rebuild an HTML reference on the canvashtml-reference.md
Trust a read, a screenshot or a measurementverification.md
Delete or overwrite anythingdestructive-operations.md
Work in a live production sitelive-files.md
Check a build is finishedbuild-checklist.md

Before declaring something impossible, grep every file in the generated prompt/ folder, core-examples.md above all: the grammar line in updating-the-project.md has left out whole features before, event handlers until 0.0.46.

Adding what you learn

A new trap goes in the reference file for its topic, as one bullet: what happened, what works instead, then the date. Search the file first and edit the existing bullet if there is one. Keep findings by topic, never in a per-project section, so the next reader finds them. Facts about one project (ids, branch names, what its owner cleared) belong in that project's own notes, not here.

  • framer-code-components-overrides: writing .tsx for Framer.
  • framer-plugins: the Plugin SDK.

© fredm00n, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 15 other files (references) in skills/framer-agent-playbook of fredm00n/framerlabs.

  • SKILL.md
  • references/breakpoints.md
  • references/build-checklist.md
  • references/cms.md
  • references/components-and-code.md
  • references/destructive-operations.md
  • references/dsl-and-nodes.md
  • references/exec-scripts.md
  • references/forms-and-webhooks.md
  • references/html-reference.md
  • references/images-and-assets.md
  • references/live-files.md
  • references/pages-links-metadata.md
  • references/setup-and-sessions.md
  • references/text-styles-and-fonts.md
  • references/verification.md

Open the folder on GitHubat commit 2a1c62e

Compare with similar skills

Framer Agent Playbook next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Framer Agent Playbook compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Framer Agent Playbook this skillfredm00n/framerlabs135—~2.1kAutomated safety check: PassMIT
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
Material 3hamen/material-3-skill1.5k2 repos~7.8kAutomated safety check: PassMIT
Trip Map Builderhiyeshu/trip-map-builder244—~1.7kAutomated safety check: PassNone
Antislop Layoutmobilemiqdadbadjuber/anti-slop5.7k—~4.1kAutomated safety check: PassMIT
Local Testinglobehub/lobe-ui2.2k—~2.1kAutomated safety check: PassMIT

Similar skills

  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed

  • Material 3

    hamen/material-3-skill

    Implement Google's Material Design 3 (Material You) UI system.

    1.5k GitHub starsUsed in 2 repos~7.8k tokens
    Frontend & DesignAuto-check passed

  • Trip Map Builder

    hiyeshu/trip-map-builder

    End-to-end trip planning: gather user constraints, build a reference itinerary, research locations and dining signals via 大众点评 + 小红书, then generate an interactive mobile-first map page (Leaflet +…

    244 GitHub stars~1.7k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • Antislop Layoutmobile

    miqdadbadjuber/anti-slop

    Mobile layout skill for antislop. An agent skill from miqdadbadjuber/anti-slop.

    5.7k GitHub stars~4.1k tokensUpdated 6 days ago
    Frontend & DesignAuto-check passed

  • Local Testing

    lobehub/lobe-ui

    Local browser verification for the lobe-ui component library and documentation site.

    2.2k GitHub stars~2.1k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Frontend Design Router

    code-yeongyu/oh-my-openagent

    Routes frontend and UI work through design reference rulesets, with a design-system gate plus layout and print guidance, before any UI code is written.

    70k GitHub stars~5.3k tokensUpdated today
    Frontend & DesignAuto-check passed

More from fredm00n/framerlabs

  • Framer Plugins

    fredm00n/framerlabs

    Framer Plugin SDK expert. An agent skill from fredm00n/framerlabs.

    135 GitHub stars~4.8k tokensUpdated today
    Auto-check passed

  • Framer Code Components Overrides

    fredm00n/framerlabs

    Create Framer Code Components and Code Overrides. An agent skill from fredm00n/framerlabs.

    135 GitHub stars~8.3k tokensUpdated today
    Auto-check passed

Categories

Questions about Framer Agent Playbook

What does Framer Agent Playbook do?

Load before the first Framer agent call. An agent skill from fredm00n/framerlabs. Framer Agent Playbook is an agent skill from fredm00n/framerlabs. Load before the first Framer agent call.

When should I use Framer Agent Playbook?

Framer Agent Playbook fits situations like: tasks that involve Responsive design.

How do I install Framer Agent Playbook in Claude Code?

Run `npx skills add fredm00n/framerlabs --skill framer-agent-playbook -a claude-code`. Or copy the skill folder (skills/framer-agent-playbook in fredm00n/framerlabs) into .claude/skills/framer-agent-playbook in your project. Claude Code loads it when a task matches its description.

How do I install Framer Agent Playbook in Codex?

Run `npx skills add fredm00n/framerlabs --skill framer-agent-playbook -a codex`. Or copy the skill folder (skills/framer-agent-playbook in fredm00n/framerlabs) into .agents/skills/framer-agent-playbook in your project. Codex loads it when a task matches its description.

Can I use Framer Agent Playbook in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add fredm00n/framerlabs --skill framer-agent-playbook -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/framer-agent-playbook, .gemini/skills/framer-agent-playbook, .github/skills/framer-agent-playbook and .opencode/skills/framer-agent-playbook in your project.

What does Framer Agent Playbook need to run?

Going by SKILL.md and its folder, Framer Agent Playbook needs the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does Framer Agent Playbook access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Framer Agent Playbook safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Framer Agent Playbook use?

Framer Agent Playbook is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Framer Agent Playbook use?

About 2.1k tokens (SKILL.md is roughly 8.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 30k tokens, read only when the agent opens those files.

What are the alternatives to Framer Agent Playbook?

Skills that share tags, products or a category with Framer Agent Playbook: UI Styling (Ohh-889/skyroc, 795 stars), Material 3 (hamen/material-3-skill, 1.5k stars), Trip Map Builder (hiyeshu/trip-map-builder, 244 stars) and Antislop Layoutmobile (miqdadbadjuber/anti-slop, 5.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Framer Agent Playbook?

fredm00n (a GitHub user) maintains it in fredm00n/framerlabs, which has 135 GitHub stars. The repository holds 2 skills in this directory. The repository was last updated on October 10, 2026.

Source: fredm00n/framerlabs on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.