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`