Agent skill

Framer Common Errors

by jeremylongshore in jeremylongshore/tons-of-skills-marketplace

Diagnose and fix Framer common errors and exceptions. An agent skill from jeremylongshore/tons-of-skills-marketplace.

MITAuto-check passedDevelopment

Install Framer Common Errors

skills CLI
$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill framer-common-errors -a claude-code

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

GitHub CLI
$ gh skill install jeremylongshore/tons-of-skills-marketplace framer-common-errors --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/jeremylongshore/tons-of-skills-marketplace.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/.curated/framer-common-errors .claude/skills/framer-common-errors && 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-common-errors
GitHub stars
2.8k
Token cost
~1.2k tokens
SKILL.md length
360 words
Files
1
Skills in repo
3,342
Repo updated
First seen
Licence
MIT

At a glance

Diagnose and fix Framer common errors and exceptions. An agent skill from jeremylongshore/tons-of-skills-marketplace.

  • Encountering Framer errors
  • SKILL.md covers Prerequisites, Instructions, Output and Error Handling, plus 6 more sections
  • Calls npm and curl; reaches api.framer.com; needs FRAMER_API_KEY
  • Debugging failed requests

What it does

Framer Common Errors is an agent skill from jeremylongshore/tons-of-skills-marketplace. Diagnose and fix Framer common errors and exceptions. Use when encountering Framer errors, debugging failed requests, or troubleshooting integration issues. Trigger with phrases like "framer error", "fix framer", "framer not working", "debug framer".

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: Designed for Claude Code

It sits in Development, covering Debugging. The repository describes itself as: Model-agnostic agent-skills platform with a harness-free canonical layer, verified adapters, and the ccpi package manager. Explore at tonsofskills.com. The licence is MIT.

When your agent uses it

  • Encountering Framer errors
  • Debugging failed requests
  • Troubleshooting integration issues
  • With phrases like framer error

Example prompts

  • “framer error”
  • “fix framer”
  • “framer not working”
  • “/framer-common-errors”

Requirements

  • A credential in FRAMER_API_KEY
  • Compatibility (from SKILL.md): Designed for Claude Code
  • Pre-approved tools (allowed-tools): Read, Grep, Bash(curl:*)

What it can do on your machine

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

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Grep
    • Bash(curl:*)

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm
    • curl

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

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • api.framer.com

    Also links to:

    • framer.com

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

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • FRAMER_API_KEY

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

  • Compatibility

    Designed for Claude Code

    From compatibility in the SKILL.md frontmatter.

Context cost

Framer Common Errors loads about 1.2k tokens when it runs. Until then it costs about 68 tokens; SKILL.md has 360 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~68
When it runs · the whole SKILL.md, loaded when a task matches
~1.2k

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 jeremylongshore/tons-of-skills-marketplace at commit cfae287, republished under its MIT licence (© jeremylongshore). 360 words, ~1,170 tokens.

