A collection of resources for working with Framer.
Claude Code skills that teach Claude how to build Framer components. Install these to get better AI assistance when working on Framer projects.
| Skill | Description |
|---|---|
| framer-code-components-overrides | Code Components, Code Overrides, property controls, WebGL shaders, and common patterns |
Workarounds and tricks for Framer.
| Hack | Description |
|---|---|
| Hide 'Made in Framer' badge | Hide the Framer badge on published sites |
| Safari SVG animation fix | Fix choppy SVG animations on Safari |
| Magnetic hover effect | Elements that follow the cursor on hover |
| Force NPM package version | Bypass Framer's package cache with esm.sh |
| Shared state between overrides | Make multiple elements react to each other |
| Show element only once | Show popups/banners only on first visit |
| Auto-sized text fix | Fix text collapse in auto-sized components |
2026-02-10 — Added React Portal pattern for z-index stacking context, loading states with scroll lock, and easing curves for lerp animations with initial distance tracking.
2026-02-02 — Added advanced gotchas: startTransition requirement, ResponsiveImage/File defaultValue workaround, variant-to-font-weight mapping, and more property control tips.
2026-01-30 — First skill + hacks
MIT