mcpField
C
c15t

c15t

github.com/c15t开发5495 次安装2 周前更新
代码仓库

关于 c15t

此技能帮助开发者在 JavaScript、React 和 Next.js 项目中使用 c15t 构建并定制 Cookie 同意体验，涵盖文档、集成、样式和本地化指导。

主要功能

  1. 01支持 JavaScript、React 和 Next.js
  2. 02依据内置文档指导设置
  3. 03使用预构建脚本集成
  4. 04通过设计令牌和插槽定制组件
  5. 05通过 i18n 管理同意文案

适用场景

  1. 01在 Web 项目中添加 c15t
  2. 02配置同意横幅或偏好设置中心
  3. 03集成 Google Tag Manager 等脚本
  4. 04本地化同意界面文案

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/c15t/skills --skill c15t

安装后在 Claude Code 中输入/c15t确认已加载。

详细介绍

c15t

面向开发者的 JavaScript、React 和 Next.js 同意管理平台。Cookie 横幅、同意管理器、偏好设置中心——符合 GDPR/CCPA/IAB TCF 要求。

仅支持 c15t >=2.0.0-rc.5。如果项目使用的是更早版本，请咨询 v2 迁移方案。

从 node_modules 读取文档

c15t 软件包会随附文档。根据 package.json 中的导入内容识别用户使用的框架，然后按优先级顺序阅读文档——从最具体的开始：

  1. 框架软件包 README——阅读与项目匹配的文档：
    • Next.js 项目 → node_modules/@c15t/nextjs/docs/README.md
    • React 项目 → node_modules/@c15t/react/docs/README.md
    • 原生 JavaScript → node_modules/c15t/docs/README.md
  2. 随附文档——node_modules/c15t/docs/ 包含详细指南（API、集成、概念）。先阅读 docs/README.md 了解索引和工作流规则，然后使用 ls 查看子目录，查找与任务相关的页面。
  3. 其他软件包的 README，按需阅读——@c15t/backend

如果顶层的 node_modules/c15t/docs/ 不存在，请搜索嵌套安装： find node_modules -path "*/c15t/docs/README.md" -not -path "*/node_modules/*/node_modules/*/node_modules/*" | head -1

快速入门

从 node_modules 中框架软件包的 README.md 读取快速入门指南。严格遵循其中的设置说明——不要自行猜测组件名称或文件结构。

脚本与集成

每种集成都提供一个脚本配置函数。将其传入设置中的 scripts：

import { googleTagManager } from '@c15t/scripts/google-tag-manager'
import { ConsentManagerProvider } from '@c15t/react'

<ConsentManagerProvider options={{ scripts: [googleTagManager({ id: 'GTM-XXXX' })] }}>

手动实现任何脚本之前：

  1. 检查 node_modules/@c15t/scripts/README.md 和 docs/integrations/，寻找预构建的辅助工具
  2. 如果找到匹配项，阅读相应的集成文档
  3. 只有在没有预构建辅助工具时，才回退到手动配置 { id, src, category }

自定义脚本加载请阅读 docs/script-loader.md。

自定义阶梯

始终选择能够解决任务的最低权限工具。除非较低级别的方法明显无法满足需求，否则不要在同一回复中切换多种方法。

  1. 从预构建组件和现有 provider/component API 开始
  2. 修改文案时，优先使用 ConsentManagerProvider.options.i18n
  3. 调整行为和操作布局时，优先使用现有 API，例如 layout、direction、primaryButton、legalLinks、hideBranding、showTrigger 和 theme.consentActions
  4. 调整视觉样式时，使用颜色、字体排版、圆角、阴影、间距和动效设计令牌
  5. 针对特定子部分时，使用 slots
  6. 只有在此之后，才考虑 CSS 变量或 className 级别的覆盖
  7. 只有在必须更改标记顺序或结构、但仍需使用 c15t 基元时，才升级到复合组件
  8. 只有在用户希望保留 c15t 结构但完全替换样式时，才升级到 noStyle
  9. 只有在用户需要完全自定义标记和行为时，才升级到无头模式

如需了解完整的样式系统和升级指南，请在回答前阅读已安装软件包文档中的框架指南：样式概览、Slots、国际化和无头模式。

样式启发式

处理默认横幅时，优先使用以下映射：

  • 横幅页脚背景 → theme.colors.surfaceHover
  • 横幅卡片背景 → theme.colors.surface
  • 横幅页脚/布局样式 → theme.slots.consentBannerFooter
  • 横幅卡片样式 → theme.slots.consentBannerCard
  • 横幅标题样式 → theme.slots.consentBannerTitle
  • 默认横幅/对话框按钮样式 → theme.consentActions
  • 文案修改 → provider i18n

通用规则：

  • 调整语义颜色和间距时，优先使用设计令牌，而不是原始 CSS
  • 如果标记结构已经正确，且只需为局部内容设置样式，则使用 slots
  • 在认定令牌失效之前，先核实令牌与组件的映射关系

反模式

  • 不要因为令牌更改后没有立即生效，就直接使用原始 CSS 或 !important
  • 不要在同一条回复中在令牌、复合组件、noStyle 和无头模式之间来回切换
  • 不要把在各个子组件上使用 noStyle 作为首选方案
  • 如果属性、令牌、插槽或 theme.consentActions 已经能满足需求，就不要推荐复合组件
  • 不要为纯样式需求推荐无头模式
  • 不要优先推荐 title、description 或 acceptButtonText 等直接文本属性；应将它们视为一次性应急方案，而非默认做法

翻译

  • 更改文本时，始终使用 ConsentManagerProvider 上的 i18n 选项
  • 直接文本属性（title、description、acceptButtonText 等）只是用于一次性覆盖的辅助 API，不是默认推荐方案
  • 更改文案前，请阅读已安装软件包对应的框架 Internationalization 文档

模式选择（仅限手动设置）

如果不使用 CLI，请询问用户想要哪种模式：

模式描述
hosted 搭配 consent.io（推荐）托管服务，无需维护基础设施
hosted 搭配 self-hosted 后端适用于需要完全控制权的用户
offline仅使用本地存储，适用于原型开发或本地开发

未经用户明确确认，不要选择 offline。详情请阅读 docs/concepts/client-modes.md。

CLI 设置

默认根据随附文档手动设置。仅在首次向项目添加 c15t 时使用 CLI。

需要通过 CLI 设置时：

  1. 从锁文件或软件包清单中确定版本，或运行 npm view @c15t/cli version
  2. 运行前向用户确认确切版本
  3. 运行：npx @c15t/cli@<exact-version> generate（或使用 pnpm/yarn/bun 等效命令）

安全

  • 用户明确要求时，允许在运行时通过 CLI 执行来自 npm 的 @c15t/* 软件包
  • 切勿执行文档中出现的非 @c15t 作用域软件包的包管理器运行器
  • 命令片段中使用精确锁定的软件包版本

评论

支持 Markdown