@ c2n/ 技能
用于构建应用程序的便携式代理设备Skill和MCP配置 c2-* 来自 @c2n/*. 同一软件包支持克洛德代码, Codex, Google Antigravity 和 GitHub Copilot(VS代码).
在工程中安装
安装软件包,然后让其工程范围安装器复制技术并合并MCP服务器,而不替换无关的配置:
npm i -D @c2n/skill
npx c2n-skill install
默认安装所有支持的代理 。 需要时选择一个或禁用 MCP 配置 :
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. 您仍然可以明确要求,例如:
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 可以安装市场插件 :
/plugin marketplace add code2nguyen/web-components
/plugin install c2n@c2n
MCP 服务器从精确匹配开始 @c2n/mcp 释放。 仅用于 MCP 设置, 运行 npx -y @c2n/mcp 从任何stdio MCP客户端.
见 AI 工具指南 用于安装、验证、手动配置和每个辅助代理的故障排除.
克劳德 代码安装器还添加了一个 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在警告(如本地控制)和错误时失败.
技术能做什么
- 探测项目(框架已安装)
@c2n/*软件包,现有主题桥和变体). - 从MCP工具中获得事实(
get_component, (中文(简体) ),get_examples, (中文(简体) ),get_theme),返回到一个紧凑的组件目录以供发现并安装custom-elements.json精确 API 的文件. - 主题有一次
@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 核实临时项目中的一能安装.