本项目是 DatoCMS 前端集成技能，面向已有 Web 项目，用于修补、扩展或解释 DatoCMS 的前端集成代码。它适用于 Next.js App Router、Nuxt、SvelteKit、Astro，以及 React、Vue、Svelte 等框架的项目。
【主要能力】 技能覆盖多种集成类别，可按需选择或组合使用：草稿模式设置（草稿 Cookie、启用/禁用端点、草稿 CDA Token 切换）、Web Previews 设置（preview-links 端点、路由映射、Visual 标签支持）、响应式图片（Dato 图片渲染辅助或组件选择）、Structured Text 渲染（查询结构与渲染器接线）、视频播放（Dato / Mux 视频集成）、SEO 与元标签（_seoMetaTags、favicon 标签、canonical 接线）、实时更新（实时预览订阅或 QueryListener 接线）、可视化编辑 / Content Link（点击编辑覆盖层与 stega 感知渲染）、站点搜索（React / Vue 组件或底层 Search API 接线）、robots 与站点地图（robots.txt、sitemap 路由、爬虫安全规则）、缓存标签（细粒度失效或标签转发模式）。
【工作流程】 技能按五步执行。第一步为静默上下文检测，检查 package.json 判断框架类型、UI 栈、现有 Dato 辅助工具、集成标记与文件结构，以及 gql.tada 项目约定标记；若框架不明确则询问用户，若集成已存在默认就地修补。第二步为分类与路由，将任务归入上述类别。第三步加载参考文档，分为组件概念参考、设置基础参考、按框架的参考（React / Vue / Svelte / Astro）以及 gql.tada 约定参考等。第四步生成或修补代码，遵循工作流规则、安全与环境规则、查询包装规则、框架规则、TypeScript 规则、依赖规则、搜索与爬虫安全规则。第五步验证，加载验证清单并检查与所做工作相关的部分。
【使用方式】 默认不提问，仅在仓库无法回答时（如缺少模型到路由的映射、缺少缓存提供方或清除适配器选择、存在多个竞争渲染器）才询问。对于缓存标签工作需阅读所选框架参考的 Cache Tags 部分，手动 CDN 收集/清除时还需加载 cache-tag-adapters.md。Structured Text 组件与渲染器回调在本技能内处理，包括传给 renderBlock 的已解析记录；仅当需要文档检查、转换、转换或验证时才加载文档专家技能。当仍有占位符时报告为 scaffolded，只有当实现不再依赖未解析的项目特定值时报告为 production-ready。
【安全与依赖规则】 所有密钥来自环境变量；新的运行时环境变量需在 .env.example 和仓库本地被 git 忽略的环境文件中添加占位条目，复用已有名称，绝不提交真实值。CLI/CMA Token 除外（CLI 通过登录 + 链接认证）。需验证草稿模式或 preview-links 流程所需的专用预览/Webhook 密钥环境变量。使用 isRelativeUrl() 进行重定向验证。草稿模式禁用端点不要求认证。依赖方面，仅当任务确实需要时才安装缺失包；生成代码导入的包应作为直接依赖；@types/* 与 datocms CLI 作为 devDependencies。React 视频使用 @mux/mux-player-react，Vue 或 Svelte 视频使用 @mux/mux-player，React / Vue 组件式站点搜索使用 @datocms/cma-client-browser。
【适用场景与限制】 适用于在既有项目中做针对性的前端集成修补、扩展或解释，支持单一或混合功能实现、局部修补、框架对比与配套参考加载。限制方面：若框架不明确需询问用户；对于引导式多部分设置、新站点或用户不确定所需结果时，应转向 datocms-setup；编写或优化 CDA 的 GraphQL 查询应转向 datocms-cda；gql.tada 片段编写规范转向 datocms-cda 的 fragment-patterns.md；通过 REST 进行程序化内容管理、模式变更、迁移脚本、访问控制或 Webhook 创建应转向 datocms-cma；构建 DatoCMS 插件应转向 datocms-plugin。缺失的同级参考需从 datocms/agent-skills 安装该技能或更新完整包。若客户特定值（路由映射、提供方详情、索引 id）仍未解析，应留下清晰占位符并明确指出缺失输入，而不是将工作呈现为完全就绪。