Agent skill · software engineering · jeremylongshore
framer-local-dev-loop
Configure Framer local development with hot reload and testing.
Why this skill is useful
Provides specific commands and workflows for setting up a Framer development environment with hot reload and testing that the AI wouldn't reliably generate on its own.
What it needs
Requires node installed locally. Requires framer account access. About 3k tokens when loaded. Last updated 2026-08-07. 2,604 stars on the source repository.
What this skill does
Framer Local Dev Loop Examples Use fictional pages, CMS records, and form submissions in local tests. Confirm the workflow runs without production credentials, redacts logs, and removes temporary artifacts after the staging validation is complete. Overview Set up a fast development workflow for Framer plugins and code components with Vite hot-reload, TypeScript, and testing. Prerequisites Completed framer-install-auth setup Node.js 18+ with npm Framer editor open Instructions Step 1: Plugin Dev Environment Project structure: Step 2: Connect to Framer Editor 1. Open Framer, go to your project 2. Click Plugins > Development in the toolbar 3. Select your local dev plugin 4. Changes in src/App.tsx hot-reload instantly Step 3: Testing Plugin Logic Step 4: Code Component Development Step 5: Server API Development Output Vite-powered plugin with hot-reload into Framer editor Testable data transformation functions Local component development workflow Server API development setup Error Handling Error Cause Solution ------- ------- ---------- Plugin not showing Dev server not running Run npm run dev Hot-reload not working Wrong Vite config Ensure framer-plugin Vite plugin is configured framer undefined in tests Editor-only API Mock framer or extract pure functions Component type errors Missing Framer types Install @types/framer or use framer.d.ts Resources create-framer-plugin Framer Developer Reference Vitest Next Steps See framer-sdk-patterns for production-ready patterns.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills jeremylongshore/framer-local-dev-loop