@c2n/skill

Portable Agent Skill and MCP configuration for building applications with the c2-* elements from @c2n/*. The same package supports Claude Code, Codex, Google Antigravity and GitHub Copilot (VS Code).

Install in a project

Install the package, then let its project-scoped installer copy the skill and merge the MCP server without replacing unrelated configuration:

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

The default installs all supported agents. Select one or disable MCP configuration when needed:

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

Generated project files:

The installer also merges a short c2n rules block into the instructions file each agent reads in every session — CLAUDE.md (Claude), AGENTS.md (Codex), .github/copilot-instructions.md (Copilot). That block is what makes the agent use c2-* elements instead of native <button>, <input>, <select>, <dialog>… when a request does not mention c2n: the skill and the MCP server only help once the agent decides to use them. Only the text between the c2n:start/c2n:end markers is managed; re-running the installer replaces it and leaves the rest of the file alone.

The MCP configurations start the server with npx -y @c2n/mcp@<version>. Behind a proxy that download can fail silently when the agent starts it; install @c2n/mcp as a dev dependency and the installer points every configuration at node_modules/@c2n/mcp instead (--mcp auto, the default, or force it with --mcp local).

Codex and Antigravity intentionally share the portable .agents/skills/ copy. Re-running the installer updates c2n-owned files and preserves other MCP server entries.

Restart the selected agent after installation so it discovers both additions. The skill gives the agent c2n-specific workflow and theming guidance; the MCP server supplies the current component APIs, examples, presets and generated code. They work independently, but installing both gives the best result.

Use with an agent

With the rules block installed, ordinary requests ("build the settings form") should already use c2n. You can still ask for it explicitly, for example:

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.

You can also invoke the installed c2n-components skill by name in clients that support explicit skill invocation. The agent should consult MCP first and inspect the installed package manifest when MCP is unavailable.

Plugin installation

The package root contains the portable Agent Plugins plugin.json, mcp.json and skills/ layout used by Codex-compatible plugin hosts. Claude compatibility remains under .claude-plugin/plugin.json and .mcp.json.

From this repository, Claude Code can install the marketplace plugin:

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

The MCP server starts through the exact matching @c2n/mcp release. For an MCP-only setup, run npx -y @c2n/mcp from any stdio MCP client.

See the AI tools guide for installation, verification, manual configuration and troubleshooting in each supported agent.

For Claude Code the installer also adds a PostToolUse hook to .claude/settings.json: after each Write, Edit or MultiEdit of a markup, script or stylesheet file (HTML, JSX/TSX, Vue, Svelte, Astro, MDX, JS/TS, CSS/SCSS/Less), c2n-mcp validate --hook checks that file and hands the findings (native controls to replace, unknown tags, attributes, slots or variables) back to the agent, which fixes them in the same turn. Other files are not checked, and other hooks in the settings file are kept. Skip it with --no-hook; run the same check in CI with npx -y @c2n/mcp validate src --strict, which fails on warnings (such as a native control) as well as errors.

What the skill does

1. Detects the project (framework, installed @c2n/* packages, existing theme bridge and variants).
2. Gets facts from the MCP tools (get_component, get_examples, get_theme), falling back to a compact component catalog for discovery and the installed custom-elements.json files for exact APIs.
3. Themes once with @c2n/theme, uses the tags directly, and turns every repeated pattern into a CSS-class variant, a wrapper component, a Lit subclass or a composed component.

references/ holds the workflow, theming, variant and framework guides. component-catalog.md is a generated discovery index, not an API reference; installed component manifests provide version-correct API facts when MCP is unavailable.

Development

npm run build:tools at the repository root regenerates the compact catalog and synchronizes every plugin manifest and @c2n/mcp pin from package.json. npm test -w packages/tools/skill verifies idempotent installation in temporary projects.