skills.rest
moughamir
moughamirCOMMUNITY
Explore all skills by this author →
Website𝕏@omnizyaGitHub

framer-code-components-overrides

Create Framer Code Components and Code Overrides with required annotations.

Updated Mar 26, 2026
Search Tags:#react components#framer#hydration safety#webgl shaders#code override#property controls#animation patterns
One-click install
npx skills add https://github.com/moughamir/justwaitit-review --skill framer-code-components-overrides-moughamir
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: framer-code-components-overrides
Source: https://github.com/moughamir/justwaitit-review/tree/main/.agents/skills/framer-code-components-overrides
Command: npx skills add https://github.com/moughamir/justwaitit-review --skill framer-code-components-overrides-moughamir

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the confusion and breakage that happen when writing Framer Code Components or Code Overrides, especially around SSR hydration, font rendering, and editor-vs-preview behavior.

Core Features & Use Cases

  • Code Component vs Code Override guidance: Implement custom React components for the canvas (with property controls) or wrap existing elements via overrides (without property controls).
  • Framer-specific required annotations: Add the correct @framer* metadata and layout hints so the canvas understands sizing and unlink behavior.
  • Operational safety patterns: Prevent hydration mismatches with client-only gating, avoid incorrect font styling by spreading the full props.font, and keep state updates performant using startTransition.
  • Advanced troubleshooting and behavior constraints: Handle portals for overlay stacking, intersection/scroll detection constraints, and WebGL/shader pitfalls; use property control patterns and common anti-pattern fixes.
  • Use cases: Debug hydration errors in published pages, create editor-friendly debug overlays, implement shader/WebGL effects in Framer, and build interactive animations with reliable property controls.

Quick Start

Ask the AI to generate a Framer Code Component that uses property controls, includes the required @framer* annotations, spreads props.font correctly, and renders client-only logic safely to avoid hydration issues.

Frequently Asked Questions about framer-code-components-overrides

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does my Framer code component throw a hydration error in published preview?▼

Framer hydration errors occur when server-rendered output mismatches the client. Prevent this by using client-only gating with a two-phase rendering pattern, ensuring React components behave identically in editor and published preview.

How do I add property controls to a Framer code component?▼

To add property controls in Framer, define them within your React component file using the Framer property controls API. Ensure you also include mandatory `@framerDisableUnlink` and intrinsic dimension annotations for correct canvas behavior.

Can I use WebGL shaders in Framer code components?▼

Yes, you can integrate WebGL shaders in Framer code components. The implementation requires careful handling of client-safe rendering and hydration constraints to ensure the shader effects work reliably across both the canvas editor and published preview.

What is the difference between a Framer code component and a code override?▼

Framer code components are custom React components with property controls built for the canvas, while code overrides wrap existing elements using higher-order functions without property controls to modify their behavior dynamically.

How do I stop font rendering issues in Framer custom components?▼

Font rendering issues in Framer custom components happen when font properties are partially applied. Fix this by spreading the full `props.font` object in your component styles to ensure all font attributes are correctly passed.

Do I need startTransition for state updates in Framer components?▼

Yes, wrapping state updates in `startTransition` is required to keep Framer components performant. This pattern prevents blocking the main thread during interactive animations and maintains smooth canvas editor behavior.

Related Skills

Explore More Design & Creative Skills→
liminal-ailiminal-ai
1

convex-quickstart

Scaffold Convex projects and wire ConvexProvider with environment variables.

Official
Intermediate
anis-marrouchianis-marrouchi

motion-animation

Integrate Framer Motion with Remotion for frame-synced animations.

Community
Intermediate
xingBaGanxingBaGan

framer-motion

Implement Disney's 12 animation principles in React with Framer Motion.

Community
Advanced
gajjalaashok75-UIgajjalaashok75-UI
2

react-flow-node-ts

Create React Flow node components with TypeScript interfaces and store integration.

Community
Intermediate