framer-dalton

Framer Agent CLI

CLI and agent skills for interacting with Framer projects via the Framer Server API.

Installation

Install or refresh the globally available skills:

npx framer-dalton@latest setup

That installs skills into ~/.agents/skills and ~/.claude/skills.

How It Works

The CLI and the installed skills are meant to work together. There are three skills:

• framer - the base skill that explains how to use the CLI and the API in general.
• framer-code-components - explains specific prompts for how to write code components and provides examples.
• framer-canvas-editing-project-<project id> - a dynamically-created skill that explains how to canvas edit and includes project context.

• Running npx framer-dalton@latest setup will install the base framer and framer-code-component skills.
• The frontmatter of framer-code-components tells agents to always load framer first.
• The frontmatter of framer tells agents to run npx framer-dalton@latest setup BEFORE loading the skill. This command will auto-update the cli and update the skill files.
• Creating a new session for a project will create a framer-canvas-editing-project-<project id> file. This file contains the latest agent system prompt from framer.getAgentSystemPrompt and the latest project context from framer.getAgentContext. Agents are told not to load this skill until after creating a session.

Local Development

Running a development build against production headless api server

• Run make install-dev in this repo.

• Run your agent in this directory and specifically load the framer-dev skill:

# Claude: 
> /framer-dev

# Codex:
> $framer-dev

Running with the local headless plugin server

Use this when you change something in the Server API implementation.

• Start FramerStudio with make dev.
• Start FramerHeadlessAPI against the local tunnel with make dev-tunnel.
• Run make install-dev in this repo.
• Run your agent in this directory and specifically load the framer-dev-local skill:

# Claude: 
> /framer-dev-local

# Codex:
> $framer-dev-local

Using a local framer-api package

Use this when you change the server API interface itself, such as adding or changing API methods.

• Publish or otherwise make your updated framer-api package available.
• Install it locally with npm install ....
• Regenerate the type data:

make generate-types

Removing local builds and returning to production

Later, to return to the procution skills:

make uninstall-dev