# htmlcn
[](https://skills.sh/madda/htmlcn)
htmlcn is a plain HTML component vocabulary for building shadcn-style static prototypes with one CSS file and one JavaScript file.
## Install the Skill
After this repository is public on GitHub, install the `htmlcn` skill with:
```sh
npx skills add madda/htmlcn --skill htmlcn
```
To install it globally for Claude Code:
```sh
npx skills add madda/htmlcn --skill htmlcn -g -a claude-code
```
Replace `madda/htmlcn` with the final GitHub `owner/repo` if the repository is published under a different name.
## Repository Layout
- `skills/htmlcn/SKILL.md` is the skill entry point discovered by the `skills` CLI.
- `skills/htmlcn/examples/` contains htmlcn example pages.
- `lib/` contains the important shared runtime files: `htmlcn.css`, `htmlcn.js`, and `favicon.svg`.
- `website/` contains the Vite website and the shadcn React comparison page.
## Website Commands
Run website commands from the repository root:
```sh
npm run dev
npm run build
npm run preview
npm run typecheck
```
## CDN Publishing
The cleanest CDN path is to publish this repository as a public npm package, then use jsDelivr or UNPKG. Before publishing, choose a package name, remove `"private": true`, and add or adjust these package fields:
```json
{
"name": "@your-scope/htmlcn",
"version": "0.1.0",
"files": ["lib"],
"jsdelivr": "./lib/htmlcn.js",
"style": "./lib/htmlcn.css",
"publishConfig": {
"access": "public"
}
}
```
Then verify and publish:
```sh
npm pack --dry-run
npm publish --access public
```
After publish, pin an exact version in HTML:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@your-scope/htmlcn@0.1.0/lib/htmlcn.css">
<script src="https://cdn.jsdelivr.net/npm/@your-scope/htmlcn@0.1.0/lib/htmlcn.js" defer></script>
```
UNPKG works with the same npm package:
```html
<link rel="stylesheet" href="https://unpkg.com/@your-scope/htmlcn@0.1.0/lib/htmlcn.css">
<script src="https://unpkg.com/@your-scope/htmlcn@0.1.0/lib/htmlcn.js" defer></script>
```
If you do not want to publish to npm, tag a GitHub release and use jsDelivr's GitHub endpoint instead:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/maddada/htmlcn@0.1.0/lib/htmlcn.css">
<script src="https://cdn.jsdelivr.net/gh/maddada/htmlcn@0.1.0/lib/htmlcn.js" defer></script>
```
## Local Skill Validation
The `skills` CLI discovers skills from `skills/*/SKILL.md`, so this repository exposes one skill:
```text
skills/htmlcn/SKILL.md
```