@c2n/skill 0.0.7

package/.claude-plugin/plugin.json

@@ -0,0 +1,12 @@
+{
+  "name": "c2n",
+  "description": "Build UI with the c2n web components (c2-* Lit elements from @c2n/*): theme once with @c2n/theme, use the tags directly, turn repeated looks into variant components. Bundles the @c2n/mcp server.",
+  "version": "0.0.7",
+  "author": {
+    "name": "code2nguyen"
+  },
+  "homepage": "https://code2nguyen.github.io/web-components/",
+  "repository": "https://github.com/code2nguyen/web-components",
+  "license": "MIT",
+  "keywords": ["web components", "lit", "design system", "theme", "c2n"]
+}

package/.mcp.json

@@ -0,0 +1,9 @@
+{
+  "mcpServers": {
+    "c2n": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@c2n/mcp@0.0.7"]
+    }
+  }
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,70 @@
+# @c2n/skill
+
+Portable Agent Skill and MCP configuration for building applications with the `c2-*` elements from `@c2n/*`. The same package supports Claude Code, Codex and Google Antigravity.
+
+## 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:
+
+```bash
+npm i -D @c2n/skill
+npx c2n-skill install
+```
+
+The default installs all supported agents. Select one or disable MCP configuration when needed:
+
+```bash
+npx c2n-skill install --agent claude
+npx c2n-skill install --agent codex
+npx c2n-skill install --agent antigravity
+npx c2n-skill install --agent codex,antigravity --no-mcp
+```
+
+Generated project files:
+
+| Agent       | Skill                            | MCP configuration         |
+| ----------- | -------------------------------- | ------------------------- |
+| Claude      | `.claude/skills/c2n-components/` | `.mcp.json`               |
+| Codex       | `.agents/skills/c2n-components/` | `.codex/config.toml`      |
+| Antigravity | `.agents/skills/c2n-components/` | `.agents/mcp_config.json` |
+
+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
+
+Ask the agent to use c2n explicitly when starting an application task, for example:
+
+```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.
+```
+
+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:
+
+```text
+/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](https://code2nguyen.github.io/web-components/guides/ai-tools) for installation, verification, manual configuration and troubleshooting in each supported agent.
+
+## 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.

package/bin/install.js

@@ -0,0 +1,127 @@
+#!/usr/bin/env node
+import { copyFileSync, existsSync, mkdirSync, readFileSync, readdirSync, realpathSync, statSync, writeFileSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import process from 'node:process'
+import { fileURLToPath, pathToFileURL } from 'node:url'
+
+const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..')
+const supportedAgents = new Set(['claude', 'codex', 'antigravity'])
+
+function copyDirectory(source, destination) {
+  mkdirSync(destination, { recursive: true })
+  for (const name of readdirSync(source)) {
+    const from = join(source, name)
+    const to = join(destination, name)
+    if (statSync(from).isDirectory()) copyDirectory(from, to)
+    else copyFileSync(from, to)
+  }
+}
+
+function installSkill(projectRoot, relativeDirectory) {
+  const destination = join(projectRoot, relativeDirectory, 'c2n-components')
+  const existingSkill = join(destination, 'SKILL.md')
+  if (existsSync(existingSkill) && !/^name:\s*c2n-components\s*$/m.test(readFileSync(existingSkill, 'utf8'))) {
+    throw new Error(`Refusing to replace a different skill at ${destination}`)
+  }
+  copyDirectory(join(packageRoot, 'skills/c2n-components'), destination)
+  return destination
+}
+
+function mergeJsonServer(file, server) {
+  mkdirSync(dirname(file), { recursive: true })
+  const value = existsSync(file) ? JSON.parse(readFileSync(file, 'utf8')) : {}
+  value.mcpServers = { ...(value.mcpServers ?? {}), c2n: server }
+  writeFileSync(file, JSON.stringify(value, null, 2) + '\n')
+}
+
+function mergeCodexServer(file, version) {
+  mkdirSync(dirname(file), { recursive: true })
+  const lines = existsSync(file) ? readFileSync(file, 'utf8').split(/\r?\n/) : []
+  const start = lines.findIndex((line) => line.trim() === '[mcp_servers.c2n]')
+  if (start >= 0) {
+    let end = start + 1
+    while (end < lines.length && !/^\s*\[\[?[^\]]+\]\]?\s*$/.test(lines[end])) end += 1
+    lines.splice(start, end - start)
+  }
+  const current = lines.join('\n').trimEnd()
+  const section = `[mcp_servers.c2n]\ncommand = "npx"\nargs = ["-y", "@c2n/mcp@${version}"]`
+  writeFileSync(file, `${current}${current ? '\n\n' : ''}${section}\n`)
+}
+
+export function installProject({ projectRoot = process.cwd(), agents = ['claude', 'codex', 'antigravity'], includeMcp = true } = {}) {
+  const selected = [...new Set(agents)]
+  for (const agent of selected) {
+    if (!supportedAgents.has(agent)) throw new Error(`Unknown agent "${agent}". Use claude, codex, antigravity, or all.`)
+  }
+
+  const root = resolve(projectRoot)
+  const packageJson = JSON.parse(readFileSync(join(packageRoot, 'package.json'), 'utf8'))
+  const command = { command: 'npx', args: ['-y', `@c2n/mcp@${packageJson.version}`] }
+  const server = { type: 'stdio', ...command }
+  const installedSkills = new Set()
+
+  if (selected.includes('claude')) installedSkills.add(installSkill(root, '.claude/skills'))
+  if (selected.includes('codex') || selected.includes('antigravity')) installedSkills.add(installSkill(root, '.agents/skills'))
+
+  const configs = []
+  if (includeMcp && selected.includes('claude')) {
+    const file = join(root, '.mcp.json')
+    mergeJsonServer(file, server)
+    configs.push(file)
+  }
+  if (includeMcp && selected.includes('codex')) {
+    const file = join(root, '.codex/config.toml')
+    mergeCodexServer(file, packageJson.version)
+    configs.push(file)
+  }
+  if (includeMcp && selected.includes('antigravity')) {
+    const file = join(root, '.agents/mcp_config.json')
+    mergeJsonServer(file, command)
+    configs.push(file)
+  }
+
+  return { agents: selected, skills: [...installedSkills], configs }
+}
+
+function usage() {
+  return `Install the c2n skill and MCP server into a project.\n\nUsage:\n  c2n-skill install [--agent all|claude|codex|antigravity] [--project <path>] [--no-mcp]\n\nThe default is --agent all --project .`
+}
+
+export function run(argv = process.argv.slice(2)) {
+  const args = [...argv]
+  if (args[0] === 'install') args.shift()
+  if (args.includes('--help') || args.includes('-h')) {
+    console.log(usage())
+    return
+  }
+
+  let projectRoot = process.cwd()
+  let agents = ['claude', 'codex', 'antigravity']
+  let includeMcp = true
+  for (let index = 0; index < args.length; index += 1) {
+    const argument = args[index]
+    if (argument === '--no-mcp') includeMcp = false
+    else if (argument === '--project') projectRoot = args[++index]
+    else if (argument.startsWith('--project=')) projectRoot = argument.slice('--project='.length)
+    else if (argument === '--agent') agents = (args[++index] ?? '').split(',')
+    else if (argument.startsWith('--agent=')) agents = argument.slice('--agent='.length).split(',')
+    else throw new Error(`Unknown argument "${argument}".\n\n${usage()}`)
+  }
+  if (!projectRoot) throw new Error('--project requires a path')
+  if (agents.includes('all')) agents = ['claude', 'codex', 'antigravity']
+
+  const result = installProject({ projectRoot, agents, includeMcp })
+  console.log(`Installed c2n for ${result.agents.join(', ')} in ${resolve(projectRoot)}`)
+  for (const skill of result.skills) console.log(`  skill: ${skill}`)
+  for (const config of result.configs) console.log(`  MCP:   ${config}`)
+  console.log('Restart the selected agent so it discovers the skill and MCP server.')
+}
+
+if (process.argv[1] && import.meta.url === pathToFileURL(realpathSync(process.argv[1])).href) {
+  try {
+    run()
+  } catch (error) {
+    console.error(error instanceof Error ? error.message : error)
+    process.exitCode = 1
+  }
+}

package/mcp.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://agent-plugins.org/schemas/1.0.0/mcp.schema.json",
+  "mcpServers": {
+    "c2n": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@c2n/mcp@0.0.7"]
+    }
+  }
+}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@c2n/skill",
+  "version": "0.0.7",
+  "description": "Portable agent skill and MCP tooling for building applications with c2n web components",
+  "type": "module",
+  "bin": {
+    "c2n-skill": "bin/install.js"
+  },
+  "files": [
+    ".claude-plugin",
+    ".mcp.json",
+    "bin",
+    "mcp.json",
+    "plugin.json",
+    "skills",
+    "README.md"
+  ],
+  "keywords": [
+    "agent-skills",
+    "antigravity",
+    "claude-code",
+    "codex",
+    "plugin",
+    "skill",
+    "mcp",
+    "web components",
+    "c2n"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "build": "wireit",
+    "prepack": "npm run build",
+    "test": "node --test scripts/install.test.ts",
+    "version": "node scripts/build-skill.ts && git add .claude-plugin/plugin.json .mcp.json mcp.json plugin.json skills"
+  },
+  "wireit": {
+    "build": {
+      "dependencies": [
+        "../mcp:build"
+      ],
+      "command": "node scripts/build-skill.ts",
+      "files": [
+        "scripts/build-skill.ts",
+        "../mcp/data/registry.json",
+        "package.json"
+      ],
+      "output": [
+        "skills/c2n-components/references/component-catalog.md",
+        ".claude-plugin/plugin.json",
+        ".mcp.json",
+        "mcp.json",
+        "plugin.json"
+      ],
+      "clean": false
+    }
+  },
+  "devDependencies": {
+    "@c2n/config": "*",
+    "@c2n/mcp": "0.0.7",
+    "prettier": "3.9.6"
+  },
+  "gitHead": "c8db398a27f7cd417d665fdf5da455fee2d4e910"
+}

package/plugin.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://agent-plugins.org/schemas/1.0.0/plugin.schema.json",
+  "name": "c2n",
+  "description": "Build UI with the c2n web components (c2-* Lit elements from @c2n/*): theme once with @c2n/theme, use the tags directly, turn repeated looks into variant components. Bundles the @c2n/mcp server.",
+  "version": "0.0.7",
+  "author": {
+    "name": "code2nguyen"
+  },
+  "homepage": "https://code2nguyen.github.io/web-components/",
+  "repository": "https://github.com/code2nguyen/web-components",
+  "license": "MIT",
+  "keywords": ["web components", "lit", "design system", "theme", "c2n"],
+  "extensions": {
+    "com.openai": {
+      "interface": {
+        "displayName": "c2n Web Components",
+        "shortDescription": "Build and theme applications with c2n components",
+        "longDescription": "Component APIs, examples, theme guidance and reusable workflows for applications built with @c2n web components.",
+        "developerName": "code2nguyen",
+        "category": "Developer Tools",
+        "capabilities": ["Read"],
+        "websiteURL": "https://code2nguyen.github.io/web-components/",
+        "defaultPrompt": ["Use c2n Web Components to build this interface with the appropriate c2-* elements and theme tokens."]
+      }
+    }
+  }
+}

package/skills/c2n-components/SKILL.md

@@ -0,0 +1,92 @@
+---
+name: c2n-components
+description: Build and theme applications with the `c2-*` web components from `@c2n/*`. Use when adopting c2n, implementing UI with c2n components, mapping `@c2n/theme` tokens, or creating application-owned variants and compositions.
+license: MIT
+---
+
+# c2n components
+
+Build screens from `@c2n/*` web components with the least code: **theme once, use the tags directly, name what repeats.** Facts about components come from the c2n MCP tools or the component manifests, never from memory. The references in `references/` hold the details; read only the one the current step points to.
+
+This workflow expects a JavaScript project and Node.js 20 or newer. The c2n MCP server is recommended; the skill retains a compact discovery index and can inspect installed package manifests when MCP is unavailable.
+
+## 1. Detect the project
+
+Inspect the project's `package.json` with the available filesystem or shell tools. Identify installed `@c2n/*` packages and the framework before changing dependencies or source files.
+
+Then look for what already exists before adding anything:
+
+- a theme: `--c2-theme--` in the CSS, or an import of `@c2n/theme`;
+- a variants directory: `src/components/ui/`, `src/ui/`, files that `extends … from '@c2n/`, or classes setting `--c2-…` variables;
+- the CSS entry point and the dark-mode switch (`data-theme`, a class, `prefers-color-scheme`).
+
+Reuse an existing variant or token bridge over creating a new one.
+
+## 2. Get the facts
+
+When c2n MCP tools are available:
+
+1. `list_components` or `search_components` to pick the component for the need.
+2. `get_component` for attributes, slots, events, documented CSS parts and CSS variables (grouped by semantic target and state, with the theme token each follows).
+3. `get_examples` for real markup. Start with the default example, then retrieve gallery examples matching the requested state, layout or use case. Preserve any accessibility note returned with an example.
+4. `get_presets` when a curated visual treatment is useful. A preset is structured CSS-variable and attribute data suitable for generation; a gallery example is broader usage and composition context.
+5. `get_theme` **before writing any CSS**, so overrides go on tokens when a token exists.
+6. `generate_variant` when a selected preset or gallery look repeats: it validates names and emits the class / HTML / Lit code.
+7. `get_workflow_guide` for the workflow, theming, variant or framework guide text.
+
+Without the server, use `references/component-catalog.md` only to identify a likely package. Then read `node_modules/@c2n/<name>/custom-elements.json` for the installed version's attributes, slots, events, CSS parts and CSS properties. If the package is not installed, use https://code2nguyen.github.io/web-components/. Never infer an API from the catalog or invent a variable, attribute, slot or event name.
+
+## 3. Theme once
+
+Read `references/theming.md`.
+
+- Install the theme with the components: `npm install @c2n/theme @c2n/<component>…`.
+- Import `@c2n/theme/theme.css` once at the application root (`main.ts`, root layout, global stylesheet). If the app already has design tokens, import `@c2n/theme/base.css` alone and bridge the app's tokens onto the `--c2-theme--*` names on `:root`.
+- Override tokens on `:root` (light) and under the app's dark selector. Component variables are never set globally when a token covers the job.
+- Register elements with side-effect imports (`import '@c2n/button'`) at the entry or in the module that renders them; icons individually (`import '@c2n/feather-icons/icons/search.js'`).
+
+## 4. Decide: tag, variant, or composed component
+
+Read `references/variant-components.md` when creating one.
+
+| Situation                                                    | Do                                                                                                                           |
+| ------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| Appears once, themed default is right                        | plain `<c2-…>` tag                                                                                                           |
+| Same look repeats, markup otherwise plain                    | **CSS class** setting `--c2-<component>__…` variables (in the app's variants stylesheet)                                     |
+| Same attributes / slots / accessible name repeat too         | **wrapper component** in the app's framework rendering the c2 element                                                        |
+| Must be its own tag (strings, other Lit templates, shipping) | **Lit subclass**: `class X extends Button { static override styles = [Button.styles, css\`:host{…}\`] }`, defined as `app-*` |
+| Several c2 components + logic repeat                         | **composed component**: children's variables on `:host`/a class, attributes forwarded, events re-emitted                     |
+| No c2 component fits (kbd hint, count pill, …)               | app component styled with `--c2-theme--*` tokens; avoid patching installed `@c2n/*` packages for app-local behavior          |
+
+Naming: the app's prefix (`app-*`, `site-*`, `my-*`), kebab-case with a hyphen, never `c2-*`. One file per variant in one directory, exported from a barrel, with a short header comment (what it wraps, which variables it fixes, where it is used).
+
+## 5. Conventions
+
+- Prefer variables set on the host element, a class or an ancestor. Use `::part()` only when `get_component` documents that native CSS part and variables cannot express the change. Do not repeat inline `style="--c2-…"`.
+- Grammar `--c2-<component>__<part>[__<state>]--<property>`; states `hover | active | focus | selected | disabled | open | error | read-only`.
+- Boolean attributes are present or absent (`disabled`, `running`, `selected`); slots by name (`prefix-icon`, `suffix-icon`, `header`, `footer`, `description`…).
+- Composed components set child variables from the parent (`--c2-text-field--border-top: none` on the wrapper class) and re-emit events (`redispatchEvent` from `@c2n/core/dom-helper.js` in Lit).
+- Icons: use the registered Feather or Phosphor icon tag and its published module; prefer individual icon imports and theme through the icon package's shared variables.
+- Dark mode only through tokens; SSR or static HTML guards unregistered tags with `c2-x:not(:defined) { visibility: hidden }`.
+
+## 6. Framework notes
+
+Read `references/frameworks.md` for details.
+
+- Plain HTML / Vite: side-effect imports in a `<script type="module">` or the entry module.
+- Lit: import what you render; subclass for tag variants; `redispatchEvent` for child events.
+- Astro: `@astrojs/lit` islands (`<Button client:load>`, kebab-case attributes only; a `client:only` island must not contain islands) or plain tags plus a client `<script>` for repeated markup; variant styles need `is:global`.
+- React 19: props become attributes, custom events via `ref.addEventListener`; older React needs string attributes and refs.
+- Vue: `compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-')`; `.prop` for arrays/objects.
+
+## 7. Verify
+
+- Every element used is registered (no empty tags, no `HTMLUnknownElement`); `@c2n/theme` imported exactly once.
+- Every variable, attribute, slot and event name exists in `get_component` / the manifest.
+- Every `::part()` name exists in `get_component`; no repeated inline variable styles; repeated looks became variants.
+- Variant tags contain a hyphen and do not start with `c2-`.
+- Light and dark both checked; the project's build, lint and type-check pass.
+
+## 8. Report
+
+List the packages added, where the theme is imported and which tokens are set, each variant created (name → base tag, file), composed components, and the gaps left as plain app components.

package/skills/c2n-components/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: 'c2n Components'
+  short_description: 'Build applications with c2n components'
+  default_prompt: 'Use $c2n-components to build this interface with the appropriate c2-* elements and theme tokens.'
+
+policy:
+  allow_implicit_invocation: true

package/skills/c2n-components/references/component-catalog.md

@@ -0,0 +1,90 @@
+# c2n component catalog
+
+GENERATED by `packages/tools/skill/scripts/build-skill.ts` from the @c2n/mcp registry (c2n 0.0.7). Do not edit by hand.
+Use this compact index only to discover a likely component when the c2n MCP server is unavailable. It intentionally omits component APIs and examples. Read the selected installed package's `custom-elements.json` for exact attributes, slots, events, CSS parts and CSS properties.
+
+## Buttons
+
+- **Button** — `c2-button` · `@c2n/button` — Themeable button with slots for text, prefix, suffix and running icons.
+- **Button Group** — `c2-button-group` · `@c2n/button-group` — Attached buttons with shared borders, optionally a segmented control with single or multiple selection.
+- **Copy Button** — `c2-copy-button` · `@c2n/copy-button` — Button that copies text to the clipboard — the element it sits in, another element by id, or a literal string.
+- **Icon Button** — `c2-icon-button` · `@c2n/icon-button` — Round, hoverable button wrapping a slotted SVG icon.
+
+## Chart
+
+- **Area chart** — `c2-area-chart, c2-chart-series` · `@c2n/chart` — A line chart with the region under each line filled — every line-chart attribute, plus a fill opacity.
+- **Bar chart** — `c2-bar-chart, c2-chart-series` · `@c2n/chart` — Bars over categories or time buckets, with several series drawn side by side within each band.
+- **Line chart** — `c2-line-chart, c2-chart-series` · `@c2n/chart` — A line chart over a time or numeric x axis, drawn on canvas by uPlot, with series declared as children.
+- **Pie chart** — `c2-pie-chart, c2-chart-series` · `@c2n/chart` — A pie or donut chart drawn by ECharts, where one row is one slice and label-field names it.
+- **Sparkline** — `c2-sparkline, c2-chart-series` · `@c2n/chart` — A chromeless trend line sized for a table cell, a list row or the trend slot of a c2-stat.
+
+## Chat
+
+- **Chat Input** — `c2-chat-input` · `@c2n/chat-input` — Auto-growing message composer with keyboard submission, toolbar actions and native form support.
+- **Chat Message** — `c2-chat-message` · `@c2n/chat-message` — Flexible message row for conversations, assistant answers and activity updates.
+
+## Data display
+
+- **Attachment** — `c2-attachment, c2-attachment-group` · `@c2n/attachment` — File and image attachments with metadata, upload progress, failure states, and actions.
+- **Avatar** — `c2-avatar` · `@c2n/avatar` — Image, initials or icon for a person, with status dot and badge.
+- **Badge** — `c2-badge` · `@c2n/badge` — Tinted pill for status text, counts and dots, optionally pinned to a corner of another element.
+- **Code Viewer** — `c2-code-viewer` · `@c2n/code-viewer` — Syntax-highlighted code with line numbers, copy button and dark mode, powered by shiki.
+- **Kbd** — `c2-kbd` · `@c2n/kbd` — Keyboard key label for shortcuts and command hints, with the semantics of the native kbd element.
+- **List** — `c2-list` · `@c2n/list` — Vertical list container with single or multiple selection.
+- **List Item** — `c2-list-item` · `@c2n/list-item` — Selectable row with icon slots, used on its own or as the option of list and select.
+- **Stat** — `c2-stat` · `@c2n/stat` — Displays a KPI with an optional icon, trend and supporting description.
+- **Table** — `c2-table, c2-table-column` · `@c2n/table` — Virtualized data grid with declarative columns, sorting, selection, pinning and resizing.
+- **Virtual List** — `c2-virtual-list` · `@c2n/virtual-list` — Windowed list with built-in search, sorting, selection and an async data source.
+
+## Feedback
+
+- **Modal** — `c2-modal` · `@c2n/modal` — Dialog built on the native dialog element: focus trap, backdrop, Escape, title, body and footer.
+- **Overlay** — `c2-overlay` · `@c2n/overlay` — Anchored popup built on the browser Popover API, positioned with floating-ui.
+- **Progress** — `c2-progress` · `@c2n/progress` — Linear progress bar, indeterminate or filling to a value, with an optional label and count.
+- **Sheet** — `c2-sheet` · `@c2n/sheet` — Dialog pinned to an edge of the screen, for content that complements the page rather than interrupting it.
+- **Skeleton** — `c2-skeleton` · `@c2n/skeleton` — Placeholder block standing in for content that has not arrived, in three shapes and three animations.
+- **Spinner** — `c2-spinner` · `@c2n/spinner` — Circular progress indicator, indeterminate or showing a value, with optional text.
+- **Toast** — `c2-toast, c2-toast-region` · `@c2n/toast` — Notification cards and a manager for stacked, queued notifications with independent lifetimes.
+- **Tooltip** — `c2-tooltip` · `@c2n/tooltip` — Contextual hint shown when its target is hovered or focused, rendered in the top layer.
+
+## Icons
+
+- **Feather Icons** — `c2-feather-{name}` · `@c2n/feather-icons` — 287 open-source Feather icons, one web component each.
+- **Mat Icon** — `c2-mat-icon` · `@c2n/mat-icon` — 2,234 Material Icons ligatures rendered through a single element.
+- **Phosphor Icons** — `c2-phosphor-{name}` · `@c2n/phosphor-icons` — 1,512 flexible icons in six weights, one web component each.
+
+## Inputs
+
+- **Autocomplete** — `c2-autocomplete` · `@c2n/autocomplete` — Searchable combobox for local or remote items with customizable list rows.
+- **Checkbox** — `c2-checkbox` · `@c2n/checkbox` — Native checkbox behaviour in a quiet, themeable box with an opt-in hover layer.
+- **Color Area** — `c2-color-area` · `@c2n/color-area` — Two-dimensional area for picking saturation and value of a colour.
+- **Color Select** — `c2-color-select` · `@c2n/color-select` — Colour swatch that opens a full picker built from area and slider.
+- **Color Slider** — `c2-color-slider` · `@c2n/color-slider` — Horizontal slider for choosing a hue from 0 to 360.
+- **Label** — `c2-label` · `@c2n/label` — Caption that names and activates the control referenced by its for attribute, with a required marker.
+- **Radio** — `c2-radio, c2-radio-group` · `@c2n/radio` — Radio options built on native inputs, grouped into one value with keyboard navigation.
+- **Select** — `c2-select` · `@c2n/select` — Dropdown that pairs a themeable trigger with an anchored list of c2-list-item options.
+- **Slider** — `c2-slider` · `@c2n/slider` — Range input with a themeable track, thumb, step ticks and value bubble.
+- **Switch** — `c2-switch` · `@c2n/switch` — On/off toggle on a native switch input, with label, description and thumb icons.
+- **Text Field** — `c2-text-field, c2-text-field-clear` · `@c2n/text-field` — Single-line input with icon slots, clear button, helper and error text, and a character counter.
+- **Textarea** — `c2-textarea` · `@c2n/textarea` — Multiline text input with resizing, helper and error text, and a character counter.
+
+## Layout
+
+- **Accordion** — `c2-accordion` · `@c2n/accordion` — Connected, animated panels with shared borders and single or multiple expansion.
+- **Card** — `c2-card` · `@c2n/card` — Groups related content and actions on a single bordered surface.
+- **Chatbot** — `c2-chatbot` · `@c2n/chatbot` — Chatbot component for c2n applications.
+- **Details** — `c2-details` · `@c2n/details` — Collapsible disclosure built on native details and summary.
+- **dropdown-list** — `c2-dropdown-list` · `@c2n/dropdown-list` — dropdown-list component for c2n applications.
+- **Header** — `c2-header` · `@c2n/header` — Arranges brand, navigation, actions and a mobile trigger in a reusable site shell.
+- **reorder-list** — `c2-reorder-list` · `@c2n/reorder-list` — reorder-list component for c2n applications.
+- **Seperator** — `c2-seperator` · `@c2n/seperator` — Horizontal or vertical rule with an optional label, for dividing content and toolbars.
+
+## Navigation
+
+- **Breadcrumb** — `c2-breadcrumb` · `@c2n/breadcrumb` — Navigation trail of link buttons with separators, a current page and optional collapsing.
+- **Link Button** — `c2-link-button` · `@c2n/link-button` — Text-styled control for link and navigation actions, rendered as a real anchor or a button.
+- **Menu** — `c2-menu, c2-menu-item` · `@c2n/menu` — Commands, links, checkboxes and submenus in a popover anchored to a trigger.
+- **Navigation Menu** — `c2-navigation-menu, c2-navigation-menu-item, c2-navigation-menu-link` · `@c2n/navigation-menu` — Site navigation bar whose triggers open panels of links below the header.
+- **Pagination** — `c2-pagination` · `@c2n/pagination` — Page navigation in three layouts: numbered pages, a simple page status, or a table-footer row with rows-per-page.
+- **Side Nav** — `c2-side-nav` · `@c2n/side-nav` — Responsive navigation drawer beside the page: pushes the content on large screens, slides over it with a backdrop on small ones.
+- **Tabs** — `c2-tabs, c2-tab` · `@c2n/tabs` — Tab strip that shows one content panel at a time.

package/skills/c2n-components/references/frameworks.md

@@ -0,0 +1,84 @@
+# Using c2n components per framework
+
+All components are standard custom elements (Lit 3). Register with a side-effect import; then they are plain HTML.
+
+## Events (every framework)
+
+Each component that fires events exports an event map (`TableEventMap`, `SelectEventMap`, …) from the same module as its class, and declares typed `addEventListener` overloads, so the detail narrows with no cast:
+
+```ts
+table.addEventListener('selection-change', (event) => event.detail.rows) // TableRow[]
+```
+
+`EventMapOf<T>` from `@c2n/core/event-helper.js` recovers a component's map for code that is generic over elements. Use the map type instead of hand-writing `CustomEvent<{ value: string[] }>`.
+
+`selection-change` **does not bubble** — `c2-list`, `c2-select`, `c2-table`, `c2-tabs` and `c2-virtual-list` all fire it, so a listener goes on the element itself, never on an ancestor. `c2-tabs` fires `selection-change`, not `change`.
+
+Every form-associated component fires plain `input` and `change` alongside its semantic event, which is what generic two-way bindings listen for.
+
+A duplicate `customElements.define` warns and keeps the first definition instead of throwing.
+
+## Plain HTML / Vite / any bundler
+
+```html
+<script type="module">
+  import '@c2n/theme/theme.css'
+  import '@c2n/button'
+</script>
+<c2-button>Save</c2-button>
+```
+
+With a bundler, put the imports in the entry module (`main.ts`). CSS imports work through the bundler's CSS handling.
+
+## Lit
+
+Import what you render at the top of the component module (`import '@c2n/text-field'`). Extend a component for a tag variant (`class AppField extends TextField`). Re-emit child events with `redispatchEvent` from `@c2n/core/dom-helper.js`. Set child variables in your `static styles` on `:host` or on a class.
+
+## Astro
+
+- Islands (`@astrojs/lit`): `import { Button } from '@c2n/button'` in the frontmatter, `<Button client:load>` in the template. SSR'd with declarative shadow DOM, hydrated on load. Pass **kebab-case attributes** only (a prop whose name matches an element property is set as a property and forces `defer-hydration`). A `client:only` island must not contain islands: its children end up in a `<template>` and nothing hydrates; the parent module registers the children instead.
+- Plain tags + client script: `<c2-button>` in the template and `import '@c2n/button'` inside a `<script>`. Cheaper for repeated markup (no shadow-DOM copy per instance); guard the flash with `c2-button:not(:defined) { visibility: hidden }`.
+- Scoped `<style>` does not reach elements rendered by child components; use `is:global` (or `:global()`) for variant classes.
+
+## React 19
+
+Custom elements work as JSX tags. React 19 passes primitive props as attributes and functions as event listeners for `on*` names; for custom events attach listeners with a `ref` (`ref.current.addEventListener('selection-change', …)`).
+
+Types: `import '@c2n/<name>/react'` — one line per package, in any `.d.ts` — declares the tags in `JSX.IntrinsicElements` with props derived from the element class. Do not hand-write the mapping. React 18 and older: pass attributes as strings and use refs for events and properties.
+
+## Vue 3
+
+Tell the compiler about the tags: `compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-')` (in `@vitejs/plugin-vue`'s `template.compilerOptions`); without it every `c2-*` tag is treated as a Vue component and renders nothing. Register the elements at module scope before `mount()`: Vue chooses between a property and an attribute with `key in el`, so a binding on an element that has not upgraded yet falls back to an attribute.
+
+Types: `import '@c2n/<name>/vue'` registers the tags with Volar, and `"extends": [..., "@c2n/framework-types/tsconfig.vue.json"]` supplies the matching `vueCompilerOptions` (`strictTemplates`, plus the `v-model` prop mapping so `v-model` binds `value`/`checked` rather than `modelValue`). Declare no local `vueCompilerOptions` next to it — a local one replaces the inherited object rather than merging.
+
+- Events: `@selection-change`, `@submit-message` bind by their real kebab-case name — Vue calls `addEventListener` with the name as written. The handler gets a plain `Event`, so narrow it (`(event as CustomEvent<{ value: string[] }>).detail`).
+- `v-model` works on `c2-text-field` / `c2-textarea`: on a custom element Vue compiles it to the plain-text model directive, which sets `el.value` and listens for `input`, and both components expose `value` and re-emit the native `input` event.
+- `.prop` forces a DOM property (`:value.prop="selected"` for array/object values); `.attr` forces an attribute (`:align.attr="side"`), needed when a property is not reflected but the component styles it with `:host([attr])` — `c2-chat-message`'s `align` is the case to know.
+- A static attribute stays an attribute, so spell it the way the component declares it (`row-key`, not `rowKey`).
+
+## Angular
+
+`CUSTOM_ELEMENTS_SCHEMA` on the component is the only required configuration. `[rows]="…"` writes a property with `setProperty`; `(selection-change)` binds the event by its real name. A **static** attribute stays an attribute, so a camelCase property needs `[rowKey]="'id'"` or the real attribute name (`row-key`) — the lowercase spelling `rowkey` is ignored and logs a warning.
+
+Forms: Angular's built-in value accessors match `input`/`select`/`textarea` only, so `ngModel` and `formControlName` do nothing on a c2 control without `@c2n/angular`. Add `imports: [FormsModule, ...C2_FORM_ACCESSORS]`.
+
+The schema turns off template type checking, so `$event` is a bare `Event`: take the component's event-map type in the handler rather than `$any` at the call site.
+
+## Svelte
+
+Svelte binds attributes and `on:` events directly.
+
+## Table cells
+
+`renderCell` cannot return framework markup (it is handed to Lit). Mark the column `cell-slot` and render one light-DOM child per row into `slot="cell:<row key>:<field>"`; the children stay in the document, so ordinary CSS reaches them. Requires `row-key`; `renderCell`/the column format is the fallback.
+
+## Editor support outside TypeScript
+
+`@c2n/framework-types` ships `dist/html-custom-data.json` (point `html.customData` at it for VS Code / Volar) and `dist/web-types.json` (picked up automatically by the JetBrains IDEs). Both are generated from the custom-elements manifests, and cover plain HTML, Angular templates and Vue SFCs.
+
+## Server-side rendering and static HTML
+
+- Components must not touch `document`/`window` at module scope; the c2 components guard with `isServer`.
+- Without SSR of the shadow DOM, hide unregistered tags until they upgrade: `c2-modal:not(:defined) { display: none }` (dialogs, lists) or `visibility: hidden` (layout-stable chrome).
+- Theme CSS is plain CSS; load it in the document head so the first paint is themed.

package/skills/c2n-components/references/theming.md

@@ -0,0 +1,64 @@
+# Theming c2n components
+
+## Layers
+
+1. **Tokens** `--c2-theme--<name>` (from `@c2n/theme/tokens.css`, ~35 of them). Set by the application.
+2. **Base theme** `@c2n/theme/base.css`: `--c2-<component>__<part>--<prop>: var(--c2-theme--<token>, <component default>)` on `:root`/`:host` for every mapped component variable. Generated from the component manifests.
+3. **Component variables** `--c2-<component>__<part>[__<state>]--<property>`: the fine-grained escape hatch. Set on an element, a class or any ancestor; they always win over the base theme.
+4. **Variant components** built from 2 and 3.
+
+## Install
+
+```ts
+import '@c2n/theme/theme.css' // tokens + base theme, once
+```
+
+```css
+:root {
+  --c2-theme--color-primary: #7c3aed;
+  --c2-theme--color-primary-hover: #6d28d9;
+  --c2-theme--radius-md: 10px;
+  --c2-theme--font-family: 'Inter', system-ui, sans-serif;
+}
+```
+
+## Bring your own tokens
+
+```css
+@import '@c2n/theme/base.css';
+:root {
+  --c2-theme--color-primary: var(--brand-600);
+  --c2-theme--color-on-primary: var(--brand-on-600);
+  --c2-theme--color-surface: var(--surface);
+  --c2-theme--color-on-surface: var(--text);
+  --c2-theme--color-outline: var(--border);
+  --c2-theme--radius-md: var(--radius);
+  --c2-theme--font-family: var(--font-sans);
+  --c2-theme--focus-ring: 2px solid var(--brand-600);
+}
+```
+
+Dark mode then follows the app's own switch because the bridged values flip.
+
+## Dark mode with the shipped tokens
+
+`tokens.css` sets light values on `:root` and dark values under `[data-theme='dark']` and `.c2-dark`, with `prefers-color-scheme: dark` as the fallback when no `data-theme` attribute is present. `data-theme="light"` / `.c2-light` opts a subtree out. Selectors are not tied to the root element, so any subtree can be inverted.
+
+## Token groups
+
+- Colour roles: `color-primary`, `color-primary-hover`, `color-primary-active`, `color-on-primary`, `color-primary-container`, `color-surface`, `color-surface-container-low`, `color-surface-container`, `color-on-surface`, `color-on-surface-variant`, `color-outline`, `color-outline-variant`, `color-outline-strong`, `color-error`, `color-scrim`, `color-inverse-surface`, `color-on-inverse-surface`.
+- Typography: `font-family` (unset by default: components inherit the page font), `font-size-sm|md`, `font-weight-medium|semibold`.
+- Shape: `radius-sm|md|lg|xl|full`.
+- Borders: `border-width`, `border` (composite: the whole resting border shorthand; falls back to `border-width solid color-outline`).
+- Interaction: `focus-ring` (outline shorthand), `disabled-opacity`, `motion-scale` (multiplies every duration; `0` disables motion).
+- Elevation: `shadow-md`, `shadow-lg`.
+
+Composite tokens wrap their primitives: `var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6))`, so set the shorthand or just the colour.
+
+## What the base theme does not cover
+
+Sizes, paddings, gaps, identity colours (avatar fallbacks), status colours, the code viewer's syntax theme, and variables without a default (they inherit). Use component variables or a variant for those. `@c2n/theme/report.json` lists what is mapped per package; MCP `get_theme` with a `tag` shows the mapping of one component.
+
+## Grammar and states
+
+`--c2-<component>__<part>[__<state>]--<property>`: `__` separates component / part / state, `--` separates the CSS property. States: `hover`, `active`, `focus`, `selected`, `disabled`, `open`, `error`, `read-only`. Example: `--c2-checkbox__container__selected--background-color`.

package/skills/c2n-components/references/variant-components.md

@@ -0,0 +1,101 @@
+# Variant and composed components
+
+A variant is one c2 component with a fixed look (CSS variables) and, sometimes, fixed attributes, slots or accessible name. A composed component is several c2 components plus glue. Both normally set children's CSS variables on the host element or a class. Use `::part()` only for a part documented by `get_component` and only when the public variables cannot express the change.
+
+## Shape 1: CSS-class variant
+
+```css
+.danger-button {
+  --c2-button__container--background-color: var(--c2-theme--color-error);
+  --c2-button__container__hover--background-color: color-mix(in srgb, var(--c2-theme--color-error), black 12%);
+}
+```
+
+```html
+<c2-button class="danger-button">Delete</c2-button>
+```
+
+Use when only the look differs. Keep variant classes in one stylesheet (`ui/variants.css`). Read variable names from the component API; do not invent them.
+
+## Shape 2: wrapper component
+
+When attributes, slots or the accessible name repeat as well. Framework-native, zero runtime cost beyond the c2 element. Example (Astro; the same idea in React/Vue/Svelte):
+
+```astro
+---
+// SiteIconButton.astro — c2-icon-button with the app's size and a tooltip that defaults to the label.
+interface Props {
+  label: string
+  size?: 'sm' | 'md'
+  class?: string
+  [attr: string]: unknown
+}
+const { label, size = 'md', class: className = '', ...rest } = Astro.props
+---
+
+<c2-icon-button class={`site-icon-button site-icon-button--${size} ${className}`} aria-label={label} tooltip={label} {...rest}>
+  <slot />
+</c2-icon-button>
+<style is:global>
+  .site-icon-button {
+    --c2-icon-button--border-radius: var(--c2-theme--radius-sm);
+    --c2-icon-button__hover--background-color: var(--c2-theme--color-surface-container);
+  }
+  .site-icon-button--sm {
+    --c2-icon-button__state-layer--size: 30px;
+    --c2-icon-button__icon--width: 16px;
+    --c2-icon-button__icon--height: 16px;
+  }
+  .site-icon-button--md {
+    --c2-icon-button__state-layer--size: 36px;
+    --c2-icon-button__icon--width: 18px;
+    --c2-icon-button__icon--height: 18px;
+  }
+</style>
+```
+
+Forward unknown props as attributes (`{...rest}`) so callers keep the full c2 API (`disabled`, `data-*`, `aria-*`).
+
+## Shape 3: Lit subclass
+
+When the variant must be a tag of its own. The docs studio's Code tab and MCP `generate_variant` produce this:
+
+```ts
+import { css } from 'lit'
+import { Button } from '@c2n/button'
+
+export class DangerButton extends Button {
+  static override styles = [
+    Button.styles,
+    css`
+      :host {
+        --c2-button__container--background-color: var(--c2-theme--color-error);
+      }
+    `,
+  ]
+  override connectedCallback() {
+    super.connectedCallback()
+    this.setAttribute('running', '') // fixed attributes go here
+  }
+}
+if (!customElements.get('app-danger-button')) customElements.define('app-danger-button', DangerButton)
+```
+
+Import the class from the module that defines the element (`@c2n/tabs/tab.js` for `c2-tab`, `@c2n/feather-icons/icons/<name>.js` for icons). Importing it also registers the original `c2-*` tag, which is fine. Never `customElements.define` a `c2-` name.
+Guard registration with `customElements.get()` so development HMR or repeated module evaluation cannot define the same tag twice.
+
+## Composed components
+
+Several c2 components and some logic repeat: a search field (`c2-text-field` + `c2-list`), a settings dialog (`c2-modal` + form controls), a toolbar (`c2-icon-button`s + `c2-tooltip`s).
+
+- Set the children's variables on the composed component's class or `:host` (custom properties inherit through shadow boundaries): `.search-palette__field { --c2-text-field--border-top: none; }`.
+- Forward the attributes callers should control as properties/attributes of the composed component.
+- Re-emit the child events callers need. In Lit use `redispatchEvent(this, event)` from `@c2n/core/dom-helper.js`; elsewhere `dispatchEvent(new CustomEvent(...))`.
+- Let the primitives keep their responsibilities (a `c2-modal` already traps focus, closes on Escape and backdrop click, locks scrolling and restores focus): write only the glue.
+- Declare composition in JSDoc (`@internalcomponent c2-list`, `@slotcomponent c2-list-item`) when the composed component is itself a Lit element with a manifest.
+
+## Naming and placement
+
+- Own prefix: `app-*`, `site-*`, `my-*`. A custom element name must contain a hyphen.
+- One file per variant, one directory (`src/components/ui/`), exported from a barrel.
+- Three-line header comment: what it wraps, which variables it fixes, where it is used.

package/skills/c2n-components/references/workflow.md

@@ -0,0 +1,42 @@
+# The c2n application workflow
+
+Build screens from `@c2n/*` web components with as little code as possible. Three layers, applied in this order.
+
+## 1. Theme once
+
+- Install `@c2n/theme` next to the component packages you use.
+- Import `@c2n/theme/theme.css` once at the application root (tokens + base theme). If the app already owns a token system, import only `@c2n/theme/base.css` and bridge your tokens onto the `--c2-theme--*` names.
+- Override the tokens that differ from the defaults on `:root` (light) and under your dark-mode selector. About 35 tokens (`--c2-theme--color-primary`, `--c2-theme--radius-md`, `--c2-theme--font-family`, `--c2-theme--focus-ring`, …) drive every component.
+- Never set component variables globally when a token exists for the job.
+
+## 2. Use the tags directly
+
+- Register an element with a side-effect import (`import '@c2n/button'`) at the application entry, or in the module that renders it.
+- Write plain markup: `<c2-button>Save</c2-button>`. Attributes, slots and events come from the component API (MCP `get_component`, or `node_modules/@c2n/<name>/custom-elements.json`).
+- Retrieve `get_examples` next: begin from the unmodified Default sample, then select gallery examples by use case. Use `get_presets` when structured values are more useful than a complete pattern.
+- Icons are components: `c2-feather-<name>` from `@c2n/feather-icons/icons/<name>.js`, sized and coloured through `--c2-feather-icon--size|color|stroke-width`.
+- A component that appears once with the themed default look needs nothing else.
+
+## 3. Name what repeats
+
+The decision rule, cheapest first:
+
+| Situation                                                                         | Do this                                                                                                      |
+| --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| The element appears once, default look is fine                                    | plain tag                                                                                                    |
+| Same look repeats, markup is otherwise plain                                      | **CSS-class variant**: a class that sets `--c2-<component>__…` variables                                     |
+| Same look **and** the same attributes / slots / accessible name repeat            | **wrapper component** in your framework (Astro/React/Vue/Lit) that renders the c2 element                    |
+| The variant must be its own tag (used from strings, other Lit templates, shipped) | **Lit subclass** of the component with the variables baked into `static styles`                              |
+| Several c2 components plus some logic repeat                                      | **composed component**: children's variables set on `:host`/a class, attributes forwarded, events re-emitted |
+| No c2 component fits                                                              | app-level component styled with the same `--c2-theme--*` tokens; avoid patching installed packages locally   |
+
+Every variant lives in one directory (`src/components/ui/`, `src/ui/`…), one file per variant, under the app's own prefix (`app-*`, `site-*`, `my-*`), never `c2-*`.
+
+## 4. Verify
+
+- Every element used is registered (no `HTMLUnknownElement`, no empty tags).
+- `@c2n/theme` is imported exactly once; tokens overridden on `:root` and the dark selector.
+- Prefer CSS custom properties. Every `::part()` selector must name a CSS part documented by `get_component`; no repeated inline `style="--c2-…"`.
+- Every variable, attribute, slot and event name exists in the component API.
+- Variant tags contain a hyphen and do not start with `c2-`.
+- Light and dark both look right; build, lint and type-check pass.