Nine past sessions ran the same build. Same phrasing, same phases, and the same traps rediscovered from scratch each time. This turns that into a skill Raycast can fire, so the only thing left to type is the reference.
Shipped 2026-09-04. Approved with all defaults plus code-component interactions. The skill, its five references and all five scripts are installed and tested; the Raycast script command is in place. Everything below is what was built.
I searched every session transcript in ~/.claude/projects for
@framer/agent — 91 sessions, 1.7 GB. Sixteen mention the CLI more than twenty
times; nine of those are actual "rebuild this page in Framer" builds. Click any row for the
verbatim brief and what it settled.
The wording barely moves between them. That stability is the argument for a skill: the brief is already a template, it just lives in your head and gets retyped every time.
I pulled every message where you pushed back — 60-odd across the nine sessions. Sorted, they are almost never about layout, colour or copy. They are about interaction, motion and asset quality. Structurally correct pages got rejected anyway. There is a technical reason for that, and it is fixable.
Variant interactions written through the Framer agent API are silently dropped at publish. Not rejected, not warned about — they serialize back correctly and then simply are not in the published page. That is why "everything is non-functional" kept being true even when the canvas looked right.
So the skill treats the interaction layer as code components, not DSL
variant handlers — and proves each one by driving the published page with a real browser before
reporting anything as working. Three more findings compound it: 125 appear-effects were on
onMount (fires once at load, never replays — that is the "not properly fading in
and fading out"); loopEffect.repeatType="mirror" counts a half cycle where CSS
counts a full one, so a float copied verbatim runs at half speed; and code components render in
an isolated iframe on canvas, so a canvas screenshot can never show behaviour.
These are the parts you keep re-supplying by hand. Each becomes a file the skill reads before it touches anything — the same "one build kit is the ground truth" pattern that made the 23-page Tessera run survive.
Ordering is not cosmetic. Most of the traps in section 05 are ordering bugs: breakpoints derived the wrong direction, anchors wired before their targets exist, controls set in the same call that created the node. The skill locks the sequence and the gates.
Every one of these cost a debugging round in a past session. They go in
references/framer-traps.md and get read before the first edit, so they cost nothing
next time. Search or filter.
Note the silent group especially. Those are the ones where the API reports success, the readback agrees, and the published page is still wrong — the whole reason "verify on the live URL" is a gate and not a suggestion.
I ran phase 01 for real, just now, at all three widths. Everything below is measured output rather than a mock-up: eight sections in identical order at every width, the live palette and type scale read off computed styles. This is the brief the skill hands itself before it opens Framer.
| Section | px |
|---|
I checked live pricing with higgsfield generate cost. GPT Image 2 at
2k/high is 8.5 credits per image. Your balance right now is 5.4 — one hero costs more
than you have. The past builds spent 10 to 170 credits each, so the skill has to be cost-aware by
design rather than generous by default.
Three tricks change the maths, and all
three are already proven. A contact sheet: Chairside got six headshots out of one 3:2
generation for about 10.5 credits, sliced locally by scanning for the white gutters.
Anchor‑then‑propagate: Orbit ran one GPT Image 2 hero at 8.5 and twelve Nano
Banana passes at 2 each, every one carrying a cropped panel of the reference. And
queryImages stays free — real permanent Unsplash URLs with alt text and a dominant
colour, which is what Tessera used for all its photography.
You described the snippet behaviour exactly: press ;, type the keyword,
the whole brief fills itself in. That is a Raycast snippet, installed in one click via
raycast://snippets/import. The script command is the version for when you would rather
not open a terminal first.
Nothing overwrites the official Framer skill — that one owns the DSL grammar and is
regenerated by setup on every session new. The new skill sits on top and
orchestrates it, so a Framer CLI update can never clobber your workflow.
These are the only choices I could not settle from the transcripts. Tap through them — the panel keeps score. Then say "approved", or name what you changed.