@framer/agent 0.0.35 → 0.0.37

package/dist/start-relay-server.js

@@ -15,7 +15,7 @@ import { createRequire } from 'module';
 import * as vm from 'vm';
 import isWsl from 'is-wsl';
 
-/* @framer/ai relay server v0.0.35 */
+/* @framer/ai relay server v0.0.37 */
 var __defProp = Object.defineProperty;
 var __knownSymbol = (name2, symbol) => (symbol = Symbol[name2]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name2);
 var __typeError = (msg) => {
@@ -200,7 +200,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.35" 
+  "0.0.37" 
 );
 
 // src/relay-client.ts
@@ -561,6 +561,57 @@ var ALLOWED_MODULES = /* @__PURE__ */ new Set([
   "os",
   "node:os"
 ]);
+function getChildren(node) {
+  return Array.isArray(node.children) ? node.children : [];
+}
+__name(getChildren, "getChildren");
+function isAgentTreeNode(value) {
+  if (typeof value !== "object" || value === null) return false;
+  if (!("id" in value) || !("type" in value)) return false;
+  return typeof value.id === "string" && typeof value.type === "string";
+}
+__name(isAgentTreeNode, "isAgentTreeNode");
+function getInnerText(node) {
+  if (!node) return "";
+  if (node.type === "TextLineBreak") return "\n";
+  if (node.type === "TextRun") {
+    const text = node.attributes?.text;
+    return typeof text === "string" ? text : "";
+  }
+  const children = getChildren(node);
+  if (children.length === 0) {
+    const text = node.attributes?.text;
+    return typeof text === "string" ? text : "";
+  }
+  const childrenText = children.map(getInnerText);
+  if (node.type === "TextBlock") return childrenText.join("");
+  return childrenText.join("\n");
+}
+__name(getInnerText, "getInnerText");
+function* walkWithSkipChildren(input) {
+  if (Array.isArray(input)) {
+    for (const root of input) {
+      if (isAgentTreeNode(root)) yield* walkNodeWithSkipChildren(root);
+    }
+    return;
+  }
+  if (isAgentTreeNode(input)) yield* walkNodeWithSkipChildren(input);
+}
+__name(walkWithSkipChildren, "walkWithSkipChildren");
+function* walkNodeWithSkipChildren(node) {
+  let shouldSkipChildren = false;
+  yield {
+    node,
+    skipChildren: /* @__PURE__ */ __name(() => {
+      shouldSkipChildren = true;
+    }, "skipChildren")
+  };
+  if (shouldSkipChildren) return;
+  for (const child of getChildren(node)) {
+    yield* walkNodeWithSkipChildren(child);
+  }
+}
+__name(walkNodeWithSkipChildren, "walkNodeWithSkipChildren");
 function createSandboxedRequire(scopedFs) {
   const sandboxedRequire = /* @__PURE__ */ __name(((id) => {
     if (!ALLOWED_MODULES.has(id)) {
@@ -626,6 +677,8 @@ async function execute(session, code, options = {}) {
     // Framer API
     framer: session.connection.framer,
     state: session.state,
+    walkWithSkipChildren,
+    getInnerText,
     // Console
     console: customConsole,
     // Module system (sandboxed)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@framer/agent",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "description": "CLI and skills for connecting your AI agents to Framer.",
   "type": "module",
   "bin": "./dist/cli.js",
@@ -8,7 +8,7 @@
   "types": "./dist/cli.d.ts",
   "files": [
     "dist/",
-    "docs/"
+    "skills/"
   ],
   "scripts": {
     "build": "tsup",
@@ -25,14 +25,14 @@
     "@trpc/client": "^11.17.0",
     "@trpc/server": "^11.17.0",
     "commander": "^12.1.0",
-    "framer-api": "^0.1.17",
+    "framer-api": "^0.1.18",
     "is-wsl": "^3.1.1",
     "zod": "^4.4.3"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.13",
-    "@framerjs/framer-events": "0.0.187",
-    "@types/node": "24.13.0",
+    "@framerjs/framer-events": "0.0.193",
+    "@types/node": "24.13.2",
     "tsup": "^8.0.2",
     "tsx": "^4.22.4",
     "typescript": "^5.9.2",

package/skills/framer/SKILL.md

@@ -0,0 +1,198 @@
+---
+name: framer
+description: >
+  Use when the user wants to design, edit, or publish a website or web page — creating layouts, editing sections, updating text or images, managing CMS collections and content, syncing external data, creating or modifying code components, managing color and text styles, handling localization, or publishing deployments. Trigger when the user mentions Framer, references their website or web pages, asks to edit designs, update site content, or work with any Framer project — even if they don't explicitly say 'Framer'.
+  **Mandatory precondition**: run `{{FRAMER_AGENT_COMMAND}}@latest setup` and let it complete **BEFORE** loading this skill.
+allowed-tools:
+  - 'Bash({{FRAMER_AGENT_COMMAND}}:*)'
+  - 'Bash({{FRAMER_AGENT_COMMAND}}@latest:*)'
+  - 'Read({{FRAMER_TEMPORARY_DIR}}/*)'
+  - 'Write({{FRAMER_TEMPORARY_DIR}}/*)'
+  - 'Read({{FRAMER_SKILL_DIR}}/projects/**)'
+  - 'Read({{FRAMER_SKILL_DIR}}/start-conversation.md)'
+---
+
+If you didn't run this command before loading the skill, run it now:
+```bash
+{{FRAMER_AGENT_COMMAND}}@latest setup
+```
+
+## Capabilities
+
+What you can do with the Framer CLI:
+
+- **Canvas Editing**: For design tasks — creating or editing pages, sections, layouts, recreating designs from screenshots, etc.
+- **CMS**: Create, read, update, delete collections and items. Sync external databases.
+- **Styles**: Manage color and text styles. Sync design systems.
+- **Code Components**: Create, edit, type-check, and add custom React components to the canvas.
+- **Assets**: Upload and manage images and files.
+- **Localization**: Manage translations programmatically.
+- **Data**: Store metadata on nodes and projects for plugin state.
+- **Screenshots**: Capture node screenshots as PNG/JPEG. Export nodes as SVG.
+- **Publishing**: Publish projects, manage deployments, track changes.
+
+## CLI Usage
+
+### Permissions
+
+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 `{{FRAMER_AGENT_COMMAND}}@latest` commands with elevated permissions from the get-go. Do not try to execute them with the default sandboxed permissions; they will hang or fail.
+
+### Session Management
+
+If the user refers to a project by name or description rather than giving a URL, first inspect the recent projects:
+
+```bash
+{{FRAMER_AGENT_COMMAND}}@latest 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
+{{FRAMER_AGENT_COMMAND}}@latest 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
+{{FRAMER_AGENT_COMMAND}}@latest project new
+{{FRAMER_AGENT_COMMAND}}@latest session new "<returned project id>"
+```
+
+To remix (duplicate) an existing project and connect to the copy:
+
+```bash
+{{FRAMER_AGENT_COMMAND}}@latest project remix "<url, project id, or remix link>"
+{{FRAMER_AGENT_COMMAND}}@latest session new "<returned project id>"
+```
+
+List active sessions:
+
+```bash
+{{FRAMER_AGENT_COMMAND}}@latest session list
+```
+
+## Generated Project Context
+
+`session new` refreshes project-specific prompt and context content under this installed skill:
+
+```text
+projects/<safeProjectId>/
+  index.md
+  project-inventory.md
+  prompt/
+  recipes.md
+  metadata.json
+```
+
+The generated `project-inventory.md` includes a snapshot of project context from `framer.agent.getContext()`, including pages, components, CMS data, styles, fonts, icons, and IDs when available.
+The source template for generated project files lives at `projects/__template__/`. Files ending in `.template.md` are rendered into generated files without the `.template` marker.
+
+Before editing, read `projects/<safeProjectId>/index.md` first. It contains a **task map**: read every item marked required in its "Always" row, including `prompt/critical-reminders.md`, then the row that matches your work — and every additional row a multi-domain task touches. The map routes you to the exact `prompt/` sections, `recipes.md` entries, and implementation guides for that task; read only what the map points to.
+
+Read `projects/<safeProjectId>/project-inventory.md` before using project-specific IDs, page paths, component names, CMS collection names, style preset names, or icon names. Treat it as a generated snapshot; when the project may have changed, use `{{FRAMER_AGENT_COMMAND}}@latest read-project` for fresh live project state.
+
+Use `projects/<safeProjectId>/recipes.md` as reference material for static CMS, image, plugin data, localization, and limitations examples. Do not read all recipes by default; follow the pointers in the task map.
+
+`safeProjectId` uses the project ID with characters outside `a-z`, `A-Z`, `0-9`, `_`, and `-` replaced by `-`.
+
+During normal task execution, do not call `framer.agent.getSystemPrompt()` or `framer.agent.getContext()` yourself. `session new` already refreshed their output into the generated files.
+
+If the user explicitly asks to prompt the Framer agent, use `startConversation`, or delegate a design task to Framer's agent, read `start-conversation.md`. Do not read it otherwise.
+
+## Required Workflow
+
+Every connected-project task follows these steps:
+
+1. Run `session new` and keep the returned session ID.
+2. Read the generated project `index.md` and follow its task map to the relevant sections.
+3. Look up current API docs before every new API method use.
+4. Execute code through the CLI with `-s <sessionId>`.
+5. Store reusable results in `state`.
+6. Review or read back changes before reporting completion.
+
+### API Documentation
+
+Run `{{FRAMER_AGENT_COMMAND}}@latest docs` before writing code that uses a method you have not already verified in this task. Do not guess method names or signatures.
+
+```bash
+{{FRAMER_AGENT_COMMAND}}@latest docs
+{{FRAMER_AGENT_COMMAND}}@latest docs Collection
+{{FRAMER_AGENT_COMMAND}}@latest docs Collection.getItems
+{{FRAMER_AGENT_COMMAND}}@latest docs framer.agent.applyChanges
+```
+
+`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 referenced types recursively.
+
+### Method Selection
+
+Prefer `framer.agent.*` methods over regular plugin API methods when an agent-specific method exists.
+
+- Use `{{FRAMER_AGENT_COMMAND}}@latest read-project` and `{{FRAMER_AGENT_COMMAND}}@latest apply-changes` when possible. It is still ok to call `framer.agent.readProject` or `framer.agent.applyChanges` in exec scripts if the task needs more complex logic than a plain CLI call.
+- Use `framer.agent.getNode`, `getNodes`, `getNodesOfTypes`, `getDescendantsOfTypes`, `getDescendantReferencesOfTypes`, `getRect`, `getScopeNode`, `getGroundNode`, `getParentNode`, `getAncestors`, `serialize`, `serializeNodes`, and `paginate` for project tree reads. In exec scripts, use the VM globals `walkWithSkipChildren` and `getInnerText` for local traversal of serialized nodes.
+- Do not use `{{FRAMER_AGENT_COMMAND}}@latest read-project` or `framer.agent.readProject` for node tree reads unless you have just checked current docs and confirmed the exact query type. Query shapes such as `{ type: "node-by-id" }` are not valid for the current local API.
+- Use `framer.agent.readComponentControls`, `readIconSetControls`, `readIcons`, `readLayoutTemplateControls`, and `readShaderControls` for reading controls of components, icon sets, icons, layout templates, and shaders.
+- Use `framer.agent.applyChanges` for page, layout, style, CMS-on-canvas, component, and design-token edits when possible. Do not use low-level node APIs like `createNode`, `setAttributes`, or `setRect` for design/layout work.
+- Use `framer.agent.publish` for publishing. Do not use `publish`, `getDeployments`, or `deploy` for normal agent publishing flows.
+- Prefer `framer.agent.applyChanges` and project tree read methods for CMS work where possible. Fall back to collection APIs only for functionality otherwise not supported. If you add collections or fields via collection APIs, some things may not work as expected when those collections or fields are then used on the canvas via `framer.agent.applyChanges`.
+- Create styles, design tokens, components, and variables via `framer.agent.applyChanges`. Using plugin API methods can cause issues when trying to use newly created values later in `framer.agent.applyChanges` calls.
+- Use generic `framer.*` plugin API methods only for capabilities without a CLI command or agent-specific counterpart, such as code file management, localization, and redirects.
+
+### Execute Code
+
+Prefer writing code to a unique file under `{{FRAMER_TEMPORARY_DIR}}/` and executing it with `-f`. Do not create code files with shell heredocs or `cat`.
+
+Name files `<sessionId>-<short-summary>.js`, for example `1-read-collections.js`.
+
+```bash
+{{FRAMER_AGENT_COMMAND}}@latest exec -s 1 -f {{FRAMER_TEMPORARY_DIR}}/1-read-collections.js
+```
+
+For short snippets, `exec` also accepts `-e <code>` or code piped on stdin.
+
+### Use `state`
+
+Always save results you will need again. API calls are slow; do not repeat them.
+
+```js
+state.collections = await framer.getCollections();
+```
+
+### Runtime Notes
+
+- `framer` is the connected Framer Server API instance.
+- `state` is an object persisted between exec calls within your session.
+- `console` is available for output.
+- `require` can load sandboxed Node.js modules: fs, path, url, crypto, buffer, util, os.
+- Standard globals include `fetch`, `Buffer`, `URL`, `crypto`, and `setTimeout`.
+- `fs` operations are sandboxed to cwd, `/tmp`, and `os.tmpdir()`.
+
+### 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"]}]
+'@
+{{FRAMER_AGENT_COMMAND}}@latest <command> --option $value
+```
+
+## Core Usage Principles
+
+- Be concise. Do the work and report user-facing results, not internal field IDs or escaping details.
+- Use `framer.*` for plugin API calls. Top-level methods are not globals.
+- When command output includes `[FRAMER_BRANCH_CHANGE]`:
+  - If you did not call `switchBranch` or `createBranch` yourself and the name follows the default `adjective-noun` pattern, use `renameBranch` to rename with a concise title describing the current task.
+  - Tell the user the active branch changed and include the `url` value.
+- Before making changes that add, update, or delete content the user did not clearly request, explain the planned change and ask for confirmation.
+- Always ask for confirmation before destructive actions that the user did not explicitly request.
+
+## Compaction
+
+If an agent conversation is compacted during a connected-project task, read this skill, the generated project `index.md`, and the sections its task map points to back into context before continuing. This instruction itself must not be lost during compaction.

package/skills/framer/projects/__template__/index.template.md

@@ -0,0 +1,35 @@
+# Framer Project Context
+
+## Project Details
+
+- Project ID: {{PROJECT_ID}}
+- Safe Project ID: {{SAFE_PROJECT_ID}}
+- Session ID: {{SESSION_ID}}
+- Generated At: {{GENERATED_AT}}
+- Project inventory: [[project-inventory.md]]
+
+## How to use this file
+
+This `index.md` is the map. Read the **Always** row first — it is the core foundation, needed for every change. Then read the row that matches your task, plus **every** additional row a multi-domain task touches (e.g. a landing page with a blog is *pages + CMS + components*; do not guess the other domains from memory). Open a guide only when a row names one, and request guides through [[prompt/implementation-guidance-documentation-index.md]]. Fuller patterns and sequencing live in [[recipes.md]].
+
+## Task map
+
+| Doing… | Read before you start |
+|---|---|
+| **Always — every change** | All files are required: [[prompt/core-principles.md]] (layout, spacing, width, fills, overflow) · [[prompt/core-examples.md]] (worked DSL patterns) · [[prompt/implementation-strategy.md]] (pick creation/edit/recreation, write a design plan, settle reusable-systems + site-metadata) · [[prompt/updating-the-project.md]] (DSL grammar) · [[prompt/tools.md]] (reads, screenshots, `reviewChanges`). House rules: [[prompt/overview.md]], [[prompt/guardrails.md]], [[prompt/critical-reminders.md]]. |
+| **Pages / sections** — create, redesign, add sections, visual polish, review | + [[prompt/design-rules.md]] · [[prompt/how-projects-work.md]] §Layout Recipe + §Width Rules + §Links |
+| **Responsive breakpoints** | [[recipes.md]] § Responsive breakpoints · [[prompt/how-projects-work.md]] §Layout Recipe (rules 7–8) |
+| **CMS** — collections, items, fields, collection lists, CMS-backed content | [[prompt/how-projects-work.md]] §CMS · [[prompt/updating-the-project.md]] (variable/CMS DSL) · guide **CMS Collection Lists** |
+| **CMS detail pages** | [[prompt/how-projects-work.md]] §CMS detail pages · guide **CMS Detail Pages** |
+| **Components / variants / icons** | [[prompt/how-projects-work.md]] §Components + §Icons · guide **Buttons** or others as needed |
+| **Forms** | [[prompt/how-projects-work.md]] §Forms · guide **Forms** |
+| **Navigation / links / redirects** | [[prompt/how-projects-work.md]] §Links + §Layout Templates · guide **Navigations** |
+| **Publish** | [[prompt/how-projects-work.md]] §Hosting · [[prompt/critical-reminders.md]] |
+
+## Prompt Sections
+
+{{PROMPT_SECTION_LIST}}
+
+## Project Inventory
+
+Current project-specific pages, components, CMS data, styles, fonts, icons, and IDs are stored in [[project-inventory.md]]. Treat it as a generated snapshot: read it for orientation, and use the live `read-project` CLI when you need fresh project state.

package/skills/framer/projects/__template__/project-inventory.template.md

@@ -0,0 +1,27 @@
+# Framer Project Inventory
+
+This file contains the current project-specific context from `framer.agent.getContext({ pagePath: '/' })`, including pages, components, CMS data, styles, fonts, icons, and IDs when available.
+
+## Project Details
+
+- Project ID: {{PROJECT_ID}}
+- Safe Project ID: {{SAFE_PROJECT_ID}}
+- Session ID: {{SESSION_ID}}
+- Generated At: {{GENERATED_AT}}
+
+## Fresh project reads
+
+This file is a generated snapshot. Use it for orientation, but query the live project before relying on IDs or names that may have changed.
+
+Check the current read-project query docs, then run the CLI with the query objects you need:
+
+```bash
+{{READ_PROJECT_DOCS_COMMAND}}
+{{READ_PROJECT_COMMAND}}
+```
+
+The `read-project` command returns fresh project state for the active session without rewriting this generated snapshot.
+
+## Inventory
+
+{{PROJECT_CONTEXT}}

package/skills/framer/projects/__template__/recipes.md

@@ -0,0 +1,119 @@
+# Static Recipes
+
+These are patterns only. Before using any method below, run `docs <method-or-class>` to verify the current signature.
+
+## CMS Items
+
+Collections and items are nodes. Read them with agent project methods, and create or edit them with `framer.agent.applyChanges` where possible. A collection's fields are its `variables`; an item's cells are `$control__<fieldId>` attributes.
+
+List collections and fields:
+
+```js
+const collections = await framer.agent.getNodesOfTypes({ types: ["CollectionNode"] });
+console.log(collections.map((collection) => ({
+	id: collection.id,
+	name: collection.name,
+	itemCount: collection.$itemCount,
+	fields: collection.variables.map((field) => ({
+		id: field.id,
+		name: field.name,
+		type: field.type,
+	})),
+})));
+```
+
+Read direct collection items:
+
+```js
+const collection = await framer.agent.serialize({
+	id: "collection-id",
+	depth: 1,
+});
+console.log(collection.children ?? []);
+```
+
+Create or edit items with `applyChanges`:
+
+```js
+console.log(await framer.agent.applyChanges(
+	`+CollectionItemNode newPost parent="collection-id";
+	 SET newPost $control__slug="hello-world" $control__title="Hello World";`,
+));
+```
+
+## Images
+
+Canvas editing accepts image URLs directly when setting an image fill.
+
+Source stock images:
+
+```js
+const { results } = await framer.agent.queryImages({
+	source: "unsplash",
+	query: "snow-capped mountains",
+	count: 4,
+	orientation: "landscape",
+});
+state.heroUrl = results[0].url;
+```
+
+Upload an external image if it will be reused:
+
+```js
+state.heroUrl = (await framer.uploadImage({
+	image: "https://example.com/hero.png",
+	altText: "Mountain range at sunset",
+})).url;
+```
+
+Reuse an existing canvas image URL:
+
+```js
+const node = await framer.agent.getNode({ id: "image-node-id" });
+state.heroUrl = node.attributes.fill;
+```
+
+Add inline SVGs through the plugin API:
+
+```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",
+});
+```
+
+## Plugin Data
+
+Store metadata on nodes or globally in the project.
+
+```js
+await framer.setPluginData("myKey", "myValue");
+const value = await framer.getPluginData("myKey");
+
+await node.setPluginData("processed", "true");
+const nodeData = await node.getPluginData("processed");
+```
+
+Set a key to `null` to delete it.
+
+## Localization
+
+```js
+const locales = await framer.getLocales();
+const groups = await framer.getLocalizationGroups();
+const french = locales.find((locale) => locale.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.

package/skills/framer/start-conversation.md

@@ -0,0 +1,33 @@
+# Prompt The Framer Agent
+
+Read this file only when the user explicitly asks to prompt the Framer agent, use `startConversation`, or delegate a design task to Framer's agent.
+
+Use `framer.agent.startConversation()` to start a stateful design subagent. Keep the `conversationId` it returns in `state`, and call `framer.agent.continueConversation()` with it to continue the same design task.
+
+Do not call `framer.agent.getSystemPrompt()`, `framer.agent.getContext()`, or `framer.agent.applyChanges()` with this approach.
+
+```js
+state.agent ??= {};
+
+const first = await framer.agent.startConversation(
+	"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.agent.continueConversation("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.

package/{docs/skills/framer-code-components.md → skills/framer-code-components/SKILL.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 and the generated framer-project-<projectId> 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 reading the Components row of the generated projects/<safeProjectId>/index.md task map first in the same task; never load this skill directly as the entry point."
 ---
 
 # Framer Code Components