framer-dalton 0.0.24 → 0.0.25

package/README.md

@@ -16,14 +16,14 @@ That installs skills into `~/.agents/skills` and `~/.claude/skills`.
 
 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` - the base meta skill that explains setup, project selection, and session creation.
 - `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.
+- `framer-project-<project id>` - a dynamically-created skill for interacting with a specific project.
 
-1. Running `npx framer-dalton@latest setup` will install the base `framer` and `framer-code-component` skills.
-2. The frontmatter of `framer-code-components` tells agents to always load `framer` first.
+1. Running `npx framer-dalton@latest setup` will install the base `framer` and `framer-code-components` skills.
+2. The frontmatter of `framer-code-components` tells agents to always load `framer` and the generated project skill first.
 3. 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.
-4. 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.
+4. Creating a new session for a project will create a `framer-project-<project id>` file. This file contains the latest agent system prompt from `framer.getAgentSystemPrompt` and the latest project context from `framer.getAgentContext`. Agents must load this project-specific skill immediately after creating a session before doing any connected-project work.
 
 ## Local Development
 

package/dist/cli.js

@@ -8,10 +8,11 @@ import { spawn, execFile } from 'child_process';
 import { z } from 'zod';
 import os from 'os';
 import { ErrorCode, FramerAPIError } from 'framer-api';
+import net from 'net';
 import { fileURLToPath } from 'url';
 import { createTRPCClient, httpLink } from '@trpc/client';
 
-/* @framer/ai CLI v0.0.24 */
+/* @framer/ai CLI v0.0.25 */
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
@@ -329,7 +330,7 @@ __name(markTelemetryNoticeShown, "markTelemetryNoticeShown");
 // src/version.ts
 var VERSION = (
   // typeof is used to ensure this can be used just via tsx or node etc. without build
-  "0.0.24" 
+  "0.0.25" 
 );
 var trackingEndpoint = "https://events.framer.com/track";
 var inProgressTrackings = /* @__PURE__ */ new Set();
