feat: htmx derivation home page 1:1 from react

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