feat: htmx derivation home page 1:1 from react

scripts/generate-skill.ts

@@ -182,6 +182,50 @@ function buildCompositionRules(): string {
 `
 }
 
+function buildHtmxLayer(): string {
+  return `## 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
+\`\`\`
+
+`
+}
+
 function buildExtensionProtocol(): string {
   return `## Extension Protocol
 
@@ -258,6 +302,8 @@ This skill gives you full context to generate pixel-perfect, on-brand UI using t
     '---\n',
     buildCompositionRules(),
     '---\n',
+    buildHtmxLayer(),
+    '---\n',
     buildExtensionProtocol(),
   ].join('\n')
 }