# @c2n/skill 中文文档

规范地址：https://npmcn.com/package/%40c2n/skill/

版本：1\.0\.23
npm 元数据更新时间：2026-11-07T18:02:04.658Z
中文译文更新时间：2026-11-08T22:37:22.634Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40c2n/skill
原文对照：https://npmcn.com/package/%40c2n/skill/?lang=original
项目主页：https://github.com/code2nguyen/web-components#readme
源码仓库：https://github.com/code2nguyen/web-components

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：120 kB，15 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2026-09-15T13:21:07.539Z
- 最新版本发布：2026-11-07T18:02:04.467Z
- 近 30 天下载量：2851（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：42（近 12 个月 42 个）

## 中文简介

便携式代理技能和用于构建具有c2n网络组件的应用程序的MCP工具

## 安装

```sh
npm install @c2n/skill
```

也可以使用：`pnpm add @c2n/skill`、`yarn add @c2n/skill`、`bun add @c2n/skill`

## README

# @ c2n/ 技能

用于构建应用程序的便携式代理设备Skill和MCP配置 `c2-*` 来自 `@c2n/*`. 同一软件包支持克洛德代码, Codex, Google Antigravity 和 GitHub Copilot(VS代码).

## 在工程中安装

安装软件包,然后让其工程范围安装器复制技术并合并MCP服务器,而不替换无关的配置:

```bash
npm i -D @c2n/skill
npx c2n-skill install
```

默认安装所有支持的代理 。 需要时选择一个或禁用 MCP 配置 :

```bash
npx c2n-skill install --agent claude
npx c2n-skill install --agent codex
npx c2n-skill install --agent antigravity
npx c2n-skill install --agent copilot
npx c2n-skill install --agent codex,antigravity --no-mcp
```

生成的项目文件 :

| 探员 | 技能 | MCP 配置 |
| --- | --- | --- |
| 克劳德 | `.claude/skills/c2n-components/` | `.mcp.json` |
| 代码 | `.agents/skills/c2n-components/` | `.codex/config.toml` |
| 反重力 | `.agents/skills/c2n-components/` | `.agents/mcp_config.json` |
| 副驾驶 | `.github/skills/c2n-components/` | `.vscode/mcp.json` |

安装器还将一个短 C2n 规则块合并到每个代理在每个会话中读取的指令文件中—— `CLAUDE.md` (克劳德), `AGENTS.md` (编码), `.github/copilot-instructions.md` (副驾驶). 那块是毒剂使用的原因 `c2-*` 元素而不是原生元素 `<button>`, (中文(简体) ), `<input>`, (中文(简体) ), `<select>`, (中文(简体) ), `<dialog>`... 当请求未提及 c2n 时: 技能和 MCP 服务器只有在代理商决定使用时才会有所帮助 。 只有文字介于 `c2n:start`编号 :`c2n:end` 标记被管理;重新运行安装器取而代之,并留下文件的其余部分.

MCP 配置启动服务器 `npx -y @c2n/mcp@<version>`。在代理服务器的后方,当代理服务器启动时,下载会无声地失败;安装 `@c2n/mcp` 作为 dev 依赖,安装者将每个配置点到 `node_modules/@c2n/mcp` 相反(`--mcp auto`,默认,或强迫它使用 `--mcp local`) (中文(简体) ).

密码和反重力故意共用便携式 `.agents/skills/` copy. 重新运行安装器更新了c2n自有文件并保存了其他MCP服务器条目.

安装后重新启动选中的代理, 以便发现两个添加 。 该技能给出了代理c2n特定的工作流程和主题指导;MCP服务器提供当前组件API,示例,预设和生成代码. 它们独立工作,但安装两者都带来最佳效果.

## 与代理使用

随着规则块被安装,普通请求("构建设置表")应该已经使用c2n. 您仍然可以明确要求,例如:

```text
Use the c2n skill and MCP server to build this settings form. Check each component API before writing markup, load @c2n/theme once, and create application variants for repeated styles.
```

您也可以引用已安装的 `c2n-components` 客户中支持明确技能引用的按名称排列的技能。 代理商应首先查询MCP,并在没有MCP时检查已安装的包单.

## 插件安装

包根包含可移植代理插件 `plugin.json`, (中文(简体) ), `mcp.json` 财务报告和审定财务报表 `skills/` 由 Codex 兼容插件主机使用的布局 。 Claude 兼容性仍在下方 `.claude-plugin/plugin.json` 财务报告和审定财务报表 `.mcp.json`。 。 。 .

从此寄存器, Claude Code 可以安装市场插件 :

```text
/plugin marketplace add code2nguyen/web-components
/plugin install c2n@c2n
```

MCP 服务器从精确匹配开始 `@c2n/mcp` 释放。 仅用于 MCP 设置, 运行 `npx -y @c2n/mcp` 从任何stdio MCP客户端.

见 [AI 工具指南](https://code2nguyen.github.io/web-components/guides/ai-tools) 用于安装、验证、手动配置和每个辅助代理的故障排除.

克劳德 代码安装器还添加了一个 `PostToolUse` 钩入 `.claude/settings.json`: 在每个之后 `Write`, (中文(简体) ), `Edit` 或者说 `MultiEdit` 标记、脚本或样式表文件(HTML、JSX/TSX、Vue、Svelte、Astro、MDX、JS/TS、CSS/SCSS/Less), `c2n-mcp validate --hook` 检查文件,然后将结果(替换、未知标记、属性、插槽或变量的内置控制)交回代理商,代理商将结果按同一方向修正。 其它文件不检查, 设置文件中的其他钩被保存 。 跳过它 `--no-hook`; 用 CI 进行同样的检查 `npx -y @c2n/mcp validate src --strict`在警告(如本地控制)和错误时失败.

## 技术能做什么

1.  探测项目(框架已安装) `@c2n/*` 软件包,现有主题桥和变体).
2.  从MCP工具中获得事实(`get_component`, (中文(简体) ), `get_examples`, (中文(简体) ), `get_theme`),返回到一个紧凑的组件目录以供发现并安装 `custom-elements.json` 精确 API 的文件.
3.  主题有一次 `@c2n/theme`,直接使用标记,并将每个重复的模式变为CSS级变体,包装组件,Lit子类或由组件构成.

`references/` 拥有工作流程、主题、变体和框架指南. `component-catalog.md` 是一个生成的发现索引,而不是 API 参考; 安装的组件表提供了版本正确的 API 事实,当 MCP 不存在时.

## 发展

`npm run build:tools` 在寄存器根重生紧凑的目录,并同步显示和同步每个插件 `@c2n/mcp` 针从 `package.json`。 。 。 . `npm test -w packages/tools/skill` 核实临时项目中的一能安装.

## 常见问题

### @c2n/skill 是什么？

便携式代理技能和用于构建具有c2n网络组件的应用程序的MCP工具

### 如何安装 @c2n/skill？

在项目目录运行 npm install @c2n/skill，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 c2n-skill，可以用 npx c2n-skill 直接运行。

### @c2n/skill 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/c2n\_\_skill 是否存在。

### @c2n/skill 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @c2n/skill 可以商用吗？

@c2n/skill 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @c2n/skill 的下载量有多少？

根据 npm 官方下载统计，@c2n/skill 在 2026/10/09 – 2026/11/07 这 30 天内被下载 2,851 次，日均约 95 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @c2n/skill 还在维护吗？

最新版本 1\.0\.23 发布于 2026/11/08（1 天前）；至今共发布 42 个版本，其中过去 12 个月发布了 42 个；首次发布于 2026/09/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。