Download SKILL.mdSave it as .claude/skills/framer-common-errors/SKILL.md (or your agent's skills folder).
name
framer-common-errors
description
Diagnose and fix Framer common errors and exceptions. Use when encountering Framer errors, debugging failed requests, or troubleshooting integration issues. Trigger with phrases like "framer error", "fix framer", "framer not working", "debug framer".
allowed-tools
Read, Grep, Bash(curl:*)
compatibility
Designed for Claude Code
version
1.5.0
license
MIT
author
Jeremy Longshore <jeremy@intentsolutions.io>
tags
saas, framer

Framer Common Errors

Prerequisites

An authorized site owner, an opaque incident ID, redacted diagnostics, and a safe staging reproduction path.

Instructions

Classify the issue as publishing, domain, asset, access, integration, or availability; reproduce with a staging page; apply the smallest reversible correction; verify both recovery and a safe failure response.

Output

Return a receipt with category, opaque correlation ID, action, verification, owner, and follow-up. Keep visitor data, tokens, and page content out of support evidence.

Error Handling

Pause publishing or integration changes on access, domain, or unexpected-destination failures. Use a rollback and route repeated failures to the site owner.

Examples

Break a fictional staging publish configuration, restore it, and verify the production site is untouched while the receipt contains no visitor or credential data.

Overview

Diagnostic reference for common Framer plugin, component, and Server API errors with actionable fixes.

Error Reference

Plugin Not Appearing in Editor

Cause: Dev server not running or plugin not registered.

Fix:

bash
npm run dev  # Start Vite dev server
# Then in Framer: Plugins > Development > select your plugin

framer is not defined

Cause: Calling framer API outside the Framer editor iframe context.

Fix: The framer global from framer-plugin only works inside the editor. For server-side access, use framer-api package instead.

typescript
// Plugin (editor): import { framer } from 'framer-plugin';
// Server (headless): import { framer } from 'framer-api';

Component Renders Blank on Canvas

Cause: Runtime error in component code (swallowed by Framer).

Fix: Open Framer's browser console (right-click > Inspect) and check for errors. Common causes:

  • Missing export default on component
  • Undefined props without defaults
  • Fetch errors from blocked CORS requests

Show full SKILL.md (130 more words)Show less
addPropertyControls Not Showing

Cause: Called on wrong component or wrong import.

Fix:

tsx
// Must import from 'framer', not 'framer-plugin'
import { addPropertyControls, ControlType } from 'framer';

// Must be called AFTER the component definition
export default function MyComponent(props) { /* ... */ }
addPropertyControls(MyComponent, { /* ... */ });

Code Override Not Applying

Cause: Override function not returning correct shape.

Fix: Overrides must return an Override type object (Framer Motion props):

tsx
import { Override } from 'framer';

// Correct — returns Override
export function MyOverride(): Override {
  return { whileHover: { scale: 1.1 } };
}

// Wrong — missing return type, or returning JSX

Server API WebSocket connection failed

Cause: Invalid API key, wrong site ID, or network blocking WSS.

Fix:

bash
# Verify API key is valid
echo $FRAMER_API_KEY | head -c 20  # Should start with 'framer_sk_'

# Verify site ID
echo $FRAMER_SITE_ID

# Test WebSocket connectivity
curl -s https://api.framer.com/health || echo "Cannot reach Framer API"

CMS Collection field type invalid

Cause: Using unsupported field type string.

Fix: Valid types: string, formattedText, number, boolean, date, link, image, color, enum, slug


CORS Errors in Code Components

Cause: Fetch API in components blocked by browser CORS policy.

Fix: Use a CORS proxy or ensure your API returns proper Access-Control-Allow-Origin headers. Framer components run in the browser — same CORS rules apply.

Quick Diagnostic

bash
# Check if Framer API is reachable
curl -s https://api.framer.com/health

# Verify npm packages
npm list framer-plugin framer-api framer

# Check for common issues in code
grep -r "from 'framer'" src/ --include="*.tsx" | head -10

Resources

Next Steps

For debugging tools, see framer-debug-bundle.

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

Files

Just SKILL.md in skills/.curated/framer-common-errors of jeremylongshore/tons-of-skills-marketplace.

Open the folder on GitHubat commit cfae287

Compare with similar skills

Framer Common Errors 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 Common Errors compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Framer Common Errors this skilljeremylongshore/tons-of-skills-marketplace2.8k—~1.2kAutomated safety check: PassMIT
Native Data FetchingCherryHQ/cherry-studio-app4k6 repos~2.9kAutomated safety check: NotesMIT
Gumroad Prod Consoleantiwork/gumroad9.8k—~2.9kAutomated safety check: NotesMIT
LangBot Plugin Developmentlangbot-app/LangBot18k—~3.9kAutomated safety check: PassApache-2.0
Keybase RPC Log Analysiskeybase/client9.3k—~3kAutomated safety check: PassBSD-3-Clause
Jazz UI Developmentgarden-co/classic-jazz2.5k—~1.7kAutomated safety check: PassMIT

Similar skills

  • Native Data Fetching

    CherryHQ/cherry-studio-app

    A skill your agent uses when implementing or debugging ANY network request, API call, or data fetching.

    4k GitHub starsUsed in 6 repos~2.9k tokens
    DevelopmentAuto-check: notes
  • Gumroad Prod Console

    antiwork/gumroad

    Execute read-only Ruby/Rails commands against Gumroad's production database for debugging and investigation.

    9.8k GitHub stars~2.9k tokensUpdated today
    DevelopmentAuto-check: notes
  • LangBot Plugin Development

    langbot-app/LangBot

    Guides building, debugging and testing LangBot plugins: components, SDK calls, README and locale rules, SDK pitfalls and WebSocket-based testing.

    18k GitHub stars~3.9k tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Captures a clean Keybase service log and analyzes it for redundant, duplicated or looping RPCs, then checks whether a caching fix reduced the calls.

    9.3k GitHub stars~3k tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Jazz UI Development

    garden-co/classic-jazz

    A skill your agent uses when building, debugging, or optimizing Jazz applications.

    2.5k GitHub stars~1.7k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed
  • Logging Patterns

    decebals/claude-code-java

    Java logging best practices with SLF4J, structured logging (JSON), and MDC for request tracing.

    751 GitHub starsUsed in 1 repo~3.3k tokens
    DevelopmentAuto-check passed

More from jeremylongshore/tons-of-skills-marketplace

All 3,342 skills in this repo
  • Performing Security Code Review

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to conduct a security-focused code review using the security-agent plugin.

    2.8k GitHub starsUsed in 2 repos~1.3k tokens
    Auto-check: notes
  • Adapting Transfer Learning Models

    jeremylongshore/tons-of-skills-marketplace

    Build this skill automates the adaptation of pre-trained machine learning models using transfer learning techniques.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Agent Context Loader

    jeremylongshore/tons-of-skills-marketplace

    Execute proactive auto-loading: automatically detects and loads agents.md files.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Aggregating Performance Metrics

    jeremylongshore/tons-of-skills-marketplace

    Aggregate and centralize performance metrics from applications, systems, databases, caches, and services.

    2.8k GitHub stars~1.2k tokensUpdated today
    Auto-check passed
  • Analyzing Capacity Planning

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to analyze capacity requirements and plan for future growth.

    2.8k GitHub stars~947 tokensUpdated today
    Auto-check passed
  • Analyzing Database Indexes

    jeremylongshore/tons-of-skills-marketplace

    Process use when you need to work with database indexing. An agent skill from jeremylongshore/tons-of-skills-marketplace.

    2.8k GitHub stars~2k tokensUpdated today
    Auto-check passed

Questions about Framer Common Errors

What does Framer Common Errors do?

Diagnose and fix Framer common errors and exceptions. An agent skill from jeremylongshore/tons-of-skills-marketplace. Framer Common Errors is an agent skill from jeremylongshore/tons-of-skills-marketplace. Diagnose and fix Framer common errors and exceptions.

When should I use Framer Common Errors?

Framer Common Errors fits situations like: encountering Framer errors; debugging failed requests; troubleshooting integration issues; with phrases like framer error.

How do I install Framer Common Errors in Claude Code?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill framer-common-errors -a claude-code`. Or copy the skill folder (skills/.curated/framer-common-errors in jeremylongshore/tons-of-skills-marketplace) into .claude/skills/framer-common-errors in your project. Claude Code loads it when a task matches its description.

How do I install Framer Common Errors in Codex?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill framer-common-errors -a codex`. Or copy the skill folder (skills/.curated/framer-common-errors in jeremylongshore/tons-of-skills-marketplace) into .agents/skills/framer-common-errors in your project. Codex loads it when a task matches its description.

Can I use Framer Common Errors 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 jeremylongshore/tons-of-skills-marketplace --skill framer-common-errors -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-common-errors, .gemini/skills/framer-common-errors, .github/skills/framer-common-errors and .opencode/skills/framer-common-errors in your project.

What does Framer Common Errors need to run?

Going by SKILL.md and its folder, Framer Common Errors needs the command-line tools its instructions call (npm and curl) and credentials named FRAMER_API_KEY. Our summary lists: A credential in FRAMER_API_KEY. Its frontmatter pre-approves these tools: Read, Grep, Bash(curl:*). Compatibility (from SKILL.md): Designed for Claude Code.

Does Framer Common Errors access the network?

SKILL.md names 2 domains. In commands or code: api.framer.com; the agent is likely to contact it when it follows the instructions. As links in the text: framer.com. This is read from the text; nothing was executed.

Is Framer Common Errors 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 Common Errors use?

Framer Common Errors 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 Common Errors use?

About 1.2k tokens (SKILL.md is roughly 4.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Framer Common Errors?

Skills that share tags, products or a category with Framer Common Errors: Native Data Fetching (CherryHQ/cherry-studio-app, 4k stars), Gumroad Prod Console (antiwork/gumroad, 9.8k stars), LangBot Plugin Development (langbot-app/LangBot, 18k stars) and Keybase RPC Log Analysis (keybase/client, 9.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Framer Common Errors?

jeremylongshore (a GitHub user) maintains it in jeremylongshore/tons-of-skills-marketplace, which has 2,827 GitHub stars. The repository holds 3,342 skills in this directory. The repository was last updated on October 10, 2026.

Source: jeremylongshore/tons-of-skills-marketplace on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.