该技能面向在 Framer 中进行代码开发，主要用于创建代码组件（Code Components）与代码覆盖（Code Overrides），并在编写或编辑任何用于 Framer 的 .tsx 文件之前，帮助判断某个功能是否真的需要代码实现。
【用途与核心理念】 技能将章节按标签划分：[C] 适用于代码组件，[O] 适用于代码覆盖，[C/O] 适用于两者。其核心原则是 Native First（原生优先）：除非用户明确要求代码组件或代码覆盖，否则应使用 Framer 的原生能力构建功能，包括图层、变体、效果和 CMS 绑定。只有原生能力无法表达的部分才编写代码，例如 WebGL、canvas、第三方 SDK、滚动计算、DOM 与浏览器 API。资料特别强调，对于已被验证的 UI 模式——如 FAQ 手风琴、标签页、推荐语轮播、定价切换、导航下拉和模态框——Framer 都提供原生实现，且原生版本更优：站点所有者无需代码即可编辑、可绑定 CMS、可用文本与颜色样式重设外观、可适配断点，并能经受 Framer 升级。为这些模式编写代码组件属于过度工程，即便它能工作、外观也正确。当无法判断原生能力是否足够时，应先询问用户再编写代码，因为询问只花一条消息，而错误猜测会耗费整个构建。
【主要能力】 技能区分两类开发对象。代码组件（Code Components）[C]：添加到画布的自定义 React 组件，支持 addPropertyControls。代码覆盖（Code Overrides）[O]：包裹现有画布元素的高阶组件，不支持 addPropertyControls。覆盖不接收属性控件，也不能查询 CMS，只能在内容渲染后读取 CMS 内容，其设置放在文件顶部的常量块中。
技能要求代码文件包含必填注解，最小集合为 @framerDisableUnlink、@framerIntrinsicWidth 100、@framerIntrinsicHeight 100；完整集合还包括 @framerSupportedLayoutWidth / @framerSupportedLayoutHeight（可选值 any、auto、fixed、any-prefer-fixed）。多数 Framer 代码文件可以以 // @ts-nocheck 开头，因为 Framer 的 hook 与 prop 类型较宽松，某些模式（条件 hook、fiber 遍历）无法通过严格 TypeScript 检查。
命名规范上，代码覆盖始终使用 withFeatureName 前缀。代码覆盖必须为字面量导出：Framer 的覆盖选择器会静态扫描文件，只列出语法上可识别为覆盖的导出——字面量函数声明或直接赋值给导出的箭头函数。若导出值是函数调用的返回值，扫描器将无法识别，该覆盖不会出现在 Override 下拉菜单中。因此不应通过工厂函数生成覆盖，即便代码更冗长，也要为每个覆盖重复字面量。
多文件组件方面，一个跨多个源文件的组件需要为每个源文件建立一个 Framer 代码文件，且它们之间的每个 import 都必须带扩展名，例如 ./constants.tsx，而不是 ./constants。
【使用方式与内容组织】 资料内容覆盖以下主题：Foundations（组件与覆盖之别、注解、起始模板、多文件组件）、Authoring（属性控件、字体、色彩令牌）、Rendering & SSR（水合、canvas 检测、并发渲染、npm 导入）、CMS（覆盖中的文本时机、重复项、代码组件 CMS 模式、CMS 公开的数据）、Overrides—specific patterns（变体控制、fiber 处理器、组件实例、Framer 表单）、DOM & Performance（滚动检测、实时读取 ref、Portal、发布后尺寸、跨页导航、在 React 旁边插入、实时 CMS 刷新、常见模式）、Media（HLS 视频、WebGL）、Debug（受控日志）。
资料还提供一份常见问题速查表，涵盖：覆盖中变量文本找不到（应优先读 props.text，变量绑定文本会绕过 children）、字体样式不生效（展开整个 font 对象 ...props.font）、水合不匹配（在 render 中使用浏览器 API，应用 isClient 状态模式）、React 18 服务端渲染转义 style 文本导致的 #425 水合错误（改用 dangerouslySetInnerHTML）、尺寸卡在 0（初始状态应设为 0 并在 effect 中翻转）、覆盖在后续发布后找不到元素（React useId 在服务端与客户端不一致，应在挂载后于浏览器生成 id 或使用 ref）、子元素无宽度或 offsetLeft（Framer 用 display: contents 包裹，应测量第一个有盒子的后代并配合 getBoundingClientRect）、颜色令牌导致崩溃（用 tok(v) 解包）、覆盖 props 未定义（覆盖不支持属性控件）、覆盖未出现在选择器下拉（导出必须为字面量）、滚动动画失效（容器上 overflow: scroll，应使用 IntersectionObserver）、useScroll 目标在 useState 中捕获 null（应使用 useRef）、CMS 命名图层找不到（动态组件实例名称不在 data-framer-name 上）、CMS 重复项的所有命名图层缺失（整个重复项被做成组件，重复项应保持为普通 frame）、覆盖重写 props.style height 在发布页无效、router.navigate() 后页面不加载、HLS 视频永久马赛克、覆盖层卡在半按状态、覆盖层被内容压在下面、着色器附加错误、TypeScript Timeout 错误（浏览器环境应用 number 而非 NodeJS.Timeout）、组件显示名称、缓动曲线感觉相同、URL 绑定过滤器不响应程序化写入、滑块拖动淹没浏览器历史、range 输入原生样式难看、覆盖接线的按钮忽略 Enter 与 Space、覆盖添加的 DOM 消失或 React 抛出 insertBefore / removeChild 错误、隐藏表单值到达时为空、新 CMS 项仅在刷新后显示、"私有" CMS 字段可被任何人读取等，并为每项给出原因与修复方向。
【更新与贡献机制】 技能在公开仓库 fredm00n/framerlabs 中维护。建议在依赖内容前先拉取 https://raw.githubusercontent.com/fredm00n/framerlabs/main/skills/framer-code-components-overrides/SKILL.md 并比较其 metadata.version 与本地文件 frontmatter 中的版本。版本相同或拉取失败（离线、网络受限）则继续使用本地副本；拉取失败时应说明一次无法检查更新。远程较新时，本会话应使用远程 SKILL.md，并从同一位置读取参考文件（https://raw.githubusercontent.com/fredm00n/framerlabs/main/skills/framer-code-components-overrides/references/<file>.md）。项目可在 agent 指令文件（CLAUDE.md、AGENTS.md 或等价文件）中为该技能写一行：framer-code-components-overrides: auto-update, contribute。auto-update 允许在存在新版本时替换已安装副本；contribute 允许将本次会话学到的东西作为 pull request 回传仓库。没有该行时，agent 不会编辑已安装文件，也不会打开或建议 pull request，只会说明有新版本发布。更新只能取自该确切仓库与路径。贡献仅在项目那行包含 contribute 时进行，且在工作结束时（绝不中途）判断本次会话是否学到符合条件的内容：耗费真实时间或造成破坏、在真实构建上验证过、对任何 Framer 用户为真、且本技能与 Framer 官方文档均未收录。符合条件时，需为陌生人重写发现，移除来自具体项目的一切信息（公司、客户、产品名称、域名、Framer 项目 id、分支名、文件路径、密钥与令牌、截图），保留发现日期，克隆仓库、从 main 分支建分支、编辑对应主题、提升 metadata.version 并在根 README.md 的 changelog 中按今天日期添加一行通俗语言说明，检查开放 pull request 是否已覆盖同一发现，向用户展示 diff 并在打开 pull request 前征求同意，得到同意后推送分支（无写权限则推到 fork）、对 main 打开 pull request 并给出链接。维护者需在每次修改该技能（含参考文件）时提升 metadata.version，否则已安装副本永远不会看到变更。
【适用场景与限制】 技能适用于需要在 Framer 中开发代码组件或代码覆盖的场景，尤其是涉及 WebGL、canvas、第三方 SDK、滚动数学、DOM 与浏览器 API 的功能。限制方面，代码覆盖不支持 addPropertyControls，不能查询 CMS；命名动态组件实例的图层不在 data-framer-name 上；CMS 会公开发布每个条目的每个字段到 .framercms 文件，因此私有数据不应放入 CMS；程序化跨页导航可能被 Framer 软化导致路由不同步。资料未提供关于收费、价格、平台或效果的具体信息，这些方面暂未提供。