# Htmlcn

> Build static shadcn-style prototypes using htmlcn plain HTML components. Use when creating or editing framework-free HTML UI examples with the htmlcn runtime.

- Skill: `maddada/htmlcn` (Agent Skill, multi-file: 8 files)
- Install (CLI): `npx skillmds@latest add maddada/htmlcn`
- Raw SKILL.md: https://api.skillmd.com/api/skills/maddada/htmlcn/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: maddada (https://skillmd.com/u/maddada)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/maddada/htmlcn

---


# htmlcn

Use htmlcn to build static prototypes with ordinary HTML, shadcn-style component class names, and the shared runtime files in `lib/`.

## Imports

For pages served from the repository root:

```html
<link rel="stylesheet" href="./lib/htmlcn.css">
<script src="./lib/htmlcn.js" defer></script>
```

For examples in this skill:

```html
<link rel="stylesheet" href="../../../lib/htmlcn.css">
<script src="../../../lib/htmlcn.js" defer></script>
```

## Component Rules

- Use `h-` plus the exact shadcn component export name and casing, such as `h-Button`, `h-CardHeader`, and `h-DropdownMenuItem`.
- Use modifier classes for variants and sizes, such as `h-Button--outline`, `h-Button--destructive`, `h-Button--sm`, and `h-TabsList--line`.
- Use `data-h-*` attributes for behavior and state configuration, such as `data-h-target`, `data-h-value`, `data-h-default-value`, and `data-h-name`.
- Do not write runtime-managed `data-h-state` unless intentionally mocking an initial open or active state.
- Use native HTML attributes where useful: `id`, `for`, `name`, `value`, `type`, `placeholder`, `disabled`, and `hidden`.
- Use inline CSS for page-specific layout. Do not invent layout helper classes like `h-Stack`, `h-Grid`, `h-Page`, or `h-Container`.

## Selection Guidance

- Use `NativeSelect` for ordinary form dropdowns.
- Use `Select` for styled custom dropdowns without search.
- Use `Combobox` for searchable selection, autocomplete, or large option lists.
- Use `Command` for command palettes, app action search, and global navigation search.

## Icons

Use Tabler React component names in `data-icon`:

```html
<span class="h-Icon" data-icon="IconSearch"></span>
<span class="h-Icon" data-icon="IconSettings"></span>
```

For uncommon icons, add `data-icon-fetch` or configure `window.htmlcn.icons.fetchMissing = true` before loading `lib/htmlcn.js`.

## Examples

Reference examples are in `examples/`:

- `examples/kitchen-sink.html`
- `examples/component-audit.html`
- `examples/dashboard.html`
- `examples/form-controls.html`
- `examples/ghostex-process-popover.html`