@@ -1803,6 +1804,12 @@ var types = {
     kind: "interface",
     references: ["CodeExportCommon"],
     members: [
+      {
+        name: "componentId",
+        type: "string",
+        description: "Component ID for this code file export.",
+        optional: false
+      },
       {
         name: "insertURL",
         type: "string",
@@ -4478,7 +4485,7 @@ var types = {
     name: "HostnameType",
     description: "",
     kind: "alias",
-    alias: '"default" | "custom" | "version"',
+    alias: '"default" | "custom" | "version" | "branch"',
     references: []
   },
   imageassetdata: {
@@ -6959,7 +6966,7 @@ var types = {
       },
       {
         name: "unstable_getCodeFile",
-        type: "(id: string) => Promise<CodeFileData | null>",
+        type: "(idOrPath: string) => Promise<CodeFileData | null>",
         description: "@deprecated",
         optional: false
       },
@@ -7019,7 +7026,7 @@ var types = {
       },
       {
         name: "getCodeFile",
-        type: "(id: string) => Promise<CodeFileData | null>",
+        type: "(idOrPath: string) => Promise<CodeFileData | null>",
         description: "",
         optional: false
       },
@@ -7760,9 +7767,15 @@ var types = {
       {
         name: "model",
         type: "string",
-        description: "",
+        description: "Supervisor model id, optionally with eval-style reasoning effort suffix, e.g. `anthropic/claude-opus-4.6=low`.",
         optional: false
       },
+      {
+        name: "userAgentModel",
+        type: "string",
+        description: "Inner Framer Agent model override. Defaults to `model` when omitted. Supports the same `model=effort` syntax.",
+        optional: true
+      },
       {
         name: "pagePath",
         type: "string",
@@ -13514,8 +13527,8 @@ var methodsByCategory = {
     {
       name: "getCodeFile",
       category: "framer",
-      signature: "getCodeFile(id: string): Promise<CodeFile | null>",
-      description: 'Get a specific code file by its ID.\n\n@param id - The unique identifier of the code file.\n@returns The CodeFile instance or `null` if not found.\n\n@example\n```ts\nconst codeFile = await framer.getCodeFile("code-file-id")\n```\n@category code-files',
+      signature: "getCodeFile(idOrPath: string): Promise<CodeFile | null>",
+      description: 'Get a specific code file by its ID or file path.\n\n@param idOrPath - The unique identifier (e.g. `"codeFile/AbcD_23"`) or\nfile path (e.g. `"Button.tsx"` or `"overrides/withAnalytics.tsx"`) of the\ncode file.\n@returns The CodeFile instance or `null` if not found.\n\n@example\n```ts\n// Look up by ID\nconst codeFile = await framer.getCodeFile("codeFile/AbcD_23")\n\n// Look up by file path\nconst codeFile = await framer.getCodeFile("Button.tsx")\n```\n@category code-files',
       references: ["CodeFile"]
     },
     {
@@ -16225,6 +16238,7 @@ __name(readRelayToken, "readRelayToken");
 var __filename$1 = fileURLToPath(import.meta.url);
 var __dirname$1 = path7.dirname(__filename$1);
 var RELAY_PORT = Number(process.env.FRAMER_CLI_PORT) || 19988;
+var WAIT_TIMEOUT_SECONDS = 5;
 var client = createTRPCClient({
   links: [
     httpLink({
@@ -16252,6 +16266,43 @@ function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 __name(sleep, "sleep");
+var PORT_PROBE_TIMEOUT_MS = 1e3;
+function probePort(port) {
+  return new Promise((resolve) => {
+    const socket = net.createConnection({ host: "127.0.0.1", port });
+    const done = /* @__PURE__ */ __name((result) => {
+      socket.removeAllListeners();
+      socket.destroy();
+      resolve(result);
+    }, "done");
+    socket.setTimeout(PORT_PROBE_TIMEOUT_MS);
+    socket.once("connect", () => done("in_use"));
+    socket.once("timeout", () => {
+      debug("relay", `port ${port} probe timed out`);
+      done("unknown");
+    });
+    socket.once("error", (err) => {
+      if (err.code === "ECONNREFUSED") {
+        done("free");
+      } else {
+        debug("relay", `port ${port} probe error: ${err.code ?? err.message}`);
+        done("unknown");
+      }
+    });
+  });
+}
+__name(probePort, "probePort");
+async function waitForPortFree(port, timeoutMs) {
+  const deadline = Date.now() + timeoutMs;
+  while (Date.now() < deadline) {
+    if (await probePort(port) === "free") {
+      return true;
+    }
+    await sleep(100);
+  }
+  return false;
+}
+__name(waitForPortFree, "waitForPortFree");
 function compareVersions(v1, v2) {
   const parts1 = v1.split(".").map(Number);
   const parts2 = v2.split(".").map(Number);
@@ -16287,8 +16338,20 @@ async function ensureRelayServerRunning(options = {}) {
       debug("relay", "shutting down old server...");
       try {
         await client.shutdown.mutate();
-        await sleep(500);
-      } catch {
+      } catch (err) {
+        debug(
+          "relay",
+          `shutdown RPC failed: ${err instanceof Error ? err.message : String(err)}`
+        );
+      }
+      const freed = await waitForPortFree(
+        RELAY_PORT,
+        WAIT_TIMEOUT_SECONDS * 1e3
+      );
+      if (!freed) {
+        throw new Error(
+          `Old relay server (v${serverVersion}) is still listening on 127.0.0.1:${RELAY_PORT} after ${WAIT_TIMEOUT_SECONDS}s; please kill it manually`
+        );
       }
       debug("relay", "old server shut down");
     } else {
@@ -16317,7 +16380,7 @@ async function ensureRelayServerRunning(options = {}) {
       "relay",
       `readiness poll ${attempt + 1}/10: version=${newVersion ?? "not ready"}`
     );
-    if (newVersion) {
+    if (newVersion === VERSION) {
       logger?.log("Relay server started successfully");
       return;
     }
@@ -16380,26 +16443,27 @@ function renderTemplate(template, values) {
   return rendered;
 }
 __name(renderTemplate, "renderTemplate");
-var CANVAS_SKILL_PREFIX = "framer-canvas-editing-project-";
+var PROJECT_SKILL_PREFIX = "framer-project-";
+var LEGACY_CANVAS_EDITING_SKILL_PREFIX = "framer-canvas-editing-project-";
 function toSafeProjectId(projectId) {
   return projectId.replace(/[^a-zA-Z0-9_-]/g, "-");
 }
 __name(toSafeProjectId, "toSafeProjectId");
-function buildProjectCanvasSkill(projectId, agentContext, canvasPrompt) {
-  const skillName = `${CANVAS_SKILL_PREFIX}${toSafeProjectId(projectId)}`;
-  const template = readSkillDoc("framer-canvas-editing-project.md");
+function buildProjectSkill(projectId, agentContext, agentPrompt) {
+  const skillName = `${PROJECT_SKILL_PREFIX}${toSafeProjectId(projectId)}`;
+  const template = readSkillDoc("framer-project.md");
   const content = `${renderTemplate(template, {
     SKILL_NAME: skillName,
     PROJECT_ID: projectId,
     GENERATED_AT: (/* @__PURE__ */ new Date()).toISOString(),
-    CANVAS_PROMPT: canvasPrompt.trimEnd(),
+    AGENT_PROMPT: agentPrompt.trimEnd(),
     AGENT_CONTEXT: agentContext.trimEnd(),
     FRAMER_TEMPORARY_DIR
   })}
 `;
   return { skillName, content };
 }
-__name(buildProjectCanvasSkill, "buildProjectCanvasSkill");
+__name(buildProjectSkill, "buildProjectSkill");
 function writeSkill(root, skillName, content) {
   fs7.mkdirSync(root, { recursive: true });
   const rootStat = fs7.statSync(root);
@@ -16417,6 +16481,17 @@ function writeSkill(root, skillName, content) {
   return filePath;
 }
 __name(writeSkill, "writeSkill");
+function cleanupLegacyCanvasEditingSkills(skillRoots = getDefaultSkillRoots()) {
+  for (const root of skillRoots) {
+    if (!fs7.existsSync(root)) continue;
+    for (const entry of fs7.readdirSync(root)) {
+      if (!entry.startsWith(LEGACY_CANVAS_EDITING_SKILL_PREFIX)) continue;
+      const skillDir = path7.join(root, entry);
+      fs7.rmSync(skillDir, { recursive: true, force: true, maxRetries: 2 });
+    }
+  }
+}
+__name(cleanupLegacyCanvasEditingSkills, "cleanupLegacyCanvasEditingSkills");
 function getDefaultSkillRoots() {
   const home = os.homedir();
   return [
@@ -16425,16 +16500,15 @@ function getDefaultSkillRoots() {
   ];
 }
 __name(getDefaultSkillRoots, "getDefaultSkillRoots");
-function cleanupStaleSkills(activeProjectIds, skillRoots) {
-  const roots = skillRoots ?? getDefaultSkillRoots();
+function cleanupStaleSkills(activeProjectIds, skillRoots = getDefaultSkillRoots()) {
   const sanitizedActiveProjectIds = new Set(
     [...activeProjectIds].map(toSafeProjectId)
   );
-  for (const root of roots) {
+  for (const root of skillRoots) {
     if (!fs7.existsSync(root)) continue;
     for (const entry of fs7.readdirSync(root)) {
-      if (!entry.startsWith(CANVAS_SKILL_PREFIX)) continue;
-      const sanitizedProjectId = entry.slice(CANVAS_SKILL_PREFIX.length);
+      if (!entry.startsWith(PROJECT_SKILL_PREFIX)) continue;
+      const sanitizedProjectId = entry.slice(PROJECT_SKILL_PREFIX.length);
       const isActive = sanitizedActiveProjectIds.has(sanitizedProjectId);
       if (isActive) continue;
       const skillDir = path7.join(root, entry);
@@ -16453,10 +16527,10 @@ function installSkills(options = { type: "base" }) {
     }
   ];
   if (options.type === "project") {
-    const projectSkill = buildProjectCanvasSkill(
+    const projectSkill = buildProjectSkill(
       options.projectId,
       options.agentContext,
-      options.canvasPrompt
+      options.agentPrompt
     );
     skills.push({
       name: projectSkill.skillName,
@@ -16559,14 +16633,14 @@ __name(getAgentContext, "getAgentContext");
 async function refreshSkillsFromSession(sessionId, projectId) {
   try {
     debug("skills", "fetching agent system prompt + context...");
-    const [canvasPrompt, agentContext] = await Promise.all([
+    const [agentPrompt, agentContext] = await Promise.all([
       getAgentSystemPrompt(sessionId),
       getAgentContext(sessionId)
     ]);
     debug("skills", "installing skills...");
     installSkills({
       type: "project",
-      canvasPrompt,
+      agentPrompt,
       projectId,
       agentContext
     });
@@ -16937,6 +17011,13 @@ program.command("setup").description(
   "Install Framer skills into ~/.agents/skills and ~/.claude/skills"
 ).action(async () => {
   try {
+    try {
+      cleanupLegacyCanvasEditingSkills();
+    } catch (error) {
+      printWarning(
+        `Failed to clean up legacy canvas editing skills: ${formatErrorForUser(error)}`
+      );
+    }
     const results = installSkills();
     await waitForClaudeCodeSkillDiscovery();
     printSetupSummary(results);

package/dist/start-relay-server.js

@@ -2,6 +2,7 @@ import fs4 from 'fs';
 import os from 'os';
 import path from 'path';
 import 'child_process';
+import 'net';
 import { fileURLToPath } from 'url';
 import { createTRPCClient, httpLink } from '@trpc/client';
 import crypto, { randomUUID, timingSafeEqual } from 'crypto';
@@ -13,7 +14,7 @@ import { z } from 'zod';
 import { createRequire } from 'module';
 import * as vm from 'vm';
 
-/* @framer/ai relay server v0.0.24 */
+/* @framer/ai relay server v0.0.25 */
 var __defProp = Object.defineProperty;
 var __knownSymbol = (name2, symbol) => (symbol = Symbol[name2]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name2);
 var __typeError = (msg) => {
@@ -159,7 +160,7 @@ __name(debug, "debug");
 // src/version.ts
 var VERSION = (
   // typeof is used to ensure this can be used just via tsx or node etc. without build
-  "0.0.24" 
+  "0.0.25" 
 );
 
 // src/relay-client.ts

package/docs/skills/framer-code-components.md

@@ -1,6 +1,6 @@
 ---
 name: framer-code-components
-description: "Framer code component implementation guidance, platform constraints, layout annotations, property controls, and authoring best practices. Use only after loading the framer skill first in the same task; never load this skill directly as the entry point."
+description: "Framer code component implementation guidance, platform constraints, layout annotations, property controls, and authoring best practices. Use only after loading the framer skill and the generated framer-project-<projectId> skill first in the same task; never load this skill directly as the entry point."
 ---
 
 # Framer Code Components

package/docs/skills/framer-project.md

@@ -0,0 +1,426 @@
+---
+name: {{SKILL_NAME}}
+description: "Project-scoped Framer skill for project {{PROJECT_ID}}. Covers project reads, edits, change review, publishing, image sourcing, component operations, and canvas editing. Very important: never load this skill without having already read the `framer` skill and without having already run `session new`, which will dynamically update this skill."
+allowed-tools: ["Bash(npx framer-dalton:*)", "Bash(npx framer-dalton@latest:*)", "Read({{FRAMER_TEMPORARY_DIR}}/*)", "Write({{FRAMER_TEMPORARY_DIR}}/*)"]
+---
+
+## Project Scope
+
+- Project ID: {{PROJECT_ID}}
+- Generated At: {{GENERATED_AT}}
+
+## Required Workflow
+
+Every connected-project task follows these steps:
+
+### 1. Look up the API (before EVERY new use of an API method)
+
+**You MUST run `npx framer-dalton docs` before writing any code.** Do not guess method names or signatures.
+
+```bash
+npx framer-dalton docs Collection           # What methods exist?
+npx framer-dalton docs Collection.getItems  # What are the parameters and return type?
+```
+
+### 2. Execute code
+
+Only after checking docs, use your write tool to write your code to a unique file under `{{FRAMER_TEMPORARY_DIR}}/`, then execute it with `-f`. Do not create code files with shell heredocs or `cat`. Name each file `<sessionId>-<short-summary>.js` where `<short-summary>` is a brief kebab-case description (e.g., `1-read-collections.js`, `1-add-team-member.js`).
+
+```bash
+npx framer-dalton exec -s 1 -f {{FRAMER_TEMPORARY_DIR}}/1-read-collections.js
+```
+
+### 3. Store results in `state`
+
+Always save results you'll need again. Don't repeat API calls.
+
+## Method Selection
+
+Use agent-specific methods whenever a plugin API method and an agent method overlap:
+
+- Use `readProjectForAgent`, `getNodeForAgent`, `getNodesForAgent`, `getNodesOfTypesForAgent`, `getScopeNodeForAgent`, `getGroundNodeForAgent`, `getParentNodeForAgent`, `getAncestorsForAgent`, `serializeForAgent`, `serializeNodesForAgent`, and `paginateForAgent` for project tree reads.
+- Use `applyAgentChanges` for page and layout edits. Do not use low-level node APIs like `createNode`, `setAttributes`, or `setRect` for design/layout work.
+- Use `publishForAgent` for publishing. Do not use `publish`, `getDeployments`, or `deploy` for normal agent publishing flows.
+
+Use the plugin API for capabilities that do not have an agent-specific counterpart, such as code file management, localization, and redirects.
+
+During normal task execution, do not call `framer.getAgentSystemPrompt()` or `framer.getAgentContext()`. This skill already includes their output.
+
+## Core Usage Principles
+
+- Be concise. Don't narrate implementation details like field IDs, escaping, or internal steps. Just do the work and report what was accomplished in user-facing terms.
+- Use `framer.*` for plugin API calls. Top-level methods are not globals.
+- Before making changes that add/update/delete content that the user has not clearly and explicitly requested in this conversation, inform the user of what you plan to do and why, and ask them to confirm.
+    - You do not need to ask for confirmation when carrying out a specific add/update/delete change that the user has already clearly requested (this counts as explicit consent).
+    - You do not need to explain or ask for confirmation for non-destructive calls like reading project state.
+    - If the exact action was not agreed upon, or you are inferring a broader change or choosing between multiple reasonable options using your own judgment, ask for confirmation.
+    - Always ask for confirmation before destructive actions that the user did not explicitly request - especially deletes, cleanup, resets, or broad removals inferred by the agent.
+
+## Compaction
+
+**Critical**: if an agent conversation is compacted, you MUST read the entirety of this skill back into context. This is non-negotiable and this instruction itself must not be lost during compaction.
+
+## Context Variables
+
+- `framer` - Connected Framer Server API instance
+- `state` - Object persisted between calls within your session
+- `console` - For output (`console.log`, `console.error`)
+- `require` - Sandboxed Node.js modules: fs, path, url, crypto, buffer, util, os
+- Standard globals: `fetch`, `Buffer`, `URL`, `crypto`, `setTimeout`
+
+**Note:** `fs` operations are sandboxed to cwd, /tmp, and os.tmpdir().
+
+## Use `state` to Avoid Repeated Calls
+
+**Always store results in `state` when you'll need them again.** API calls are slow - don't repeat them.
+
+```js
+// {{FRAMER_TEMPORARY_DIR}}/1-get-collections.js
+state.collections = await framer.getCollections();
+```
+
+```bash
+npx framer-dalton exec -s 1 -f {{FRAMER_TEMPORARY_DIR}}/1-get-collections.js
+```
+
+```js
+// {{FRAMER_TEMPORARY_DIR}}/1-get-team-items.js — reuse from state
+state.teamItems = await state.collections.find(c => c.name === 'Team').getItems();
+console.log(state.teamItems.length);
+```
+
+```bash
+npx framer-dalton exec -s 1 -f {{FRAMER_TEMPORARY_DIR}}/1-get-team-items.js
+```
+
+Store anything you'll reference again.
+
+## Canvas Editing: Alternative Approach (“Prompt the Framer agent”)
+
+Use this approach only if the user asks for it. Do not mention this approach to the user otherwise.
+
+This approach is called “Prompt the Framer agent”. With this approach, use `framer.startAgentConversation()` to start a stateful design subagent. Keep the `conversationId` it returns in `state`, and call `framer.continueAgentConversation()` with it to continue the same design task.
+
+Do not call `framer.getAgentSystemPrompt()` or `framer.getAgentContext()` or `framer.applyAgentChanges()` with this approach.
+
+Example:
+
+```js
+state.agent ??= {};
+const first = await framer.startAgentConversation(
+  "Build me a landing page based on the attached screenshot",
+  {
+    pagePath: "/",
+    imageUrls: ["https://example.com/image.png"],
+    // selectionNodeIds: [...]
+  },
+);
+state.agent.conversationId = first.conversationId;
+console.log(first.responseMessages);
+
+const second = await framer.continueAgentConversation("Now make it pink", {
+  conversationId: state.agent.conversationId,
+  selectionNodeIds: ["someNodeId"],
+  // imageUrls: [...],
+  // changing pagePath or model is not supported
+});
+console.log(second.responseMessages);
+```
+
+Prompting may take a while to complete, so set the command timeout to 10 minutes.
+
+## Execute Code
+
+Prefer using your write tool to write code to a unique file under `{{FRAMER_TEMPORARY_DIR}}/` and executing it with `-f`. Do not create code files with shell heredocs or `cat`:
+
+```bash
+npx framer-dalton exec -s <sessionId> -f {{FRAMER_TEMPORARY_DIR}}/<sessionId>-<short-summary>.js
+```
+
+For short snippets, `exec` also accepts `-e <code>` or code piped on stdin.
+
+## Shell Quoting
+
+In Windows PowerShell, if an argument contains nested quotes, use a single-quoted here-string and pass the variable. Do not backslash-escape quotes.
+
+```powershell
+$value = @'
+[{"key":"value","filter":["text","$rect"]}]
+'@
+npx framer-dalton <command> --option $value
+```
+
+## API Documentation
+
+```bash
+npx framer-dalton docs                            # List all available methods
+npx framer-dalton docs framer.getCollections      # Show top level method
+npx framer-dalton docs Collection                 # Show class with all method signatures
+npx framer-dalton docs Collection.addItems        # Show method + recursively expand all referenced types
+npx framer-dalton docs ScreenshotOptions          # Show type + recursively expand all referenced types
+```
+
+`docs` with no arguments lists available methods. Looking up a class shows its full definition without expanding referenced types. Looking up a specific method or type automatically expands all referenced types recursively.
+
+## API Examples
+
+**STOP: These are patterns only. Before using any method below, run `npx framer-dalton docs <ClassName>` to verify the current signature.**
+
+### Working with Collections (CMS)
+
+Collections are Framer's CMS. Each collection has fields (columns) and items (rows). Use the plugin Collection API (the methods below) for collection schema and item CRUD.
+
+**Exception — CMS Collection Lists.** The in-canvas construct that *renders* a collection as a repeating list of cards (the "Collection List" / repeater) is an agent/page concern. Build and edit those through `readProjectForAgent` and `applyAgentChanges`, not the plugin API. Use the plugin Collection API to read available collections and field schema first, then drive the list through the project-scoped skill.
+
+#### Reading Collections
+
+```js
+// Get all collections
+const collections = await framer.getCollections();
+console.log(collections.map((c) => ({ name: c.name, id: c.id })));
+
+// Get a specific collection by ID
+const collection = await framer.getCollection("collection-id");
+
+// Get fields (columns) - returns array of { id, type, name }
+const fields = await collection.getFields();
+console.log(fields);
+// [{ id: "BnNuS2i3o", type: "string", name: "Title" }, ...]
+
+// Get items (rows)
+const items = await collection.getItems();
+console.log(items);
+// [{ id: "XTM8FSHGs", slug: "post-1", draft: false, fieldData: {...} }, ...]
+```
+
+#### Sync external data to collection
+
+```js
+const collection = await framer.getCollection("collection-id");
+const existing = await collection.getItems();
+const existingIds = new Set(existing.map((i) => i.id));
+
+const externalData = await fetch("https://api.example.com/posts").then((r) =>
+  r.json(),
+);
+
+const items = externalData.map((post) => ({
+  id: post.id,
+  slug: post.slug,
+  fieldData: { title: post.title, content: post.body },
+}));
+
+await collection.addItems(items);
+
+// Remove items no longer in external source
+const newIds = new Set(items.map((i) => i.id));
+const toRemove = [...existingIds].filter((id) => !newIds.has(id));
+if (toRemove.length) await collection.removeItems(toRemove);
+
+await collection.setPluginData("lastSync", new Date().toISOString());
+```
+
+#### Field Types
+
+`boolean`, `color`, `number`, `string`, `formattedText` (HTML), `image`, `file`, `link`, `date`, `enum`, `collectionReference`, `multiCollectionReference`, `array` (galleries)
+
+#### Updating Collection Items
+
+```js
+// Add or update items (if id matches existing item, it updates)
+await collection.addItems([
+  {
+    id: "new-item-1",
+    slug: "hello-world",
+    fieldData: { titleFieldId: "Hello World" },
+  },
+]);
+
+// Remove items
+await collection.removeItems(["item-id-1", "item-id-2"]);
+
+// Reorder items
+const ids = items.map((i) => i.id).reverse();
+await collection.setItemOrder(ids);
+```
+
+#### Working with CollectionItem
+
+```js
+const items = await collection.getItems();
+const item = items[0];
+
+// Update item attributes
+await item.setAttributes({ slug: "new-slug" });
+
+// Navigate to item in Framer UI
+await item.navigateTo();
+
+// Remove item
+await item.remove();
+```
+
+### Working with Images
+
+Canvas editing accepts image URLs directly when setting an image fill, so the typical task is to obtain a URL and pass it through to the project-scoped skill.
+
+There are three sources you'll typically pull URLs from:
+
+**Stock photography.** Use `framer.queryImagesForAgent` to source candidates and stash the URL you want:
+
+```js
+const { results } = await framer.queryImagesForAgent({
+  source: "unsplash",
+  query: "snow-capped mountains",
+  count: 4,
+  orientation: "landscape",
+});
+state.heroUrl = results[0].url;
+```
+
+**An external URL the user provided.** Pass it through directly. If you'll reuse the same image across many edits, upload it once and stash the resulting asset URL to avoid re-resolving the source on every change:
+
+```js
+state.heroUrl = (await framer.uploadImage({
+  image: "https://example.com/hero.png",
+  altText: "Mountain range at sunset",
+})).url;
+```
+
+**An image already on the canvas.** Read the node and reuse its existing image URL:
+
+```js
+const node = await framer.getNodeForAgent({ id: "<image-node-id>" });
+state.heroUrl = node.attributes.fill;
+```
+
+For inline SVGs, use the plugin method directly:
+
+```js
+await framer.addSVG({
+  svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="8"/></svg>',
+  name: "circle.svg",
+});
+```
+
+### Code Components
+
+Code components are custom React components that run inside Framer. Use them when you need behavior that Framer's canvas doesn't support:
+
+- **Custom interactivity** — drag-to-reorder, gesture-driven animations, games, form validation
+- **External data** — fetching from APIs, rendering dynamic content, real-time updates
+- **Complex logic** — state machines, calculations, conditional rendering beyond simple variants
+- **Third-party libraries** — maps, charts, video players, rich text editors
+- **Canvas/WebGL** — custom drawing, 3D rendering, generative art
+
+
+If the design can be built with Framer's built-in components, layout tools, and interactions — don't use a code component. Code components are harder to maintain and can't be visually edited.
+
+Before writing code components, load the `framer-code-components` skill.
+
+#### Creation
+
+```js
+state.codeFile = await framer.createCodeFile("Badge.tsx", code);
+state.diagnostics = await state.codeFile.typecheck();
+console.log(state.diagnostics);
+```
+
+```js
+state.component = state.codeFile.exports.find(
+  (exportItem) => exportItem.type === "component" && exportItem.isDefaultExport,
+);
+await framer.applyAgentChanges(
+  `+ComponentInstanceNode badge parent="wrapper" component="${state.component.componentId}"; SET badge width=120 height=48;`,
+  { pagePath: "/" },
+);
+```
+
+#### Editing
+
+```js
+const codeFile = await framer.getCodeFile("Badge.tsx");
+state.updatedCodeFile = await codeFile.setFileContent(code);
+state.diagnostics = await state.updatedCodeFile.typecheck();
+console.log(state.diagnostics);
+```
+
+For large files, write `codeFile.content` to disk:
+
+```js
+const fs = require("fs");
+
+state.codeFile = await framer.getCodeFile("Badge.tsx");
+state.localCodePath = "{{FRAMER_TEMPORARY_DIR}}/Badge.tsx";
+fs.writeFileSync(state.localCodePath, state.codeFile.content);
+```
+
+Update the file with your patch tools, then load it back into Framer:
+
+```js
+const fs = require("fs");
+const code = fs.readFileSync(state.localCodePath, "utf8");
+state.updatedCodeFile = await state.codeFile.setFileContent(code);
+state.diagnostics = await state.updatedCodeFile.typecheck();
+console.log(state.diagnostics);
+```
+
+### Storing Data
+
+Store metadata on nodes or globally in the project.
+
+```js
+// Store global project data
+await framer.setPluginData("myKey", "myValue");
+const value = await framer.getPluginData("myKey");
+
+// Store data on a node
+await node.setPluginData("processed", "true");
+const nodeData = await node.getPluginData("processed");
+
+// List all keys
+const keys = await framer.getPluginDataKeys();
+const nodeKeys = await node.getPluginDataKeys();
+
+// Delete data (set to null)
+await framer.setPluginData("myKey", null);
+```
+
+### Localization
+
+```js
+// Get all locales
+const locales = await framer.getLocales();
+const defaultLocale = await framer.getDefaultLocale();
+
+// Get localization groups (pages, CMS items with translations)
+const groups = await framer.getLocalizationGroups();
+
+// Update translations
+const french = locales.find((l) => l.code === "fr");
+await framer.setLocalizationData({
+  valuesBySource: {
+    [sourceId]: {
+      [french.id]: { action: "set", value: "Bonjour" },
+    },
+  },
+});
+```
+
+### Known Limitations
+
+- **Pages**: Cannot change the path of a page
+- **Code overrides**: Cannot assign overrides to nodes
+- **Analytics**: No APIs exist for accessing analytics data
+
+---
+
+Below is documentation for agent-specific methods and guidelines on how to work on projects.
+
+{{AGENT_PROMPT}}
+
+---
+
+Below is the current project context:
+
+{{AGENT_CONTEXT}}

package/docs/skills/framer.md

@@ -31,11 +31,7 @@ What you can do with the Framer CLI:
 
 The Framer CLI requires network access (to download packages and connect to Framer servers) and file-system access outside the project directory (to install skills into `~/.agents/skills/` and `~/.claude/skills/`). In sandboxed environments, you must execute `npx framer-dalton` commands with elevated permissions from the get-go. Do not try to execute them with the default sandboxed permissions; they will hang or fail.
 
-### Required Workflow
-
-Every task follows these steps:
-
-#### 1. Connect (once per session)
+### Session Management
 
 If the user refers to a project by name or description rather than giving a URL, first inspect the recent projects:
 
@@ -45,12 +41,16 @@ npx framer-dalton project list
 
 Use that list to infer the likely project from the names and recency. If the right project is already known, use its project ID with `session new`. If there are multiple possible matches, clarify with the user. Only ask the user for a Project URL if there is no clear match. Avoid talking about the technical contents of returned data like IDs.
 
+Each session maintains a persistent connection to a Framer project. Use sessions to keep state separate between different tasks, persist data across multiple execute calls, and reuse the `framer` API instance without reconnecting.
+
 Create a session against an existing project:
 
 ```bash
 npx framer-dalton session new "<url or id>"
 ```
 
+This prints the session ID. You must always use that session ID with `-s <id>` for all subsequent commands. Using the same session preserves your `state` between calls.
+
 To create a brand new empty project and connect to it:
 
 ```bash
@@ -67,91 +67,6 @@ npx framer-dalton session new "<returned project id>"
 
 Note that during beta, you cannot connect to non-beta projects. If creating a session errors with a message about this, you need to move your project to beta.
 
-#### 2. Look up the API (before EVERY code execution)
-
-**You MUST run `npx framer-dalton docs` before writing any code.** Do not guess method names or signatures.
-
-```bash
-npx framer-dalton docs Collection           # What methods exist?
-npx framer-dalton docs Collection.getItems  # What are the parameters and return type?
-```
-
-#### 3. Execute code
-
-Only after checking docs, write your code to a unique file under `{{FRAMER_TEMPORARY_DIR}}/` and execute with `-f`. Name each file `<sessionId>-<short-summary>.js` where `<short-summary>` is a brief kebab-case description (e.g., `1-read-collections.js`, `1-add-team-member.js`).
-
-```bash
-npx framer-dalton exec -s 1 -f {{FRAMER_TEMPORARY_DIR}}/1-read-collections.js
-```
-
-#### 4. Store results in `state`
-
-Always save results you'll need again. Don't repeat API calls.
-
-**Do not skip step 2.** The examples below are patterns only - always verify current signatures with `npx framer-dalton docs`.
-
-## Core Usage Principles
-
-- Be concise. Don't narrate implementation details like field IDs, escaping, or internal steps. Just do the work and report what was accomplished in user-facing terms.
-- Use `framer.*` for plugin API calls. Top-level methods are not globals.
-- Before making changes that add/update/delete content that the user has not clearly and explicitly requested in this conversation, inform the user of what you plan to do and why, and ask them to confirm.
-    - You do not need to ask for confirmation when carrying out a specific add/update/delete change that the user has already clearly requested (this counts as explicit consent).
-    - You do not need to explain or ask for confirmation for non-destructive calls like reading project state.
-    - If the exact action was not agreed upon, or you are inferring a broader change or choosing between multiple reasonable options using your own judgment, ask for confirmation.
-    - Always ask for confirmation before destructive actions that the user did not explicitly request - especially deletes, cleanup, resets, or broad removals inferred by the agent.
-
-## Context Variables
-
-- `framer` - Connected Framer Server API instance
-- `state` - Object persisted between calls within your session
-- `console` - For output (`console.log`, `console.error`)
-- `require` - Sandboxed Node.js modules: fs, path, url, crypto, buffer, util, os
-- Standard globals: `fetch`, `Buffer`, `URL`, `crypto`, `setTimeout`
-
-**Note:** `fs` operations are sandboxed to cwd, /tmp, and os.tmpdir().
-
-## Use `state` to Avoid Repeated Calls
-
-**Always store results in `state` when you'll need them again.** API calls are slow - don't repeat them.
-
-```js
-// {{FRAMER_TEMPORARY_DIR}}/1-get-collections.js
-state.collections = await framer.getCollections();
-```
-
-```bash
-npx framer-dalton exec -s 1 -f {{FRAMER_TEMPORARY_DIR}}/1-get-collections.js
-```
-
-```js
-// {{FRAMER_TEMPORARY_DIR}}/1-get-team-items.js — reuse from state
-state.teamItems = await state.collections.find(c => c.name === 'Team').getItems();
-console.log(state.teamItems.length);
-```
-
-```bash
-npx framer-dalton exec -s 1 -f {{FRAMER_TEMPORARY_DIR}}/1-get-team-items.js
-```
-
-Store anything you'll reference again.
-
-## Session Management
-
-Each session maintains a persistent connection to a Framer project. Use sessions to:
-
-- Keep state separate between different tasks
-- Persist data across multiple execute calls
-- Reuse the `framer` API instance without reconnecting
-
-Get a new session ID:
-
-```bash
-npx framer-dalton session new "https://framer.com/projects/Website--abc123"
-# outputs: 1
-```
-
-**Always use your own session** - pass `-s <id>` to all commands. Using the same session preserves your `state` between calls.
-
 List active sessions:
 
 ```bash
@@ -160,296 +75,4 @@ npx framer-dalton session list
 
 ## Project-scoped skill
 
-**Always load the project-scoped skill `framer-canvas-editing-project-<projectId>` immediately after `session new`, regardless of the task.** It is the source of truth for the connected project and is required for canvas editing, project-tree reads, change review, publishing, page management, sourcing stock images, and component operations. CMS plugin API, code components, localization, plugin data, and CLI mechanics remain in this framer-dalton skill — use both together.
-
-## Canvas Editing: Alternative Approach (“Prompt the Framer agent”)
-
-Use this approach only if the user asks for it. Do not mention this approach to the user otherwise.
-
-This approach is called “Prompt the Framer agent”. With this approach, use `framer.startAgentConversation()` to start a stateful design subagent. Keep the `conversationId` it returns in `state`, and call `framer.continueAgentConversation()` with it to continue the same design task.
-
-Do not call `framer.getAgentSystemPrompt()` or `framer.getAgentContext()` or `framer.applyAgentChanges()` with this approach.
-
-Example:
-
-```js
-state.agent ??= {};
-const first = await framer.startAgentConversation(
-  "Build me a landing page based on the attached screenshot",
-  {
-    pagePath: "/",
-    imageUrls: ["https://example.com/image.png"],
-    // selectionNodeIds: [...]
-  },
-);
-state.agent.conversationId = first.conversationId;
-console.log(first.responseMessages);
-
-const second = await framer.continueAgentConversation("Now make it pink", {
-  conversationId: state.agent.conversationId,
-  selectionNodeIds: ["someNodeId"],
-  // imageUrls: [...],
-  // changing pagePath or model is not supported
-});
-console.log(second.responseMessages);
-```
-
-Prompting may take a while to complete, so set the command timeout to 10 minutes.
-
-## Execute Code
-
-Prefer writing code to a unique file under `{{FRAMER_TEMPORARY_DIR}}/` and executing it with `-f`:
-
-```bash
-npx framer-dalton exec -s <sessionId> -f {{FRAMER_TEMPORARY_DIR}}/<sessionId>-<short-summary>.js
-```
-
-For short snippets, `exec` also accepts `-e <code>` or code piped on stdin.
-
-## Shell Quoting
-
-In Windows PowerShell, if an argument contains nested quotes, use a single-quoted here-string and pass the variable. Do not backslash-escape quotes.
-
-```powershell
-$value = @'
-[{"key":"value","filter":["text","$rect"]}]
-'@
-npx framer-dalton <command> --option $value
-```
-
-## API Documentation
-
-```bash
-npx framer-dalton docs                            # List all available methods
-npx framer-dalton docs framer.getCollections      # Show top level method
-npx framer-dalton docs Collection                 # Show class with all method signatures
-npx framer-dalton docs Collection.addItems        # Show method + recursively expand all referenced types
-npx framer-dalton docs ScreenshotOptions          # Show type + recursively expand all referenced types
-```
-
-`docs` with no arguments lists available methods. Looking up a class shows its full definition without expanding referenced types. Looking up a specific method or type automatically expands all referenced types recursively.
-
-## API Examples
-
-**STOP: These are patterns only. Before using any method below, run `npx framer-dalton docs <ClassName>` to verify the current signature.**
-
-### Working with Collections (CMS)
-
-Collections are Framer's CMS. Each collection has fields (columns) and items (rows). Use the plugin Collection API (the methods below) for collection schema and item CRUD.
-
-**Exception — CMS Collection Lists.** The in-canvas construct that *renders* a collection as a repeating list of cards (the "Collection List" / repeater) is a canvas concern. Build and edit those through canvas editing, not the plugin API. Use the plugin Collection API to read available collections and field schema first, then drive the list through the canvas-editing skill.
-
-#### Reading Collections
-
-```js
-// Get all collections
-const collections = await framer.getCollections();
-console.log(collections.map((c) => ({ name: c.name, id: c.id })));
-
-// Get a specific collection by ID
-const collection = await framer.getCollection("collection-id");
-
-// Get fields (columns) - returns array of { id, type, name }
-const fields = await collection.getFields();
-console.log(fields);
-// [{ id: "BnNuS2i3o", type: "string", name: "Title" }, ...]
-
-// Get items (rows)
-const items = await collection.getItems();
-console.log(items);
-// [{ id: "XTM8FSHGs", slug: "post-1", draft: false, fieldData: {...} }, ...]
-```
-
-#### Field Types
-
-`boolean`, `color`, `number`, `string`, `formattedText` (HTML), `image`, `file`, `link`, `date`, `enum`, `collectionReference`, `multiCollectionReference`, `array` (galleries)
-
-#### Updating Collection Items
-
-```js
-// Add or update items (if id matches existing item, it updates)
-await collection.addItems([
-  {
-    id: "new-item-1",
-    slug: "hello-world",
-    fieldData: { titleFieldId: "Hello World" },
-  },
-]);
-
-// Remove items
-await collection.removeItems(["item-id-1", "item-id-2"]);
-
-// Reorder items
-const ids = items.map((i) => i.id).reverse();
-await collection.setItemOrder(ids);
-```
-
-#### Working with CollectionItem
-
-```js
-const items = await collection.getItems();
-const item = items[0];
-
-// Update item attributes
-await item.setAttributes({ slug: "new-slug" });
-
-// Navigate to item in Framer UI
-await item.navigateTo();
-
-// Remove item
-await item.remove();
-```
-
-### Working with Images
-
-Canvas editing accepts image URLs directly when setting an image fill, so the typical task is to obtain a URL and pass it through to the canvas-editing skill.
-
-There are three sources you'll typically pull URLs from:
-
-**Stock photography.** Use `framer.queryImagesForAgent` to source candidates and stash the URL you want:
-
-```js
-const { results } = await framer.queryImagesForAgent({
-  source: "unsplash",
-  query: "snow-capped mountains",
-  count: 4,
-  orientation: "landscape",
-});
-state.heroUrl = results[0].url;
-```
-
-**An external URL the user provided.** Pass it through directly. If you'll reuse the same image across many edits, upload it once and stash the resulting asset URL to avoid re-resolving the source on every change:
-
-```js
-state.heroUrl = (await framer.uploadImage({
-  image: "https://example.com/hero.png",
-  altText: "Mountain range at sunset",
-})).url;
-```
-
-**An image already on the canvas.** Read the node and reuse its existing image URL:
-
-```js
-const node = await framer.getNodeForAgent({ id: "<image-node-id>" });
-state.heroUrl = node.attributes.fill;
-```
-
-For inline SVGs, use the plugin method directly:
-
-```js
-await framer.addSVG({
-  svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="8"/></svg>',
-  name: "circle.svg",
-});
-```
-
-### Code Components
-
-Code components are custom React components that run inside Framer. Use them when you need behavior that Framer's visual tools don't support:
-
-- **Custom interactivity** — drag-to-reorder, gesture-driven animations, games, form validation
-- **External data** — fetching from APIs, rendering dynamic content, real-time updates
-- **Complex logic** — state machines, calculations, conditional rendering beyond simple variants
-- **Third-party libraries** — maps, charts, video players, rich text editors
-- **Canvas/WebGL** — custom drawing, 3D rendering, generative art
-
-If the design can be built with Framer's built-in components, layout tools, and interactions — don't use a code component. Code components are harder to maintain and can't be visually edited.
-
-#### Workflow
-
-1. **Create** a code file: `framer.createCodeFile("MyComponent.tsx", code)`
-2. **Edit** an existing code file: `codeFile.setFileContent(newCode)`
-3. **Type check**: `codeFile.typecheck()` or `framer.typecheckCode("File.tsx", code)`
-4. **Add to canvas**: `framer.addComponentInstance({ url: codeFile.exports[0].insertURL })`
-
-Use `npx framer-dalton docs CodeFile` and `npx framer-dalton docs Framer.createCodeFile` to look up the full API.
-
-#### Authoring guidance
-
-Before writing component code, load the `framer-code-components` skill.
-
-### Storing Data
-
-Store metadata on nodes or globally in the project.
-
-```js
-// Store global project data
-await framer.setPluginData("myKey", "myValue");
-const value = await framer.getPluginData("myKey");
-
-// Store data on a node
-await node.setPluginData("processed", "true");
-const nodeData = await node.getPluginData("processed");
-
-// List all keys
-const keys = await framer.getPluginDataKeys();
-const nodeKeys = await node.getPluginDataKeys();
-
-// Delete data (set to null)
-await framer.setPluginData("myKey", null);
-```
-
-### Localization
-
-```js
-// Get all locales
-const locales = await framer.getLocales();
-const defaultLocale = await framer.getDefaultLocale();
-
-// Get localization groups (pages, CMS items with translations)
-const groups = await framer.getLocalizationGroups();
-
-// Update translations
-const french = locales.find((l) => l.code === "fr");
-await framer.setLocalizationData({
-  valuesBySource: {
-    [sourceId]: {
-      [french.id]: { action: "set", value: "Bonjour" },
-    },
-  },
-});
-```
-
-### Common Patterns
-
-#### Iterate over all nodes in project
-
-```js
-const root = await framer.getCanvasRoot();
-for await (const node of root.walk()) {
-  console.log(node.name);
-}
-```
-
-#### Sync external data to collection
-
-```js
-const collection = await framer.getCollection("collection-id");
-const existing = await collection.getItems();
-const existingIds = new Set(existing.map((i) => i.id));
-
-const externalData = await fetch("https://api.example.com/posts").then((r) =>
-  r.json(),
-);
-
-const items = externalData.map((post) => ({
-  id: post.id,
-  slug: post.slug,
-  fieldData: { title: post.title, content: post.body },
-}));
-
-await collection.addItems(items);
-
-// Remove items no longer in external source
-const newIds = new Set(items.map((i) => i.id));
-const toRemove = [...existingIds].filter((id) => !newIds.has(id));
-if (toRemove.length) await collection.removeItems(toRemove);
-
-await collection.setPluginData("lastSync", new Date().toISOString());
-```
-
-### Known Limitations
-
-- **Pages**: Cannot change the path of a page
-- **Code overrides**: Cannot assign overrides to nodes
-- **Analytics**: No APIs exist for accessing analytics data
+**Always load the project-scoped skill `framer-project-<projectId>` immediately after `session new`, regardless of the task.** That skill is generated by `session new` and contains the documentation for everything you need to know about working with a Framer project.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framer-dalton",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "type": "module",
   "bin": "./dist/cli.js",
   "main": "./dist/cli.js",
@@ -23,7 +23,7 @@
     "@trpc/client": "^11.17.0",
     "@trpc/server": "^11.17.0",
     "commander": "^12.1.0",
-    "framer-api": "0.1.10",
+    "framer-api": "0.1.11",
     "zod": "^4.3.6"
   },
   "devDependencies": {

package/docs/skills/framer-canvas-editing-project.md

@@ -1,49 +0,0 @@
----
-name: {{SKILL_NAME}}
-description: "Project-scoped Framer skill for project {{PROJECT_ID}}. Covers canvas editing, project reads, change review, publishing, image sourcing, and component operations. Very important: never load this skill without having already read the `framer` skill and without having already run `session new`, which will dynamically update this skill."
-allowed-tools: ["Bash(npx framer-dalton:*)", "Bash(npx framer-dalton@latest:*)", "Read({{FRAMER_TEMPORARY_DIR}}/*)", "Write({{FRAMER_TEMPORARY_DIR}}/*)"]
----
-
-## Project Scope
-
-- Project ID: {{PROJECT_ID}}
-- Generated At: {{GENERATED_AT}}
-
-## Rules
-
-- For design/layout work, do not use low-level node APIs (`createNode`, `setAttributes`, `setRect`, etc.). Use the canvas editing flow (`read-project` + `apply-changes`) with the embedded prompt and project context in this skill.
-- During normal task execution, do not call `framer.getAgentSystemPrompt()` or `framer.getAgentContext()`. This skill already includes `getAgentContext({ pagePath: "/" })`.
-- `read-project` and `apply-changes` are one-liner CLI shortcuts for the high-frequency canvas-editing methods. Use them to read state and apply DSL inline without writing a file first:
-    - `npx framer-dalton read-project -s <sessionId> -q <queries> -p <pagePath>` — equivalent to `framer.readProjectForAgent(queries, { pagePath })`. Query types are documented in the embedded prompt below.
-    - `npx framer-dalton apply-changes -s <sessionId> -p <pagePath> -e <dsl>` — equivalent to `framer.applyAgentChanges(dsl, { pagePath })`.
-- The embedded prompt below also references other agent-surface methods (`reviewChangesForAgent`, `publishForAgent`, `queryImagesForAgent`, `flattenComponentInstanceForAgent`, `makeExternalComponentLocalForAgent`, `getNodeForAgent` / `getNodesForAgent` / `getNodesOfTypesForAgent` / `getScopeNodeForAgent` / `getGroundNodeForAgent` / `getParentNodeForAgent` / `getAncestorsForAgent`, and `serializeForAgent` / `serializeNodesForAgent` / `paginateForAgent`). These have no dedicated shortcut; invoke via `npx framer-dalton exec -s <sessionId> -e 'console.log(await framer.<method>(<args>))'`.
-
-## Workflow Loop
-
-```bash
-# 1) Read page structure first (fill in real query from Live Agent System Prompt)
-npx framer-dalton read-project -s <sessionId> -q '<query to get page structure>' -p "/"
-
-# 2) Request additional targeted queries only if needed
-
-# 3) Apply changes — pass DSL directly via apply-changes
-npx framer-dalton apply-changes -s <sessionId> -p "/" -e "$dsl"
-```
-
-## Critical for UX: Streaming
-
-When you generate DSL to apply, keep it short. Each `apply-changes` call must only cover ONE logical section (header, footer, hero, card, etc.). Once you apply ONE section, continue with the next.
-
-This ensures progress is streamed to the user in small, visible increments.
-
-## Live Agent System Prompt
-
-This is the static prompt returned by `framer.getAgentSystemPrompt()`. 
-
-{{CANVAS_PROMPT}}
-
-## Live Agent Context (/)
-
-This is the dynamic project context returned by `framer.getAgentContext({ pagePath: "/" })`. It contains project-specific data for the current page, including available fonts, available components, design tokens, style presets, and icon sets.
-
-{{AGENT_CONTEXT}}