Help us improve
Share bugs, ideas, or general feedback.
From framer-pack
Diagnoses and fixes common Framer errors in plugins, components, code overrides, Server API WebSockets, CMS fields, and CORS with code snippets.
npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin framer-packHow this skill is triggered — by the user, by Claude, or both
Slash command
/framer-pack:framer-common-errorsThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Diagnostic reference for common Framer plugin, component, and Server API errors with actionable fixes.
Sets up Vite-powered local dev for Framer plugins with hot-reload to editor, TypeScript/React components, and Vitest testing for logic.
Expert guidance for Framer design, Framer Motion animations, interactive prototyping, production site building, and CMS/MCP integration. Activates automatically when working on Framer sites or animations.
Integrates design tokens with Framer for prototyping and production sites. Use when adding CSS custom properties to Framer projects, creating code components, or building Framer sites with design systems.
Share bugs, ideas, or general feedback.
Diagnostic reference for common Framer plugin, component, and Server API errors with actionable fixes.
Cause: Dev server not running or plugin not registered.
Fix:
npm run dev # Start Vite dev server
# Then in Framer: Plugins > Development > select your plugin
framer is not definedCause: 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.
// Plugin (editor): import { framer } from 'framer-plugin';
// Server (headless): import { framer } from 'framer-api';
Cause: Runtime error in component code (swallowed by Framer).
Fix: Open Framer's browser console (right-click > Inspect) and check for errors. Common causes:
export default on componentaddPropertyControls Not ShowingCause: Called on wrong component or wrong import.
Fix:
// 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, { /* ... */ });
Cause: Override function not returning correct shape.
Fix: Overrides must return an Override type object (Framer Motion props):
import { Override } from 'framer';
// Correct — returns Override
export function MyOverride(): Override {
return { whileHover: { scale: 1.1 } };
}
// Wrong — missing return type, or returning JSX
WebSocket connection failedCause: Invalid API key, wrong site ID, or network blocking WSS.
Fix:
# 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 invalidCause: Using unsupported field type string.
Fix: Valid types: string, formattedText, number, boolean, date, link, image, color, enum, slug
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.
# 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
For debugging tools, see framer-debug-bundle.