From framer-pack
Guides Framer SDK upgrades: checks versions with npm, reviews changelog for breaking changes, executes updates via git/npm, applies TypeScript migration patterns for plugins and code components.
How this skill is triggered — by the user, by Claude, or both
Slash command
/framer-pack:framer-upgrade-migrationThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Guide for upgrading Framer plugin SDK, Server API, and migrating between Framer platform versions. Check the Framer Developer Changelog for breaking changes before upgrading.
Guide for upgrading Framer plugin SDK, Server API, and migrating between Framer platform versions. Check the Framer Developer Changelog for breaking changes before upgrading.
npm list framer-plugin framer-api framer
npm view framer-plugin version
npm view framer-api version
Visit https://www.framer.com/developers/changelog for breaking changes.
Key migrations:
git checkout -b upgrade/framer-plugin
npm install framer-plugin@latest
npm run build # Check for type errors
npm test # Run tests
// Plugin API 2.x → 3.x: Collection APIs changed
// BEFORE: framer.createCollection(...)
// AFTER: framer.createManagedCollection(...)
// Code components: ControlType changes
// BEFORE: ControlType.FusedNumber
// AFTER: ControlType.Number (with min/max/step)
// Overrides: import path
// BEFORE: import { Override } from 'framer'
// AFTER: import { Override } from 'framer' (unchanged, but check type shape)
# Pin to previous version
npm install framer-plugin@3.x.x --save-exact
For CI integration, see framer-ci-integration.
npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin framer-packApplies production-ready Framer SDK patterns for TypeScript/React plugins, code components, state management, and Python CMS/Server API integrations.
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.