Framer Code Components Overrides
If you're building custom components or overrides in Framer, this is the reference you want open. It covers the sharp edges that actually bite: hydration mismatches from browser APIs in render, color tokens that crash when you forget to unwrap them, scroll animations that silently break when you use useState instead of useRef. The pitfalls table up front is worth the price of admission alone. Most of these issues have no error message, they just fail quietly or need two clicks instead of one. The patterns are specific to Framer's React flavor, so generic React knowledge won't save you from things like variable text living in props.text instead of children, or font styles requiring the full spread instead of individual properties.
- skills.sh installs
- 404
- GitHub stars
- 136
- last updated
- Aug 21, 2026
Install
$ npx -y skills add fredm00n/framerlabs --skill framer-code-components-overrides --agent claude-codeInstalls into .claude/skills of the current project.
Files
Framer Code Development
Section tags: [C] applies to code components, [O] to code overrides, [C/O] to both.
Updates and contributions
This skill is maintained in the public repo fredm00n/framerlabs, and the community keeps it current. Installed copies go stale, so the steps below run once per session.
The project's line
The project's agent instructions (CLAUDE.md, AGENTS.md or equivalent) can hold one line for this skill:
framer-code-components-overrides: auto-update, contribute
auto-update lets the agent replace the installed copy when a newer version exists. contribute lets it offer to send what a session learns back to the repo as a pull request. Either word works alone. With no line, the agent never edits the installed files and never opens or suggests a pull request. It only says when a newer version is out.
Check for a newer version first
Before relying on anything below:
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/fredm00n/framerlabs
- Categories
- Frontend Development, Documentation, Debugging, Design & UI/UX
- First seen
- Jun 3, 2026
Recommended
More Frontend Development
tdesign-miniprogramjoneqian/claude-skills-suiteTDesign Mini Program UI component library by Tencent. Use for building WeChat mini apps with TDesign components, design system, and best practices.403skills.sh installs
setuptartinerlabs/skillsUse when setting up a project, adding linting, formatting, git hooks, or type checking. Detects the language and installs that ecosystem's lint/format/hooks too400skills.sh installs
wechat-studiochouheiwa/wechat-studio微信公众号内容创作全流程工具，支持 Markdown 主题排版、Dan Koe 风格写作、AI 去痕、图片上传、图文草稿和小绿书发布。Use this skill when the user asks about WeChat Official Account publishing, converting Markdo397skills.sh installs
youtube-researchbradautomates/head-of-contentResearch high-performing YouTube videos in a niche using TubeLab's outlier detection API. Identifies outlier videos, analyzes top 3 relevant videos with AI, and394skills.sh installs
design-system-starterdavila7/claude-code-templatesCreate and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable393skills.sh installs
systematic-debuggingbobmatnyc/claude-mpm-skillsStep-by-step debugging workflow: reproduce the bug, isolate the failing component, trace to root cause, apply a targeted fix, and verify the fix resolves the is391skills.sh installs