What problem does it solve? Writing code components for Framer requires following strict platform rules—single-file default exports, restricted imports, SSR guards, and layout annotations—that are easy to violate and cause canvas errors. This Skill provides the constraints, property control reference, and TypeScript interfaces needed to author components that render correctly in Framer. ## Core Features & Use Cases - Platform Constraint Enforcement: Covers single-file default exports, allowed imports (react, framer, framer-motion), SSR-safe window/document access, and required @framerSupportedLayoutWidth/Height annotations. - Property Controls Reference: Documents every ControlType (Boolean, Number, String, Enum, Color, ResponsiveImage, Array, Slot, Font, Transition, and more) with examples and full TypeScript interfaces. - Authoring Best Practices: Guidance on animation performance with useIsStaticRenderer, accessibility, image defaults, and common errors like WebGL cross-origin issues. - Use Case: When building a configurable hero section component for a Framer site, use this Skill to add Color, Font, and ResponsiveImage property controls with correct defaults so the component renders properly on the canvas and in static exports. ## Quick Start Load the framer skill first and read the Components row of the project task map, then use this Skill to write a Framer code component with typed props and property controls.
