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

htmlcn

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

For pages served from the repository root:

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

For examples in this skill:

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

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.

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.

Use Tabler React component names in data-icon:

<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.

Reference examples are in examples/:

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:

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

For examples in this skill:

<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:

<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