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

skill/install.sh

@@ -28,10 +28,12 @@ AGENTS_BRAND_FILE="${SCRIPT_DIR}/AGENTS.brand.md"
 BRAND_FILE="${SCRIPT_DIR}/BRAND.md"
 FONTS_DIR="${REPO_ROOT}/public/fonts"
 PUBLIC_DIR="${REPO_ROOT}/public"
+HTMX_CSS_FILE="${REPO_ROOT}/dist/greyhaven.htmx.css"
 
 # Parse arguments
 TARGET_PROJECT=""
 INSTALL_BRAND=false
+INSTALL_HTMX_CSS=false
 
 while [ $# -gt 0 ]; do
   case "$1" in
@@ -39,16 +41,23 @@ while [ $# -gt 0 ]; do
       INSTALL_BRAND=true
       shift
       ;;
+    --htmx-css)
+      INSTALL_HTMX_CSS=true
+      shift
+      ;;
     -h|--help)
-      echo "Usage: $0 <target-project-directory> [--brand-skill]"
+      echo "Usage: $0 <target-project-directory> [--brand-skill] [--htmx-css]"
       echo ""
       echo "Options:"
       echo "  --brand-skill   Also install BRAND.md (voice/tone/messaging) and logo SVGs"
+      echo "  --htmx-css      Also install greyhaven.htmx.css (framework-agnostic CSS layer"
+      echo "                  for HTMX / server-rendered projects that can't use React)"
       echo ""
       echo "Examples:"
       echo "  $0 /path/to/my-app"
       echo "  $0 /path/to/my-app --brand-skill"
-      echo "  $0 . --brand-skill"
+      echo "  $0 /path/to/my-app --htmx-css"
+      echo "  $0 . --brand-skill --htmx-css"
       exit 0
       ;;
     *)
@@ -65,7 +74,7 @@ while [ $# -gt 0 ]; do
 done
 
 if [ -z "$TARGET_PROJECT" ]; then
-  echo "Usage: $0 <target-project-directory> [--brand-skill]"
+  echo "Usage: $0 <target-project-directory> [--brand-skill] [--htmx-css]"
   echo "Run '$0 --help' for details."
   exit 1
 fi
@@ -190,6 +199,20 @@ if [ "$INSTALL_BRAND" = true ]; then
   echo "[ok] Logos:         ${copied} SVGs copied to ${TARGET_LOGOS}/ (renamed: spaces → dashes)"
 fi
 
+# ── 5. HTMX CSS (opt-in via --htmx-css) ────────────────────────────────────
+if [ "$INSTALL_HTMX_CSS" = true ]; then
+  if [ -f "$HTMX_CSS_FILE" ]; then
+    TARGET_CSS_DIR="${TARGET_PROJECT}/public/css"
+    mkdir -p "$TARGET_CSS_DIR"
+    DST="${TARGET_CSS_DIR}/greyhaven.htmx.css"
+    copy_with_backup "$HTMX_CSS_FILE" "$DST"
+    echo "[ok] HTMX CSS:      ${DST}"
+  else
+    echo "[skip] greyhaven.htmx.css not found at ${HTMX_CSS_FILE}"
+    echo "       Run 'pnpm htmx-css:build' in the design system repo first."
+  fi
+fi
+
 # ── Next steps ─────────────────────────────────────────────────────────────
 cat <<'EOF'
 
@@ -209,7 +232,27 @@ Done!
    And set the font stack:
    --font-sans: 'Aspekta', ui-sans-serif, system-ui, sans-serif;
 
-2. (Optional) Register the Greyhaven MCP server. Create .mcp.json in your
+2. If you installed --htmx-css, import it from your Tailwind v4 input CSS:
+
+   @import "tailwindcss";
+   @import "./tokens-light.css";
+   @import "./tokens-dark.css";
+   @import "./greyhaven.htmx.css";   /* ← component @layer rules */
+
+   Then consume via data-slot attributes in your HTML / Go templates / Jinja:
+
+   <div data-slot="card">
+     <div data-slot="card-header"><div data-slot="card-title">Hello</div></div>
+     <div data-slot="card-content">Body</div>
+   </div>
+   <button data-slot="button" data-variant="default">Save</button>
+   <span data-slot="badge" data-variant="success">Active</span>
+
+   Interactive components (dialog, dropdown, popover, etc.) emit their static
+   visual CSS only — supply your own open/close JS (Alpine.js pairs well
+   with HTMX).
+
+3. (Optional) Register the Greyhaven MCP server. Create .mcp.json in your
    project root:
 
    {
@@ -221,6 +264,6 @@ Done!
      }
    }
 
-3. Re-run this script after design system updates to refresh your copies.
+4. Re-run this script after design system updates to refresh your copies.
 
 EOF