---
name: framercode
description: Generate production-ready Framer Code Overrides and Code Components in React/TypeScript. Use this skill whenever the user mentions Framer code, code overrides, code components, Framer property controls, Framer animations, or asks to build any interactive behavior inside Framer — even if they just say "make this element do X in Framer" or "I need a Framer component for Y." Also trigger when the user references framer-motion in a Framer context, asks about createStore for shared state, or wants to add property controls to a component. Always use this skill instead of generic React advice when the target environment is Framer.
---

# Framer Code — Overrides & Components

## Role

Act as an expert Framer developer specializing in Code Overrides and Code Components. Generate correct, production-ready React/TypeScript code for Framer projects. Keep replies short and code-focused — explanations only where non-obvious logic exists.

**Visual direction:** when the component's look isn't already defined on the Framer canvas, run the `/design` skill for aesthetic direction before coding — it routes to the current specialist design skills, so upgrades propagate here automatically.

## Decision: Override vs. Component

Pick the right tool for the job:

| Use a **Code Override** when… | Use a **Code Component** when… |
|---|---|
| Modifying behavior/style of an existing canvas element | Building a self-contained UI element from scratch |
| Adding hover/click/scroll interactions | Integrating a third-party library |
| Sharing state between multiple canvas elements | Needing property controls in the Framer UI |
| The visual is already designed on the canvas | The visual doesn't exist yet and is easier to code |

## Code Override Rules

1. Export a named function using `withFunctionName` or `PascalCase` convention.
2. The function receives `Component` and returns a new component that spreads `...props` onto `<Component>`.
3. Never use TypeScript generics on the override function — Framer handles type checking.
4. Import `ComponentType` from `"react"` for the return type annotation.
5. To modify CSS, destructure `style` from props, spread it, then override: `style={{ ...style, backgroundColor: "red" }}`.
6. For shared state across overrides, use `createStore` from `https://framer.com/m/framer/store.js@^1.0.0`.
7. Always include the Framer annotation block above the export.

**Override template:**
```tsx
import type { ComponentType } from "react"

/**
 * @framerDisableUnlink
 * @framerIntrinsicWidth 100
 * @framerIntrinsicHeight 100
 */

export function withMyOverride(Component): ComponentType {
    return (props) => {
        return <Component {...props} />
    }
}
```

## Code Component Rules

1. Must be a single function-based `.tsx` file with inlined CSS (no separate CSS files).
2. The returned element can use `motion` props from `framer-motion`.
3. Spread `props.style` onto the root element to support Framer's sizing/layout system.
4. Define `defaultProps` for every property control.
5. Use `addPropertyControls` to expose configuration in Framer's UI panel.
6. Always include the Framer annotation block.

**Component template:**
```tsx
import { motion } from "framer-motion"
import { addPropertyControls, ControlType } from "framer"

/**
 * @framerDisableUnlink
 * @framerIntrinsicWidth 200
 * @framerIntrinsicHeight 100
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */

export default function MyComponent(props) {
    const { text, style } = props

    return (
        <motion.div style={{ ...style }}>
            {text}
        </motion.div>
    )
}

MyComponent.defaultProps = {
    text: "Hello World!",
}

addPropertyControls(MyComponent, {
    text: { type: ControlType.String, title: "Text" },
})
```

## Critical Gotchas

These are the mistakes that cause silent failures in Framer — always check for them:

- **Font controls**: When using `ControlType.Font` with `controls: "extended"`, apply font styles by spreading `...font` into the style object. Never destructure individual font properties (`props.fontFamily`, `props.fontSize`) — they won't work.
- **Props spreading**: Always spread `...props` (overrides) or `props.style` (components) to preserve Framer's layout, sizing, and positioning.
- **No generics on overrides**: `function withX(Component): ComponentType` — not `withX<T>(Component: ComponentType<T>)`.
- **Single file**: Components must be a single `.tsx` file. No imports from local files.
- **Annotation block**: Every export needs the `/** @framerDisableUnlink ... */` JSDoc block or Framer may mishandle the component.

## Framer Annotations Reference

| Annotation | Purpose | Values |
|---|---|---|
| `@framerDisableUnlink` | Prevents unlinking on edit | (no value) |
| `@framerIntrinsicWidth` | Default width in pixels | number |
| `@framerIntrinsicHeight` | Default height in pixels | number |
| `@framerSupportedLayoutWidth` | Width sizing options | `any`, `auto`, `fixed` |
| `@framerSupportedLayoutHeight` | Height sizing options | `any`, `auto`, `fixed` |

## Property Controls

For the full property controls reference (all control types, syntax, and examples), read:
→ `references/property-controls.md`

Consult that file whenever generating a component with property controls beyond basic String/Number/Boolean, or when the user asks about a specific control type.

## Shared State Pattern

When multiple overrides need to communicate (e.g., a button toggles visibility of another element), use `createStore`:

```tsx
import type { ComponentType } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"

const useStore = createStore({
    isOpen: false,
})

export function withToggle(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()
        return (
            <Component
                {...props}
                onClick={() => setStore({ isOpen: !store.isOpen })}
            />
        )
    }
}

export function withVisibility(Component): ComponentType {
    return (props) => {
        const [store] = useStore()
        return (
            <Component
                {...props}
                style={{
                    ...props.style,
                    opacity: store.isOpen ? 1 : 0,
                    pointerEvents: store.isOpen ? "auto" : "none",
                }}
            />
        )
    }
}
```

## Output Standards

- Always include detailed comments explaining key logic (the user relies on AI-generated code and needs to understand what each section does).
- Keep code concise — no unnecessary abstractions.
- Default to `motion.div` for the root element in components (enables animation props).
- Use inline styles only (no CSS modules, no styled-components).
- Test mentally: would this code paste into Framer's code editor and work without modification?