feat: htmx derivation home page 1:1 from react

skill/SKILL.md

@@ -659,6 +659,49 @@ pnpm dev`}</Code>
 - **Slot naming**: All components use `data-slot="component-name"`
 - **Icon sizing**: `[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0`
 
+---
+
+## HTMX / Server-Rendered Usage
+
+For projects that cannot use React (HTMX, Django templates, Rails ERB, Go `html/template`, Astro SSR, etc.), the design system ships a framework-agnostic CSS layer: `dist/greyhaven.htmx.css`.
+
+### What it is
+
+An auto-generated stylesheet derived from `components/ui/*.tsx`. Every `data-slot` attribute gets a `@layer components` rule. `cva` variants become attribute selectors (`[data-variant=...]`, `[data-size=...]`). Default variants apply via `:not([data-variant])` so consumers can omit the attribute.
+
+### Usage
+
+1. Install: `./skill/install.sh /path/to/project --htmx-css`
+2. Import in your Tailwind v4 input CSS: `@import "./greyhaven.htmx.css";`
+3. Emit HTML with `data-slot` / `data-variant` / `data-size` attributes:
+
+```html
+<div data-slot="card">
+  <div data-slot="card-header">
+    <div data-slot="card-title">Title</div>
+    <div data-slot="card-description">Description</div>
+  </div>
+  <div data-slot="card-content">Body</div>
+</div>
+
+<button data-slot="button" data-variant="default">Save</button>
+<button data-slot="button" data-variant="outline" data-size="sm">Cancel</button>
+
+<span data-slot="badge" data-variant="success">Active</span>
+```
+
+### Scope
+
+- **Fully static** (pure CSS, no JS): Card, Button, Badge, Input, Label, Textarea, Table, Separator, Code, Kbd, Progress, Avatar, Skeleton, Alert, Pagination, Breadcrumb, Navbar (solid variant), Spinner, AspectRatio, Empty, Hero, Section, Footer, CtaSection, ButtonGroup, InputGroup, Toast.
+- **Visual-only** (CSS is correct but needs your own state JS): Dialog, Dropdown, Popover, Select, Combobox, Accordion, Tabs, Tooltip, Drawer, Sheet, Sidebar, Collapsible, NavigationMenu, Menubar, ContextMenu, HoverCard, Command, AlertDialog, InputOtp, Carousel. Pair with Alpine.js (`x-data`, `x-show`, `@click`) or native HTML primitives (`<dialog>`, `<details>`).
+
+### Regenerate
+
+```bash
+pnpm htmx-css:build
+```
+
+
 ---
 
 ## Extension Protocol