用途：为在 Framer（无代码建站工具）中构建和改进 React 代码组件提供最佳实践，覆盖属性控件、动画与无障碍。
主要能力与规则： 组件结构需从 "framer" 导入 addPropertyControls、ControlType，从 "framer-motion" 导入 motion（不可从 "framer" 导入），并提供带类型的 props 接口。
平台约束（违反会报错）：单文件、默认导出，使用具名 function 语法（非箭头函数），无具名导出；仅可导入 react、react-dom、framer、framer-motion；根元素用 position: relative，禁用 fixed；访问 window/document 需做 SSR 守卫（if (typeof window !== "undefined")）；组件函数正上方用 /** */ 块注释包含 @framerSupportedLayoutWidth/Height 注解；提供类型化 props 接口，避免 NodeJS 类型如 Timeout，改用 number。
布局注解：无固有尺寸用 fixed/fixed，文本或自动尺寸用 auto/auto，弹性用 any-prefer-fixed。可通过 style.width/height 是否为 "100%" 判断自动或固定尺寸。
属性控件：颜色用 ControlType.Color，共享颜色的元素复用同一 prop；文本样式用 ControlType.Font 并设 controls: "extended"、defaultFontType: "sans-serif"；图片用 ControlType.ResponsiveImage，默认值在组件体内通过解构设置（控件不支持 defaultValue）；每个 prop 都要有 defaultValue，Array 控件至少含一项；不支持 ComponentName.defaultProps；用 hidden 做条件可见；优先滑块而非步进器；控件保持精简。
动画性能：用 useIsStaticRenderer 与 useInView，静态渲染时返回含视觉效果的静态预览，离开视口暂停动画；极复杂动画可考虑 WebGL；用 startTransition() 包裹状态更新避免阻塞。文本自动尺寸组件加 width: max-content 或 minWidth: max-content 防止塌陷。
常见错误：WebGL 跨域图片的 SecurityError；Y 轴倒置。
无障碍：交互元素加 aria 角色，使用语义化 HTML，装饰图片 alt=""，颜色对比度 4.5:1。
限制：资料未提供收费、价格、平台支持范围等细节。