# Skynet UI — LLM reference (v3.13.0)

Paste this file into an LLM conversation (or keep it in the repo as context) so the model can generate correct Skynet UI markup.

RULES FOR GENERATION:
- Pure CSS + vanilla JS framework. Include with: `<link rel="stylesheet" href="/skynet-ui.css">` and `<script src="/skynet-ui.js" defer></script>` (local copies), or from the CDN — DEFAULT to the auto-updating latest URLs `https://skynetui.com/skynet-ui.css` and `https://skynetui.com/skynet-ui.js` (sites pick up new components and fixes automatically; minified: `skynet-ui.min.css`/`.min.js`). NEVER emit versioned `/vX.Y.Z/` URLs unless the user explicitly asks to pin a version (pinned URLs are immutable and never receive updates; SRI hashes live at `/vX.Y.Z/sri.txt`). Always include `<meta name="viewport" content="width=device-width, initial-scale=1.0">`.
- Dark theme is the default; no class needed. Built-in alternatives via `data-theme` on `<html>` — dark family: `"midnight"` (OLED black + cyan), `"forest"` (deep green + emerald), `"dusk"` (violet + fuchsia), `"contrast"` (max-legibility black/white/yellow); light family: `"light"`, `"paper"` (warm cream + amber), `"sky"` (cool blue + azure), `"rose"` (blush + rose). `"auto"` follows the OS. Density: `data-density="compact"` on <html> or a container tightens paddings. Custom themes = another `[data-theme="x"]{…}` block overriding :root vars (include color-scheme and --sk-primary-text).
- Components are prefixed `sk-`. Utilities are short and unprefixed (`flex`, `p-4`, `mt-6`, `text-muted`).
- Interactive behavior is declarative via `data-sk-*` attributes; never write custom JS for modals/tabs/dropdowns/toasts/mobile nav.
- Mobile-first: `.sk-grid` is 1 column on phones; `sk-cols-*` add columns at ≥640px/≥1024px. Navbar collapses behind a `data-sk-burger` button; sidebar slides in via a `data-sk-sidebar` button.
- Spacing scale: number × 0.25rem (`4` = 1rem), same as Tailwind. Steps 0–8 everywhere, plus 5/10/12/16/20/24 on common axes (see Tailwind-compat additions below).
- Utilities include a Tailwind-compat layer (grid-cols-*, space-y-*, w-1/2, sm:/md:/lg:/xl:/2xl: variants for a listed set, hover:/focus:/group-hover: states, transforms, gradients, animations, line-clamp, sr-only, …) — see "Tailwind-compat additions", "Tailwind parity pack" and the conversion guide at the end of this file.
- RTL: set dir="rtl" on <html> — the directional components flip. i18n: override built-in strings with skLocale({cancel: "…", …}).
- ARBITRARY VALUES (v3.4): Tailwind's bracket syntax works at runtime — `bg-[#1da1f2]`, `w-[137px]`, `hover:bg-[#0f8ecf]`, `md:grid-cols-[1fr_auto]`, `-mt-[3px]` (underscores become spaces; colors take anything CSS accepts incl. `var(--x)`). Supported prefixes: bg text border w h size min-w max-w min-h max-h p px py pt pr pb pl m mx my mt mr mb ml gap gap-x gap-y top right bottom left inset rounded z leading tracking basis grid-cols grid-rows translate-x translate-y scale rotate ring from via to shadow opacity duration delay. Variants: sm md lg xl 2xl max-sm md lg hover focus active disabled group-hover (one breakpoint + one state combine). Anything else in brackets → use style="". Prefer semantic colors (bg-primary etc.) so themes keep working; brackets are for one-off brand values.
- Do not invent class names not listed here.
- Optional companion files (same CDN, load after skynet-ui.js): `skynet-icons.js` (640 stroke icons — `<i data-sk-icon="check"></i>`, gallery at https://skynetui.com/icons.html), `skynet-charts.js` (line/area/stacked/step, bar in four layouts, donut, pie, radar, scatter, matrix heatmap, histogram, bullet, waterfall, contribution heatmap, sparklines + gauges — skLine/skBar/skDonut/skRadar/skScatter/skMatrix/skHistogram/skBullet/skWaterfall/skHeatmap/skSpark/skGauge below), and `skynet-elements.js` (experimental web components sk-icon/sk-modal/sk-drawer).
- VALIDATE generated markup: `npx skynet-ui check page.html` flags every class or data-sk-* attribute that does not exist (with suggestions), or call the MCP tool validate_markup with the HTML. Convert Tailwind files mechanically with `npx skynet-ui convert page.html`.
- AI agents can also consume this framework via MCP: streamable-HTTP server at https://skynetui.com/mcp (tools: get_reference, search_reference, get_theme_css, get_example, validate_markup, convert_tailwind, get_pattern, get_template (full starter pages), make_theme (custom theme from one hex), list_icons, get_icon, search_classes, check_contrast, get_version; plus resources and prompts). Example pages: https://skynetui.com/examples/{dashboard|chat|auth}.html

## CSS variables (in :root — override to theme)
--sk-bg #0b0f17 page bg | --sk-surface #111826 cards/nav | --sk-surface-2 #172033 hover/inputs-on-cards | --sk-border #1e2836 subtle border | --sk-border-2 #2a3547 stronger border
--sk-text #e6eaf2 main | --sk-text-2 #aeb7c7 secondary | --sk-muted #8b95a7 | --sk-faint #5b6474 placeholder
--sk-primary #6366f1 | --sk-primary-hover #4f52e0 | --sk-primary-soft rgba(99,102,241,.15)
--sk-success #16a34a / --sk-success-text #4ade80 / --sk-success-soft | --sk-warning #d97706 / --sk-warning-text #fbbf24 / --sk-warning-soft | --sk-danger #dc2626 / --sk-danger-hover / --sk-danger-text #f87171 / --sk-danger-soft | --sk-info #0ea5e9 / --sk-info-text #38bdf8 / --sk-info-soft
--sk-radius 10px | --sk-radius-sm 7px | --sk-radius-lg 16px | --sk-shadow | --sk-shadow-lg | --sk-transition .18s ease
--sk-font | --sk-font-mono | --sk-container 1140px | --sk-navbar-height 60px | --sk-sidebar-width 250px

## JS API (global, from skynet-ui.js)
skToast(message, type?, durationMsOrOpts?) — type: "info"(default)|"success"|"warning"|"danger"; 3rd arg: duration ms (default 3500, 0 = sticky) OR {duration, actionText, onAction} for an action button ("Undo")
skOpenModal(id) / skCloseModal(id) — also open/close drawers and command palettes
skToggleTheme() — flips dark family ↔ light family; persisted in localStorage
skSetTheme(name) — switches to "dark"|"midnight"|"forest"|"dusk"|"contrast"|"light"|"paper"|"sky"|"rose"|"auto" (or a custom theme); persisted
skConfirm(message, opts?) → Promise<boolean> — builds a confirm modal; opts: {title, okText, cancelText, danger}
skPrompt(message, opts?) → Promise<string|null> — input dialog (null on cancel/Esc); opts: {title, okText, cancelText, placeholder, value}
skTour() — starts an on-page tour of elements marked data-sk-tour (spotlight + explainer card, Back/Next, Esc ends)
skTypewriter(el, text, msPerChar?) → Promise — types text into el (instant under reduced motion)
skSelectedRows(tableOrId) → array of selected <tr> elements of a data-sk-select table
skMarkdown(text) → HTML string — safe-subset markdown (headings, bold/italic/strike, links http(s)/mailto/#/relative only, inline + fenced code with highlighting, ul/ol, blockquote, tables, hr). Pair with class sk-prose. All input escaped.
skHighlight(code, lang) → HTML string — syntax highlighting for js|html|css|python|json; auto-applies to .sk-prose pre code.language-* blocks
skChat.append(chatElOrId, role, content, opts?) — role "user"|"assistant"|"system"; assistant renders as markdown unless opts.markdown === false; returns the message element
skChat.stream(chatElOrId, role, text, opts?) → Promise — typewriter effect, then markdown render on completion (opts.speed = ms/char)
skChat.typing(chatElOrId, show) — toggle a typing-dots bubble
skLocale({key: "text"}) — override built-in strings; keys: copied copyFail confirmTitle promptTitle cancel ok back next done stepOf prevMonth nextMonth selectAll selectRow remove
skChat.streamAsync(chatElOrId, source, opts?) → Promise — streams into an assistant bubble rendering markdown live; source: async iterable, ReadableStream (fetch body), or array of string chunks (opts.delay ms between); opts.onDone(msgEl, fullText)
skDiff(before, after) → HTML string — line diff; insert into the page directly (it renders a .sk-diff block)
skCalendar(elOrId, {year, month (0-11), events: [{date: "YYYY-MM-DD", label, color: "success|warning|danger|info"}], onSelect(dateStr)}) — month-view calendar (display, not a picker); also fires "sk-date" CustomEvent
skVirtual(elOrId, {count, itemHeight, render(i) → HTML, overscan?}) → {update(count), refresh(), scrollTo(i)} — virtualized list for huge datasets; el needs a fixed height and class sk-virtual
skScan(root?) — initialize v3.2 data-sk-* widgets inside markup added after page load
skLine(elOrId, {series: [{label, data: [numbers], color: "primary|success|warning|danger|info"}], labels: ["Mon",…], height: 200, area: true|false, smooth: true, grid: true}) — themed SVG line/area chart (from skynet-charts.js); single series shorthand: {data: [..]}. Declarative: <div data-sk-line data-sk-values="3,7,4" data-sk-labels="a,b,c" data-sk-area></div>
skHeatmap(elOrId, {values: {"YYYY-MM-DD": count, …}, weeks: 26}) — GitHub-style contribution heatmap ending today (from skynet-charts.js); cells scale to the max value
skSpark(elOrId, {data: [numbers], width: 80, height: 24, area: true|false, color}) — inline SVG line sparkline (from skynet-charts.js); declarative: <span data-sk-spark="4,7,5,9" data-sk-area></span>
skGauge(elOrId, {value, max: 100, label, size: 96, color}) — radial 270° gauge with centered value (from skynet-charts.js); declarative: <div data-sk-gauge="72" data-sk-label="Coverage"></div>
skIcon(name) → SVG string (from skynet-icons.js); skIconNames() → all 640 names. Declarative: <i data-sk-icon="name"></i> (auto-injected, inherits color + font-size)

## Data attributes (wire up behavior, no JS)
data-sk-open="id" — button opens that modal, drawer, OR command palette
data-sk-close — element inside a modal/drawer closes it (backdrop click + Esc also close)
data-sk-popover — trigger button inside .sk-popover toggles its .sk-popover-panel (outside click + Esc close)
data-sk-carousel-prev / data-sk-carousel-next — buttons inside .sk-carousel scroll the track one view
data-sk-tabs — on tab container; data-sk-tab="panel-id" — on each tab button (panel = element with that id)
data-sk-dropdown — on trigger button inside .sk-dropdown
data-sk-sidebar — button toggles .sk-sidebar on mobile
data-sk-burger — button toggles navbar links on mobile
data-sk-toast="Msg" + optional data-sk-toast-type="success|warning|danger" — button shows toast
data-sk-theme-toggle — button flips dark ↔ light theme family (persisted across page loads)
data-sk-theme="name" — button switches to that theme: dark|midnight|forest|dusk|contrast|light|paper|sky|rose|auto (persisted)
data-sk-validate — on a <form>: blocks invalid submits; bad fields get .sk-invalid + a styled .sk-error line from the browser's validationMessage (uses required/type/minlength etc.); errors clear on edit
data-sk-autogrow — on a <textarea>: height grows with content
data-sk-count — on an input/textarea with maxlength: live "37 / 200" counter appears under the field (warns near the limit)
data-sk-reveal — element fades in the first time it scrolls into view (safe without JS; skipped for reduced motion)
data-sk-autoplay="4000" — on .sk-carousel: auto-advance every N ms, wraps, pauses on hover/focus/touch, off under reduced motion
data-sk-copy="text" — button copies text to clipboard; or data-sk-copy-target="element-id" copies that element's value/text. Success toast shown automatically
data-sk-dismiss — button inside .sk-chip or .sk-alert removes it
data-sk-tip="text" — CSS-only tooltip on hover/focus (above by default; add class sk-tip-bottom to flip below; text must be short, no wrapping)
data-sk-segment — on a .sk-btn-group: clicking a button moves the .active highlight (segmented control)
data-sk-sort — on a <th>: click sorts tbody rows by that column, toggles asc/desc; numeric columns (incl. "99.9%", "$1,200") auto-detected
data-sk-filter="target-id" — on an <input>: typing hides non-matching rows (table) or direct children (list/grid) of the target
data-sk-paginate="10" — on a <table>: client-side pagination, N rows/page; controls render below the table automatically; composes with data-sk-sort and data-sk-filter
data-sk-taginput — on a div containing a text input: tag/chip input (Enter/comma adds, Backspace removes last, × on chips); data-sk-name="tags" adds a hidden form field with the comma-joined value; data-sk-value="a,b" seeds tags
data-sk-context="menu-id" — right-click on the element opens that .sk-context-menu at the cursor (any click / Esc closes)
data-sk-combobox — on div.sk-combobox: searchable select (type filters, ↑↓ + Enter or click selects into the input)
data-sk-datepicker — on div.sk-datepicker containing an input: calendar dropdown writing YYYY-MM-DD
data-sk-range-dual — on div.sk-range-dual: two-handle slider; data-sk-min/max, data-sk-values="20,80", data-sk-name="field" (hidden input "low,high")
data-sk-stepper — on div.sk-number: +/- buttons (each has data-sk-step="-1"/"1") stepping the number input inside
data-sk-banner — on .sk-banner with an id: dismissal (via its data-sk-dismiss button) is remembered in localStorage
data-sk-lightbox — on an <img> (value = optional full-size URL): click opens it full-screen; click/Esc closes
data-sk-tour="N" + data-sk-tour-text="…" — ordered tour stops for skTour()
data-sk-select — on a <table>: injects a row-selection checkbox column; data-sk-bulkbar="id" shows that .sk-bulkbar element while rows are selected (its .sk-selected-count gets the live count)
data-sk-export="table-id" — button downloads that table as CSV (selection column excluded)
data-sk-typewriter — element's own text types in the first time it scrolls into view
data-sk-scroll-top — button smooth-scrolls the window to the top
data-sk-scrollspy — on a nav/sidebar of href="#id" links: link for the section on screen gets .active automatically
data-sk-multiselect — on div.sk-multiselect wrapping a native <select multiple>: chips + filter input + checkbox panel; selections sync to the select (form-ready); data-sk-placeholder="…"
data-sk-otp — on div.sk-otp: renders N one-char boxes (data-sk-length, default 6); auto-advance, paste-split, Backspace; data-sk-name adds a hidden input; fires "sk-otp" (detail.value) when complete
data-sk-dropzone — on a <label class="sk-dropzone"> containing <input type="file">: drag-drop + click to browse; files listed with size + remove in a .sk-dropzone-files list after it (auto-created); fires "sk-files" (detail.files)
data-sk-mask="(999) 999-9999" — on an input: live format; 9=digit, a=letter, *=either, other chars literal
data-sk-sortable — on a list/container: children become drag-to-reorder; optional shared data-sk-group="name" allows dragging between containers (kanban); fires "sk-sorted"; class sk-handle inside items styles a grip
data-sk-split — on div.sk-split with two children: draggable divider is injected; add class sk-split-v for vertical; data-sk-persist="id" remembers sizes in localStorage
data-sk-calendar — on an empty div: renders the current month (see skCalendar to control it)
data-sk-promptinput — on a <form class="sk-prompt"> with a <textarea>: auto-grows, Enter submits (Shift+Enter newline), fires "sk-submit" (detail.value) and clears
data-sk-msg-actions — on a .sk-chat: assistant messages appended via skChat get a hover action row (Copy; + Regenerate if data-sk-regen is also set, firing "sk-regenerate")
data-sk-icon="name" — element renders that icon inline (needs skynet-icons.js); icon names: arrow-up arrow-down arrow-left arrow-right chevron-up chevron-down chevron-left chevron-right x check plus minus menu search settings user users home star heart bell mail calendar clock download upload trash edit copy link external eye eye-off lock sun moon info alert-triangle alert-circle help file folder image code terminal database server cloud globe phone message send filter refresh log-out grid list more-horizontal more-vertical play pause bookmark tag zap shield dollar cart credit-card wifi bar-chart sparkles arrow-up-right arrow-down-right chevrons-up chevrons-down chevrons-left chevrons-right check-circle x-circle plus-circle minus-circle circle square log-in user-plus user-check thumbs-up thumbs-down git-branch git-commit git-pull-request git-merge package layers map-pin map camera video mic volume volume-off music printer save clipboard archive inbox flag award gift coffee truck shopping-bag percent activity trending-up trending-down pie-chart target compass key unlock slash share repeat shuffle maximize minimize arrow-up-left arrow-down-left corner-up-left corner-up-right corner-down-left corner-down-right rotate-cw rotate-ccw loader check-square x-square plus-square minus-square triangle hexagon octagon box align-left align-center align-right align-justify bold italic underline type file-text file-plus folder-plus book book-open briefcase monitor smartphone tablet cpu hard-drive battery mic-off video-off wifi-off cloud-off bell-off play-circle stop-circle skip-back skip-forward fast-forward headphones sliders toggle-left toggle-right crosshair move zoom-in zoom-out at-sign hash paperclip scissors tool power droplet wind smile cloud-rain cloud-drizzle cloud-snow cloud-lightning sunrise sunset umbrella thermometer snowflake tornado phone-call phone-incoming phone-outgoing phone-missed phone-off voicemail film tv radio speaker disc airplay cast rewind pause-circle eject record clapperboard mouse keyboard bluetooth plug router webcam gamepad watch mouse-pointer pen-tool command sidebar layout columns rows table crop aperture life-buoy divide feather anchor frame ruler infinity rss chart-line chart-scatter gauge binary braces brackets function bug qr-code barcode file-minus file-x file-check file-code file-search file-image file-archive file-down file-up file-warning folder-minus folder-x folder-check folder-open heading quote strikethrough subscript superscript indent outdent list-ordered list-check pilcrow highlighter spell-check eraser shield-check shield-x shield-plus shield-off shield-alert fingerprint scan scan-line user-minus user-x user-circle contact crown graduation-cap mail-open mail-plus mail-check mail-x reply reply-all forward message-circle message-plus message-x mailbox megaphone bell-plus bell-ring share-nodes calendar-plus calendar-check calendar-x calendar-minus calendar-days alarm-clock timer hourglass history euro pound yen bitcoin wallet receipt piggy-bank banknote coins store basket scale calculator landmark gem ticket car bus bike train plane rocket ship fuel parking traffic-cone road navigation leaf tree flower mountain flame waves paw star-half orbit cloud-sun utensils pizza cake wine apple martini heart-pulse pill cross stethoscope dna microscope flask atom lamp lightbulb magnet glasses shirt backpack luggage bed door trophy medal puzzle arrow-up-circle arrow-down-circle arrow-left-circle arrow-right-circle chevron-up-circle chevron-down-circle chevron-left-circle chevron-right-circle dollar-circle percent-circle divide-circle pen-square square-dashed circle-dashed link-off image-off zap-off camera-off arrow-up-down arrow-left-right undo redo expand shrink chevrons-up-down chevrons-left-right arrow-down-to-line arrow-up-from-line sort-asc sort-desc diamond pentagon cylinder pyramid blend spline pin hand grip picture-in-picture badge bookmark-plus bookmark-check brush palette wand frown meh laugh ghost skull bot fish dice balloon candle rainbow signal locate milestone route languages accessibility podcast building warehouse hospital factory tent school library pen notebook sticky-note presentation newspaper id-card clipboard-check clipboard-list cloud-upload cloud-download cloud-check network workflow component blocks pointer-click bath shower washing-machine fan hammer paint-roller nut construction filter-x list-filter list-plus list-x panel-right panel-top panel-bottom layout-dashboard kanban gantt captions text wrap-text star-off volume-low screen-share eyedropper align-top align-bottom flip-horizontal flip-vertical sparkle circle-dot dot equal not-equal sigma pi radical plus-minus omega check-check
data-sk-transition — on <html>: smooth cross-document view transitions between same-origin pages (progressive enhancement)
data-sk-confirm="Are you sure?" — on any button/link: intercepts the click, shows the confirm dialog, proceeds only on OK (add data-sk-confirm-danger for a red OK). No custom JS needed for destructive actions
data-sk-hotkey="mod+k" — pressing the combo clicks the element (mod = Cmd on Mac / Ctrl elsewhere; also ctrl+, shift+, alt+, plain keys like "escape" or "/"; plain letters are ignored while typing in a field)
data-sk-countup — on a stat whose text starts with a number ("1,284", "$12.4k", "99.9%"): counts up from 0 when first scrolled into view (instant under reduced motion)
data-sk-timeago="2026-08-25T12:00:00Z" — renders live relative time ("3 hours ago"), absolute time in the tooltip, refreshes every minute
data-sk-toast-pos="top-right" — on <html>: reposition toasts (top-right, top-left, top-center, bottom-left, bottom-center; default bottom-right)
data-sk-wizard — on a <form> whose steps are <fieldset class="sk-wizard-step"> with <legend>s: renders a progress trail + Back/Next controls, validates each step's required fields, fires "sk-wizard-done" on the final Next (preventDefault to handle it yourself; otherwise the form submits). Optional data-sk-next-label / data-sk-prev-label / data-sk-done-label
data-sk-strength — on a password input: live 4-level strength meter + label injected after it (override labels: data-sk-strength="Too short,Weak,Okay,Good,Strong"); pairs with data-sk-count / data-sk-autogrow which are core
data-sk-compare="Label" — on a wrapper with exactly two same-size children (before, after): draggable divider revealing the second over the first; keyboard accessible (the value is the aria-label)
data-sk-kanban — on a wrapper of .sk-kanban-col columns (each with .sk-kanban-head + optional .sk-kanban-count and a .sk-kanban-body list of .sk-kanban-card items): cards drag between columns, counts stay in sync, "sk-kanban-move" fires with {card, column}
data-sk-rating — star-rating input: renders data-sk-max stars (default 5), data-sk-value pre-selects, data-sk-name adds a hidden form input, arrow keys adjust, "sk-rating" fires with {value, max}; data-sk-readonly renders a static display
data-sk-tree — on a nested <ul>: collapsible tree view with injected caret toggles (aria-expanded); data-sk-open on the root starts expanded; "sk-tree-toggle" fires with {item, open}
data-sk-infinite — sentinel for infinite scroll: fires "sk-more" each time it scrolls into view (re-arms after leaving); data-sk-margin sets the early-trigger distance (default 200px)
data-sk-share — button shares data-sk-share URL (default the page) via navigator.share, falling back to copy-to-clipboard + toast; optional data-sk-title / data-sk-text
data-sk-peek — button toggles a password input between hidden/visible; value is the input's selector (default: previous sibling); keeps aria-pressed in sync
data-sk-swipe — wrapper of .sk-swipe-content + .sk-swipe-actions: drag the content left (touch or mouse) to reveal the actions; snaps open/closed; "sk-swipe-open" / "sk-swipe-close" fire
data-sk-fullscreen — button toggles fullscreen on the selector in its value (default the whole page); aria-pressed tracks state
data-sk-progress-read — the element becomes a fixed 3px top bar tracking page scroll (reading progress)
data-sk-offline — element is hidden while online and shown when the connection drops (style with .sk-offline-banner); "sk-online"/"sk-offline" fire on document
.sk-marquee — pure-CSS logo marquee: put items in .sk-marquee-track and duplicate them once for a seamless loop; pauses on hover; --sk-marquee-duration overrides speed
data-sk-killfeed — rolling match-event feed: skKillfeed(el) returns {push, clear}; push({killer, victim, weapon, headshot, wallbang, teamkill, assist, streak, killerTeam, victimTeam}) prepends a row. data-sk-max caps visible rows (default 6), data-sk-ttl sets the fade-out delay in ms (0 keeps rows), data-sk-reverse appends oldest-first; expiry pauses while the pointer is over the feed; "sk-kill" fires with the event
data-sk-hp="72" — health bar with optional data-sk-armor overlay and data-sk-max (default 100); fill steps green/amber/red at 60% and 25%, re-renders whenever the attribute changes, exposes role="progressbar"; data-sk-quiet hides the numeric readout
data-sk-ping="34" — four signal bars coloured by round-trip time (steps at 50/100/150ms); updates live when the attribute changes; data-sk-quiet hides the ms readout
data-sk-countdown="1:45" — match clock, in seconds or m:ss / h:mm:ss; data-sk-to="<ISO date>" counts to a timestamp, data-sk-up counts up, data-sk-low sets the .sk-countdown-low threshold (default 10s); "sk-countdown-end" fires once at zero
data-sk-trend="12.4" — delta chip with arrow and colour (green up / red down); data-sk-invert flips the good direction (for latency, deaths), data-sk-suffix changes the unit (default "%")
data-sk-hotbar — inventory/loadout strip: children become .sk-slot buttons, number keys 1–9 and arrow keys select, data-sk-active pre-selects one; "sk-hotbar" fires with {index, slot}
.sk-rank + .sk-rank-bronze|silver|gold|platinum|diamond|master — tier badge; .sk-team-a/.sk-team-b/.sk-team-friendly/.sk-team-enemy tint any text (with .sk-team-dot for a swatch); .sk-hud + .sk-hud-label/.sk-hud-value is the heads-up surface
data-sk-spark="4,7,5,9" — inline SVG line sparkline (needs skynet-charts.js; add data-sk-area for a fill)
data-sk-gauge="72" — radial gauge, 0–100 by default (needs skynet-charts.js; data-sk-max="50" for other scales, data-sk-label="Coverage" for a caption)
data-sk-bar="4,8,2" — bar chart (needs skynet-charts.js; data-sk-labels for captions, data-sk-stacked / data-sk-horizontal for the other forms)
data-sk-donut="8,5,3" — donut chart (needs skynet-charts.js; data-sk-labels names the slices, data-sk-center sets the middle text)
data-sk-radar="8,6,9,4,7" — radar/spider profile (needs skynet-charts.js; data-sk-axes names the axes)
data-sk-scatter="1,2 3,5 4,3" — scatter plot of x,y pairs (needs skynet-charts.js; data-sk-xlabel / data-sk-ylabel caption the axes)
data-sk-matrix="1,5;8,2" — matrix heatmap; rows split on ";", cells on "," (needs skynet-charts.js; data-sk-rows / data-sk-cols name the axes). Renders a real table, so the numbers read without colour
data-sk-histogram="3,4,4,5,9" — binned distribution (needs skynet-charts.js; data-sk-bins sets the bin count, default 10, data-sk-xlabel captions the axis)
data-sk-bullet="72" — actual-vs-target bar (needs skynet-charts.js; data-sk-target adds the goal tick, data-sk-ranges="40,70" adds qualitative bands, data-sk-label names it)
data-sk-waterfall="5,-2,3" — running-balance waterfall, rises green and falls red with a total bar (needs skynet-charts.js; data-sk-labels names the steps)

## Components

### Button
Classes: sk-btn (base, required) + variant: sk-btn-primary | sk-btn-success | sk-btn-danger | sk-btn-outline | sk-btn-ghost. Sizes: sk-btn-sm | sk-btn-lg | sk-btn-block (full width) | sk-btn-icon (round). Loading state: add sk-btn-loading (spinner + blocks clicks). Works on <button> and <a>.
```html
<button class="sk-btn sk-btn-primary">Save</button>
```

### Button group / segmented control
div.sk-btn-group joins buttons. Add data-sk-segment for a segmented control (clicks move .active automatically).
```html
<div class="sk-btn-group" data-sk-segment><button class="sk-btn active">Day</button><button class="sk-btn">Week</button></div>
```

### Card
sk-card > optional sk-card-header (flex, title left / extras right), sk-card-body, sk-card-footer. Inside body: sk-card-title, sk-card-subtitle. Hover lift: add sk-card-hover to sk-card. Stat cards: sk-stat-label + sk-stat-value inside body.
```html
<div class="sk-card"><div class="sk-card-body">
  <h3 class="sk-card-title">Title</h3>
  <p class="sk-card-subtitle">Subtitle</p>
  <p class="text-secondary">Content</p>
</div></div>
```

### Badge
sk-badge + optional sk-badge-primary | sk-badge-success | sk-badge-warning | sk-badge-danger | sk-badge-info
```html
<span class="sk-badge sk-badge-success">Active</span>
```

### Alert
sk-alert + sk-alert-success | sk-alert-warning | sk-alert-danger | sk-alert-info
```html
<div class="sk-alert sk-alert-warning">Disk usage above 80%.</div>
```

### Form field
sk-field (wrapper, adds margin) > sk-label + sk-input|sk-select|sk-textarea + optional sk-help. Error: add sk-invalid to input, follow with div.sk-error.
```html
<div class="sk-field">
  <label class="sk-label" for="email">Email</label>
  <input class="sk-input" id="email" type="email" placeholder="name@site.com">
  <div class="sk-help">Hint text.</div>
</div>
```
Input+button joined: div.sk-input-group > input.sk-input + button.sk-btn

### Checkbox / radio
label.sk-check wrapping a bare input
```html
<label class="sk-check"><input type="checkbox" checked> Remember me</label>
<label class="sk-check"><input type="radio" name="plan"> Pro</label>
```

### Toggle switch
label.sk-toggle > input[type=checkbox] + empty span (required) + label text
```html
<label class="sk-toggle"><input type="checkbox" checked><span></span> Dark mode</label>
```

### Navbar (sticky top; collapses on mobile)
```html
<nav class="sk-navbar">
  <a href="/" class="sk-navbar-brand"><span class="sk-navbar-logo">S</span> Site</a>
  <button class="sk-navbar-burger" data-sk-burger aria-label="Menu">&#9776;</button>
  <ul class="sk-navbar-nav">
    <li><a href="/" class="active">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
  <div class="sk-navbar-end"><a href="/login" class="sk-btn sk-btn-primary sk-btn-sm">Log in</a></div>
</nav>
```
active class marks current page. sk-navbar-end right-aligns its contents.

### Sidebar layout (desktop fixed 250px; mobile slide-in)
```html
<div class="sk-layout">
  <aside class="sk-sidebar">
    <div class="sk-sidebar-title">Section</div>
    <a href="/dashboard" class="active">Dashboard</a>
    <a href="/settings">Settings</a>
  </aside>
  <main class="sk-main">
    <button class="sk-btn sk-btn-outline sk-btn-sm hide-desktop" data-sk-sidebar>&#9776; Menu</button>
    ...page content...
  </main>
</div>
```

### Table (always wrap for mobile scroll)
sk-table-wrap > table.sk-table. Modifiers on table: sk-table-hover, sk-table-striped.
```html
<div class="sk-table-wrap">
  <table class="sk-table sk-table-hover">
    <thead><tr><th>Name</th><th>Status</th></tr></thead>
    <tbody><tr><td>Job</td><td><span class="sk-badge sk-badge-success">OK</span></td></tr></tbody>
  </table>
</div>
```

### Tabs
Container div.sk-tabs[data-sk-tabs] holds button.sk-tab[data-sk-tab="panel-id"]. Panels are div.sk-tab-panel with matching id. Mark starting tab AND its panel with class active. Pill style: add sk-tabs-pills to container.
```html
<div class="sk-tabs" data-sk-tabs>
  <button class="sk-tab active" data-sk-tab="p1">First</button>
  <button class="sk-tab" data-sk-tab="p2">Second</button>
</div>
<div class="sk-tab-panel active" id="p1">One</div>
<div class="sk-tab-panel" id="p2">Two</div>
```

### Modal (place at end of body)
div.sk-modal#id > div.sk-modal-box (sizes: sk-modal-sm | sk-modal-lg) > sk-modal-header (+ button.sk-modal-x[data-sk-close]), sk-modal-body, sk-modal-footer.
```html
<button class="sk-btn sk-btn-primary" data-sk-open="m1">Open</button>
<div class="sk-modal" id="m1" role="dialog" aria-modal="true">
  <div class="sk-modal-box">
    <div class="sk-modal-header">Title <button class="sk-modal-x" data-sk-close aria-label="Close">&times;</button></div>
    <div class="sk-modal-body"><p>Content</p></div>
    <div class="sk-modal-footer">
      <button class="sk-btn sk-btn-ghost" data-sk-close>Cancel</button>
      <button class="sk-btn sk-btn-primary" data-sk-close>Save</button>
    </div>
  </div>
</div>
```

### Toast
No markup needed. JS: skToast("Saved", "success") or declarative:
```html
<button class="sk-btn" data-sk-toast="Saved!" data-sk-toast-type="success">Save</button>
```

### Dropdown
div.sk-dropdown > trigger[data-sk-dropdown] + div.sk-dropdown-menu (add sk-right to right-align) containing <a>/<button> items and hr.sk-dropdown-divider.
```html
<div class="sk-dropdown">
  <button class="sk-btn" data-sk-dropdown>Menu &#9662;</button>
  <div class="sk-dropdown-menu sk-right">
    <a href="/profile">Profile</a>
    <hr class="sk-dropdown-divider">
    <button>Sign out</button>
  </div>
</div>
```

### Drawer (slide-in panel; same wiring as modal, place at end of body)
div.sk-drawer#id (add sk-drawer-left for left side) > div.sk-drawer-box > sk-drawer-header (+ button.sk-modal-x[data-sk-close]), sk-drawer-body, sk-drawer-footer.
```html
<button class="sk-btn" data-sk-open="d1">Open</button>
<div class="sk-drawer" id="d1" role="dialog" aria-modal="true"><div class="sk-drawer-box">
  <div class="sk-drawer-header">Title <button class="sk-modal-x" data-sk-close aria-label="Close">&times;</button></div>
  <div class="sk-drawer-body">Content</div>
  <div class="sk-drawer-footer"><button class="sk-btn sk-btn-primary" data-sk-close>Done</button></div>
</div></div>
```

### Stepper (wizard progress)
div.sk-steps > div.sk-step (state: done | active | none) > div.sk-step-dot (number or &check;) + div.sk-step-label.
```html
<div class="sk-steps"><div class="sk-step done"><div class="sk-step-dot">&check;</div><div class="sk-step-label">Cart</div></div><div class="sk-step active"><div class="sk-step-dot">2</div><div class="sk-step-label">Pay</div></div></div>
```

### Timeline
div.sk-timeline > div.sk-timeline-item (dot color modifier: sk-tl-primary|success|warning|danger|info) > optional sk-timeline-time, sk-timeline-title, any content.
```html
<div class="sk-timeline"><div class="sk-timeline-item sk-tl-success"><div class="sk-timeline-time">2h ago</div><div class="sk-timeline-title">Deployed</div></div></div>
```

### Avatar group / presence dot
div.sk-avatar-group overlaps child avatars (last one can be "+N"). span.sk-presence.sk-online|sk-away|sk-busy|sk-offline wraps ONE avatar, adds status dot.
```html
<div class="sk-avatar-group"><span class="sk-avatar">AB</span><span class="sk-avatar">+5</span></div>
<span class="sk-presence sk-online"><span class="sk-avatar">SK</span></span>
```

### Callout (docs-style note; quieter than alert)
div.sk-callout (+ sk-callout-success|warning|danger|info; default edge = primary) > optional div.sk-callout-title + body.
```html
<div class="sk-callout sk-callout-warning"><div class="sk-callout-title">Careful</div>Body text.</div>
```

### File input
```html
<input class="sk-file" type="file">
```

### Sortable/filterable/paginated table (add-ons to Table above)
th[data-sk-sort] → click-sortable column. input[data-sk-filter="table-or-list-id"] → live row filter. table[data-sk-paginate="10"] → client-side pages (controls auto-render below; all three compose).
```html
<input class="sk-input mb-3" type="search" data-sk-filter="t1" placeholder="Filter…">
<div class="sk-table-wrap"><table class="sk-table" id="t1"><thead><tr><th data-sk-sort>Name</th></tr></thead><tbody>…</tbody></table></div>
```

### Popover (click-toggled rich panel)
div.sk-popover > trigger[data-sk-popover] + div.sk-popover-panel (optional div.sk-popover-title first; panel modifiers: sk-top opens above, sk-right right-aligns).
```html
<div class="sk-popover"><button class="sk-btn" data-sk-popover>Details &#9662;</button><div class="sk-popover-panel"><div class="sk-popover-title">Title</div>Content, even buttons.</div></div>
```

### Command palette (Ctrl/Cmd+K; place at end of body; ONE per page)
div.sk-cmdk#id > div.sk-cmdk-box > input.sk-cmdk-input + div.sk-cmdk-list (children = <a>/<button> commands; optional data-sk-keywords="extra words") + optional div.sk-cmdk-empty + optional div.sk-cmdk-hint. Opens via Ctrl/Cmd+K or [data-sk-open="id"]. Typing filters; ↑↓ move; Enter runs; Esc/backdrop close. Choosing an item closes the palette and runs its link/onclick/data-sk-*.
```html
<div class="sk-cmdk" id="cmdk" role="dialog" aria-modal="true" aria-label="Command palette"><div class="sk-cmdk-box">
  <input class="sk-cmdk-input" type="text" placeholder="Type a command…" aria-label="Search commands">
  <div class="sk-cmdk-list"><a href="/dashboard">Dashboard</a><button data-sk-theme-toggle>Toggle theme</button></div>
  <div class="sk-cmdk-empty">No matches.</div>
</div></div>
```

### Carousel (CSS scroll-snap; arrows optional)
div.sk-carousel (modifiers: sk-carousel-peek shows next slide's edge; sk-carousel-cols-2|-cols-3 show 2/3 per view ≥768px) > div.sk-carousel-track > div.sk-carousel-slide each. Arrow buttons anywhere inside the carousel: [data-sk-carousel-prev] / [data-sk-carousel-next].
```html
<div class="sk-carousel sk-carousel-peek"><div class="sk-carousel-track"><div class="sk-carousel-slide">…</div><div class="sk-carousel-slide">…</div></div>
<div class="flex gap-2 mt-3"><button class="sk-btn sk-btn-outline sk-btn-icon" data-sk-carousel-prev aria-label="Previous">&larr;</button><button class="sk-btn sk-btn-outline sk-btn-icon" data-sk-carousel-next aria-label="Next">&rarr;</button></div></div>
```

### Date/time inputs
Just use sk-input — color-scheme makes native pickers match the theme.
```html
<input class="sk-input" type="date"> <input class="sk-input" type="time">
```

### Tag input
div.sk-taginput[data-sk-taginput] (opts: data-sk-name="field" for form value, data-sk-value="a,b" seeds) > input[type=text] inside.
```html
<div class="sk-taginput" data-sk-taginput data-sk-name="tags"><input type="text" placeholder="Add a tag…" aria-label="Add a tag"></div>
```

### Tree view (zero JS, nested native <details>)
div.sk-tree > details (branch: summary + div.sk-tree-children) and/or <a>/.sk-tree-leaf (leaves; current = class active). Nest freely.
```html
<div class="sk-tree"><details open><summary>src</summary><div class="sk-tree-children"><a href="#" class="active">index.ts</a></div></details><a href="#">README.md</a></div>
```

### Context menu
Trigger: any element with data-sk-context="menu-id" (right-click opens). Menu (place at end of body): div.sk-context-menu#id[role=menu] > <button>/<a> items + optional <hr>.
```html
<div class="sk-card" data-sk-context="m1">Right-click me</div>
<div class="sk-context-menu" id="m1" role="menu"><button onclick="open()">Open</button><hr><button class="text-danger">Delete</button></div>
```

### Prose (rendered markdown / LLM output)
Wrap rendered markdown in class sk-prose — headings, lists, blockquotes, inline code, pre blocks, tables, links, images all styled. Combine with chat: class="sk-msg sk-msg-assistant sk-prose".
```html
<article class="sk-prose"><h2>Title</h2><p>Text with <code>code</code>…</p></article>
```

### Chat kit
div.sk-chat > div.sk-msg + variant sk-msg-user (right, accent) | sk-msg-assistant (left, surface) | sk-msg-system (centered, faint). Typing dots: <span class="sk-typing"><i></i><i></i><i></i></span> inside a message. Optional div.sk-msg-meta timestamp. Prompt bar below the chat:
```html
<div class="sk-chat">
  <div class="sk-msg sk-msg-user">Hi!</div>
  <div class="sk-msg sk-msg-assistant sk-prose"><p>Hello!</p></div>
  <div class="sk-msg sk-msg-assistant"><span class="sk-typing"><i></i><i></i><i></i></span></div>
</div>
<div class="sk-promptbar">
  <textarea class="sk-textarea" data-sk-autogrow rows="1" placeholder="Message…" aria-label="Message"></textarea>
  <button class="sk-btn sk-btn-primary">Send</button>
</div>
```

### Combobox (searchable select)
div.sk-combobox[data-sk-combobox] > input.sk-input[role=combobox][autocomplete=off] + div.sk-combobox-list of <button type=button> options (optional data-sk-value) + optional div.sk-combobox-empty.
```html
<div class="sk-combobox" data-sk-combobox>
  <input class="sk-input" type="text" name="fw" placeholder="Search…" role="combobox" aria-expanded="false" autocomplete="off">
  <div class="sk-combobox-list"><button type="button">Option A</button><button type="button">Option B</button></div>
  <div class="sk-combobox-empty">No matches.</div>
</div>
```

### Date picker
div.sk-datepicker[data-sk-datepicker] > input.sk-input (text, autocomplete=off). Calendar opens on focus; picking writes YYYY-MM-DD. (Native <input type="date" class="sk-input"> also themed — use either.)
```html
<div class="sk-datepicker" data-sk-datepicker><input class="sk-input" type="text" name="due" placeholder="YYYY-MM-DD" autocomplete="off"></div>
```

### Dual range slider
```html
<div class="sk-range-dual" data-sk-range-dual data-sk-min="0" data-sk-max="100" data-sk-values="20,80" data-sk-name="price"></div>
```
Handles + fill + "low – high" readout are generated; hidden input carries "low,high".

### Number stepper
```html
<div class="sk-number" data-sk-stepper><button type="button" data-sk-step="-1" aria-label="Decrease">&minus;</button><input class="sk-input" type="number" value="1" min="0"><button type="button" data-sk-step="1" aria-label="Increase">+</button></div>
```

### Star rating (pure CSS; write inputs HIGH→LOW, CSS reverses display)
```html
<div class="sk-rating" role="radiogroup" aria-label="Rating"><input type="radio" name="rate" id="r5" value="5"><label for="r5" aria-label="5 stars">&#9733;</label><input type="radio" name="rate" id="r4" value="4"><label for="r4" aria-label="4 stars">&#9733;</label><input type="radio" name="rate" id="r3" value="3" checked><label for="r3" aria-label="3 stars">&#9733;</label><input type="radio" name="rate" id="r2" value="2"><label for="r2" aria-label="2 stars">&#9733;</label><input type="radio" name="rate" id="r1" value="1"><label for="r1" aria-label="1 star">&#9733;</label></div>
```

### Announcement banner (place as first element in <body>)
```html
<div class="sk-banner" id="promo-1" data-sk-banner><span>News — <a href="/x">read more</a></span><button class="sk-banner-x" data-sk-dismiss aria-label="Dismiss">&times;</button></div>
```

### Lightbox
```html
<img src="thumb.jpg" data-sk-lightbox="full.jpg" alt="…">   <!-- value optional; defaults to src -->
```

### Onboarding tour
Mark stops with data-sk-tour="1|2|…" + data-sk-tour-text="explainer"; start with skTour() (e.g. onclick).

### Table extras (compose with sort/filter/paginate)
- Selection: table[data-sk-select][data-sk-bulkbar="bar-id"] + a bar: <div class="sk-bulkbar" id="bar-id"><strong><span class="sk-selected-count">0</span> selected</strong><button class="sk-btn sk-btn-sm">Action</button></div>; read rows via skSelectedRows("table-id")
- CSV: <button class="sk-btn" data-sk-export="table-id">Export CSV</button>
- Sticky header: add sk-sticky-head + a max-height style to the .sk-table-wrap
- Stat delta: <span class="sk-delta sk-delta-up">12%</span> (or sk-delta-down)

### Pricing recipe (no new CSS needed)
sk-grid sk-cols-3 of sk-card plans; add class sk-featured to the highlighted plan's card (accent ring). Inside: sk-card-body > h3.sk-card-title, div.sk-stat-value price, ul.list-none features with ✓, sk-btn-block CTA.

### Comparison table recipe
Standard sk-table in sk-table-wrap; first column = feature names (font-medium text-main), one column per product; ✓ as <span class="text-success">&check;</span>, ✗ as <span class="text-faint">&mdash;</span>.

### Charts (pure CSS, themed; set sizes with inline styles)
Bars: div.sk-bars > div.sk-bar-row (grid: label | track | value) each containing span.sk-bar-label + span.sk-bar-track > span.sk-bar[style="width: N%"] + span.sk-bar-value. Color the bar with sk-success|sk-warning|sk-danger|sk-info.
Sparkline: div.sk-spark[aria-hidden=true] > one <i style="height: N%"> per point.
Donut: div.sk-donut[style="--p: 68"] > div > div.sk-donut-label + div.sk-donut-sub. Vars: --sk-donut-size (120px), --sk-donut-hole (set to the background it sits on, default surface).
Legend: div.sk-legend > span > i.sk-legend-dot (+ color variant) + text.
```html
<div class="sk-bars"><div class="sk-bar-row"><span class="sk-bar-label">API</span><span class="sk-bar-track"><span class="sk-bar" style="width: 72%"></span></span><span class="sk-bar-value">72%</span></div></div>
<div class="sk-donut" style="--p: 68"><div><div class="sk-donut-label">68%</div><div class="sk-donut-sub">used</div></div></div>
```

### Rendering LLM/markdown output (zero dependencies)
el.innerHTML = skMarkdown(modelText) into an element with class sk-prose. Fenced code is auto-highlighted. In chat, prefer skChat.append(chat, "assistant", modelText). For streaming APIs, accumulate the text and call skChat.stream, or update el.innerHTML = skMarkdown(buffer) as chunks arrive.

### Breadcrumbs
nav.sk-breadcrumbs > <a> per ancestor + <span> for the current page. Separators added by CSS.
```html
<nav class="sk-breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><a href="/projects">Projects</a><span>Current</span></nav>
```

### Pagination
nav.sk-pagination > <a>/<button>/<span> children. Current page: class active. Disabled arrow: [disabled] (button) or class sk-disabled (link).
```html
<nav class="sk-pagination" aria-label="Pagination"><a href="?p=1">&laquo;</a><a href="?p=1">1</a><span class="active">2</span><a href="?p=3">3</a><a href="?p=3">&raquo;</a></nav>
```

### Accordion (native <details>, zero JS)
details.sk-accordion > summary + div.sk-accordion-body. Add open attr to start expanded. Same name attr on several = exclusive open.
```html
<details class="sk-accordion" open><summary>Title</summary><div class="sk-accordion-body">Content</div></details>
```

### Chip (tag)
span.sk-chip + optional variant sk-chip-primary|success|warning|danger|info. Removable: append button.sk-chip-x[data-sk-dismiss].
```html
<span class="sk-chip sk-chip-primary">frontend <button class="sk-chip-x" data-sk-dismiss aria-label="Remove">&times;</button></span>
```

### List group
div.sk-list > <a>/<button>/<div> rows (flex; ml-auto pushes badges right). Current row: class active.
```html
<div class="sk-list"><a href="/inbox" class="active">Inbox <span class="sk-badge ml-auto">12</span></a><a href="/sent">Sent</a></div>
```

### Empty state
div.sk-empty > optional sk-empty-icon (emoji/char), sk-empty-title, <p>, action button.
```html
<div class="sk-empty"><div class="sk-empty-icon">&#128230;</div><div class="sk-empty-title">No projects yet</div><p>Create one to get started.</p><button class="sk-btn sk-btn-primary sk-btn-sm">New project</button></div>
```

### Skeleton loader
sk-skeleton (block; size with inline width/height) | sk-skeleton-text modifier (thin line, stacks with spacing) | sk-skeleton-circle modifier (avatar-sized).
```html
<div class="sk-skeleton sk-skeleton-text" style="width: 60%"></div>
```

### Hero (landing-page opener)
section.sk-hero > sk-hero-title (h1), sk-hero-subtitle (p), sk-hero-actions (button row).
```html
<section class="sk-hero"><h1 class="sk-hero-title">Ship faster</h1><p class="sk-hero-subtitle">Pitch.</p><div class="sk-hero-actions"><a class="sk-btn sk-btn-primary sk-btn-lg" href="/signup">Start</a></div></section>
```

### Footer
footer.sk-footer > sk-container > sk-footer-grid (columns of sk-footer-title + links) + sk-footer-bottom (copyright bar).
```html
<footer class="sk-footer"><div class="sk-container"><div class="sk-footer-grid"><div><div class="sk-footer-title">Product</div><a href="/pricing">Pricing</a></div></div><div class="sk-footer-bottom"><span>&copy; 2026</span></div></div></footer>
```

### Range slider
```html
<input class="sk-range" type="range" min="0" max="100" value="40">
```

### Tooltip / theme toggle / copy (attribute-only, no component markup)
```html
<button class="sk-btn" data-sk-tip="Tooltip text">Hover</button>
<button class="sk-btn sk-btn-ghost sk-btn-icon" data-sk-theme-toggle aria-label="Toggle theme">&#9681;</button>
<button class="sk-btn" data-sk-copy="text to copy">Copy</button>
```

### Multi-select combobox
div.sk-multiselect[data-sk-multiselect] wrapping a native select[multiple] (options define the choices; selected attribute seeds values)
```html
<div class="sk-multiselect" data-sk-multiselect data-sk-placeholder="Pick tags…">
  <select multiple name="tags" aria-label="Tags"><option>One</option><option selected>Two</option></select>
</div>
```

### OTP / PIN input
```html
<div class="sk-otp" data-sk-otp data-sk-length="6" data-sk-name="code" aria-label="Verification code"></div>
```

### File dropzone
```html
<label class="sk-dropzone" data-sk-dropzone>
  <input type="file" multiple>
  <strong>Drop files here</strong> <span class="text-sm">or click to browse</span>
</label>
```

### Calendar (month view)
`<div data-sk-calendar></div>` renders the current month. With events/handlers use skCalendar (JS API above). Event pills take color success|warning|danger|info; on phones they collapse to dots.

### Sortable list / kanban
```html
<ul class="sk-list" data-sk-sortable>
  <li><span class="sk-handle">⋮⋮</span> Item A</li>
  <li><span class="sk-handle">⋮⋮</span> Item B</li>
</ul>
```
Kanban: give each column's list data-sk-sortable + the same data-sk-group="board".

### Split panes
```html
<div class="sk-split" data-sk-split data-sk-persist="editor" style="height: 300px">
  <div>left</div><div>right</div>
</div>
```
Vertical: add class sk-split-v. First pane width = CSS var --sk-split (default 50%).

### Masonry
div.sk-masonry > cards. 1 column on phones, 2 ≥640px, --sk-masonry-cols (default 3) ≥1024px. Pure CSS.

### Virtual scroll
```html
<div class="sk-virtual" style="height: 320px" id="log"></div>
<script>skVirtual("log", {count: 10000, itemHeight: 36, render: function (i) { return "<span class=\"px-4\">row " + i + "</span>"; }})</script>
```

### Sticky first table column
`<table class="sk-table sk-sticky-col">` inside a horizontally scrolling .sk-table-wrap — first column stays pinned. Compose with sk-sticky-head.

### AI kit 2: agent chat extras
Tool call bubble (native details, goes inside .sk-chat):
```html
<details class="sk-msg-tool"><summary>search_web(query)</summary><div>3 results…</div></details>
<details class="sk-msg-thinking"><summary>Thinking</summary><div>reasoning summary…</div></details>
```
Message actions: add data-sk-msg-actions (+ data-sk-regen) to the .sk-chat — see data attributes.
Prompt input:
```html
<form class="sk-prompt" data-sk-promptinput>
  <textarea rows="1" placeholder="Message…" aria-label="Message"></textarea>
  <button class="sk-btn sk-btn-primary" type="submit">Send</button>
</form>
```
Listen for "sk-submit" (e.detail.value), append the user message, then skChat.streamAsync the model response (pass fetch response.body directly).
Diff block: el.innerHTML = skDiff(before, after) — renders add/del lines, themed.

### Charts v2 (skynet-charts.js — line/area + heatmap; bars/donut/spark are in core, see Charts)
```html
<div id="rev"></div><script>skLine("rev", {series: [{label: "Revenue", data: [4,7,6,9], color: "primary"}], labels: ["Q1","Q2","Q3","Q4"], area: true})</script>
<div data-sk-line data-sk-values="3,7,4,9,6" data-sk-labels="Mon,Tue,Wed,Thu,Fri" data-sk-area></div>
<div id="hm"></div><script>skHeatmap("hm", {values: {"2026-08-20": 3}, weeks: 26})</script>
```

### Form wizard, input meters (v3.7)
```html
<form data-sk-wizard>
  <fieldset class="sk-wizard-step"><legend>Account</legend>
    <div class="sk-field"><label class="sk-label" for="em">Email</label><input class="sk-input" id="em" type="email" required></div>
  </fieldset>
  <fieldset class="sk-wizard-step"><legend>Profile</legend>…</fieldset>
  <fieldset class="sk-wizard-step"><legend>Done</legend>…</fieldset>
</form>
<input class="sk-input" type="password" data-sk-strength>
<textarea class="sk-input" maxlength="200" data-sk-count data-sk-autogrow></textarea>
```
Wizard controls are injected — do not add your own submit button inside the form. (data-sk-count and data-sk-autogrow are long-standing core attributes; the counter turns red past the limit since v3.7.)

### Compare slider & kanban (v3.7)
```html
<div data-sk-compare="Before vs after"><img src="before.png" alt="Before"><img src="after.png" alt="After"></div>
<div class="sk-kanban" data-sk-kanban>
  <div class="sk-kanban-col"><div class="sk-kanban-head">To do <span class="sk-kanban-count"></span></div>
    <ul class="sk-kanban-body"><li class="sk-kanban-card">Task</li></ul></div>
  <div class="sk-kanban-col"><div class="sk-kanban-head">Done <span class="sk-kanban-count"></span></div>
    <ul class="sk-kanban-body"></ul></div>
</div>
```

### Micro-charts (skynet-charts.js, v3.7)
```html
<span data-sk-spark="4,7,5,9,6,11" data-sk-area></span>
<div data-sk-gauge="72" data-sk-label="Coverage"></div>
<script>skSpark(el, {data: [4,7,5,9], area: true}); skGauge(el, {value: 34, max: 50, label: "Sprints"})</script>
```

### Accordion groups (exclusive open — zero JS)
Give sibling details the same native name attribute; opening one closes the others:
```html
<details class="sk-accordion" name="faq" open><summary>One</summary><div class="sk-accordion-body">…</div></details>
<details class="sk-accordion" name="faq"><summary>Two</summary><div class="sk-accordion-body">…</div></details>
```

### Misc
sk-avatar (initials or img inside; sizes sk-avatar-sm/sk-avatar-lg) | sk-spinner | sk-progress > sk-progress-bar (set inline width %) | sk-divider (line with centered text) | kbd (styled automatically)
```html
<span class="sk-avatar">SK</span>
<div class="sk-progress"><div class="sk-progress-bar" style="width:60%"></div></div>
<div class="sk-divider">or</div>
```

## Layout classes
sk-container — centered max-width 1140px with side padding | sk-container-fluid — full width
sk-grid — grid, 1 col mobile, gap 1rem. Modifiers: sk-cols-2 (2 cols ≥640px) | sk-cols-3 (2 ≥640px, 3 ≥1024px) | sk-cols-4 (2 ≥640px, 4 ≥1024px) | gap-0 gap-sm gap-lg
sk-grid-auto — auto-fit columns min 240px | sk-span-all — child spans full row

## Utility classes (complete list)
Display: block inline-block hidden grid flex inline-flex
Flex: flex-col flex-row flex-wrap items-start items-center items-end justify-start justify-center justify-end justify-between flex-1 grow shrink-0 gap-1 gap-2 gap-3 gap-4 gap-6 gap-8
Responsive visibility: hide-mobile (<768px) hide-desktop (≥768px)
Position: relative absolute sticky-top
Margin: m-0..8, mt-0..16, mb-0..16, ml-1..4, mr-1..4, ml-auto mr-auto mx-auto mx-2 mx-4 my-2 my-4 my-8 (steps: 0 1 2 3 4 6 8; mt/mb also 12 16)
Padding: p-0..8, pt-0..12, pb-0..16, pl-1..4, pr-1..4, px-2 px-3 px-4 px-6, py-2 py-3 py-4 py-6 py-8 py-12
Size: w-full w-auto h-full min-h-screen max-w-sm max-w-md max-w-lg max-w-xl max-w-2xl max-w-3xl
Text size: text-xs text-sm text-base text-lg text-xl text-2xl text-3xl text-4xl
Font: font-normal font-medium font-semibold font-bold font-mono
Align: text-left text-center text-right
Transform: uppercase capitalize truncate leading-tight leading-relaxed no-underline
Text color: text-main text-secondary text-muted text-primary text-success text-warning text-danger text-info text-white
Background: bg-page bg-surface bg-surface-2 bg-primary bg-success bg-warning bg-danger
Border/shape: border border-2 border-t border-b rounded rounded-sm rounded-lg rounded-full shadow shadow-lg
Other: overflow-hidden overflow-auto cursor-pointer opacity-50 opacity-75

### Tailwind-compat additions (v2.0)
Position: static fixed top-0 right-0 bottom-0 left-0 inset-0 z-0 z-10 z-20 z-30 z-40 z-50
Display: inline
Flex: flex-row-reverse flex-col-reverse flex-nowrap flex-none grow-0 items-baseline items-stretch justify-around justify-evenly self-start/center/end/stretch order-first order-last gap-5 gap-10 gap-12 gap-x-2/4/6 gap-y-2/4/6
Grid: grid-cols-1..6 grid-cols-12 col-span-1..6 col-span-full place-items-center
Spacing: m/p-5,10,12,16; mt/mb-5,10,20,24; pt-16/20/24 pb-20/24 px-5/8/10 py-10/16/20/24 mx-6 my-6 my-12 ml/mr-6,8 pl/pr-6,8
Space-between children: space-y-1/2/3/4/6/8 space-x-1/2/3/4/6/8
Sizing: w-1/2 w-1/3 w-2/3 w-1/4 w-3/4 w-fit w-screen w-4..w-64 (4,6,8,10,12,16,24,32,48,64) min-w-0 h-auto h-screen h-4..h-64 (same steps) max-h-full max-h-screen max-w-full max-w-none max-w-4xl/5xl/6xl/7xl
Type: text-5xl text-6xl italic not-italic underline line-through font-light font-extrabold tracking-tight/wide/wider leading-none list-none list-disc list-decimal whitespace-nowrap whitespace-pre-wrap break-words break-all text-justify align-top/middle/bottom lowercase normal-case line-clamp-1/2/3 text-faint
Bg/border: bg-transparent bg-info border-0 border-l border-r border-dashed border-dotted border-primary/success/warning/danger/info divide-y divide-x rounded-none rounded-xl rounded-2xl rounded-t rounded-b
Effects: shadow-sm shadow-none opacity-0 opacity-25 opacity-100 transition duration-150/300/500
Interactivity: select-none pointer-events-none cursor-default cursor-not-allowed resize-none appearance-none
Media: object-cover object-contain aspect-square aspect-video
Overflow: overflow-y-auto overflow-x-auto overflow-x-hidden overflow-y-hidden
A11y: sr-only
Responsive (mobile-first, write like Tailwind — class="grid grid-cols-1 md:grid-cols-3"):
  sm: (≥640px) / md: (≥768px) / lg: (≥1024px) variants exist for: hidden block flex grid inline-flex flex-row flex-col grid-cols-2/3/4 (md+lg also 5/6, col-span-2) w-auto w-full w-1/2 (md+lg also w-1/3) text-left text-center items-center justify-between (sm+md)
  xl:/2xl:/max-sm:/max-md:/max-lg: sets are in the parity pack below. NO other responsive variants exist — for anything else use sk-grid sk-cols-2/3/4 (auto-responsive) or restructure.

### Tailwind parity pack (v3.2)
Transforms (composable): scale-0/50/75/90/95/100/105/110/125/150 rotate-0/3/6/12/45/90/180 -rotate-3/6/12/45/90 translate-x-1/2/4/8 translate-y-1/2/4/8 (+negative -translate-x/y-1/2/4) origin-center/top/bottom/left/right transform-none
Filters: blur-sm blur blur-lg grayscale brightness-75/90/110/125 contrast-125 saturate-150 invert filter-none backdrop-blur-sm backdrop-blur backdrop-blur-lg backdrop-blur-none
Gradients (semantic stops): bg-gradient-to-t/tr/r/br/b/bl/l/tl + from-/via-/to- with primary primary-soft success warning danger info surface surface-2 bg transparent (via-: primary primary-soft surface info only)
Animations: animate-spin animate-ping animate-pulse animate-bounce animate-none
Ring: ring ring-0/1/2/4 + ring-primary/success/warning/danger/info/border (color via --sk-ring)
States: hover:bg-surface hover:bg-surface-2 hover:bg-primary hover:bg-primary-soft hover:bg-transparent hover:text-primary hover:text-default hover:text-muted hover:underline hover:no-underline hover:opacity-80/100 hover:shadow-md/lg hover:scale-105/110 hover:-translate-y-1 hover:border-primary hover:ring focus:outline-none focus:ring focus:border-primary active:scale-95 active:opacity-80 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed
Group (class "group" on parent): group-hover:block/flex/hidden/visible/opacity-100/underline/text-primary/text-default/scale-105/translate-x-1 group-focus:opacity-100
Peer (class "peer" on control, targets AFTER it): peer-checked:block/hidden/flex/text-primary/border-primary peer-focus:text-primary/ring peer-disabled:opacity-50 peer-placeholder-shown:hidden
Negative margins: -m-1/2/4 -mt-1/2/4/6/8/12/16 -mb-1/2/4/8 -ml-1/2/4 -mr-1/2/4 -mx-2/4/6 -my-2/4
Logical (RTL-aware): ps-0..8 pe-0..8 ms-0..8 me-0..8 (0,1,2,3,4,6,8) ms-auto me-auto text-start text-end border-s border-e rounded-s rounded-e
Grid: grid-rows-1/2/3/4/6 row-span-1/2/3/full grid-flow-row/col/dense auto-cols-fr/auto auto-rows-fr/auto/min justify-items-start/center/end/stretch place-content-center col-start-1/2/3 row-start-1/2
Flex: basis-0/auto/full basis-1/2 basis-1/3 basis-2/3 basis-1/4
Shadows: shadow shadow-md shadow-lg shadow-xl shadow-2xl shadow-inner (plus existing shadow-sm shadow-none)
Scroll/snap: scroll-smooth scroll-mt-16/20/24 snap-x snap-y snap-both snap-mandatory snap-proximity snap-start snap-center snap-end snap-none overscroll-contain overscroll-none
Transitions: transition-none transition-colors transition-opacity transition-transform transition-shadow delay-75/100/150/300/500 ease-linear ease-in ease-out ease-in-out
Columns: columns-1/2/3/4 break-inside-avoid
Type: leading-snug/normal/loose leading-5/6/7/8 text-balance text-pretty text-nowrap tabular-nums underline-offset-2/4 decoration-dotted/dashed
Sizing: size-4/5/6/8/10/12/16 min-h-0 min-h-full min-w-full
Misc: visible invisible isolate will-change-transform accent-primary caret-primary outline-none mix-blend-multiply/screen/overlay bg-cover bg-contain bg-center bg-top bg-no-repeat bg-fixed pointer-events-auto select-text select-all cursor-grab cursor-grabbing
Breakpoints: xl: (≥1280px) for hidden block flex grid flex-row grid-cols-2..6 col-span-2 w-auto w-1/2 text-left; 2xl: (≥1536px) for hidden block flex grid grid-cols-3/4/6; max-sm:/max-md: for hidden block flex-col w-full (max-sm also text-center); max-lg: for hidden block

## Converting Tailwind CSS markup to Skynet UI
Skynet UI ships a Tailwind-compat utility layer (above): most structural Tailwind classes work unchanged. Apply these rules IN ORDER:
1. COMPONENTS FIRST — replace Tailwind component recipes with Skynet components instead of rebuilding them from utilities:
   - Button (`px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 font-medium`) → `sk-btn sk-btn-primary` (variants: sk-btn-success/danger/outline/ghost; sizes sk-btn-sm/lg)
   - Card/panel (`bg-white dark:bg-gray-800 rounded-lg shadow p-6`) → `sk-card` > `sk-card-body`
   - Input (`border border-gray-300 rounded px-3 py-2 focus:ring…`) → `sk-input` (also sk-select, sk-textarea, sk-label, sk-field wrapper)
   - Badge/pill (`text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-800`) → `sk-badge sk-badge-success`
   - Navbars, sidebars, modals, dropdowns, tabs, toasts, tables, accordions, tooltips, avatars, alerts → use the Skynet components documented in this file, never utility rebuilds
2. COLORS ARE SEMANTIC, never palette-literal, so all 8 themes keep working:
   - bg-white / bg-gray-50 (light) and bg-gray-800/900, bg-slate-*/zinc-* (dark) → `bg-surface` (panels) or `bg-page` (page background); hovered rows / inset wells → `bg-surface-2`
   - text-gray-900 / text-white → `text-main` (or omit — it's the default); text-gray-600/700 or text-gray-300 → `text-secondary`; text-gray-400/500 → `text-muted`
   - border-gray-* (any shade) → `border` (theme supplies the color)
   - Brand accents (indigo/blue/violet-600 etc.) → `text-primary` / `bg-primary` / sk-btn-primary; green/emerald → success; yellow/amber/orange → warning; red/rose → danger; sky/cyan → info
3. DELETE every `dark:` variant — theming is automatic via data-theme.
4. DELETE `hover:` / `focus:` / `focus-visible:` variants — Skynet components carry their own states (a needed bare hover effect on a card → `sk-card-hover`).
5. RESPONSIVE: sm:/md:/lg:/xl:/2xl: and max-sm:/max-md:/max-lg: exist for the listed sets only. Grids are often simpler as `sk-grid sk-cols-2/3/4` (responsive by default, no prefixes needed).
6. ARBITRARY VALUES (`w-[347px]`, `bg-[#1da1f2]`, `text-[13px]`) → keep them — the runtime generates the CSS (supported prefixes/variants listed in the rules above). Unsupported prefixes → `style=""`.
7. NOW SUPPORTED via the parity pack: ring, backdrop-blur, bg-gradient-to-* (use semantic from-/to- colors), scale/rotate/translate, animate-spin/ping/pulse/bounce, group-hover, peer-checked/focus, negative margins, ps/pe/ms/me. Arbitrary VALUES now work at runtime (see rules above). Still unsupported: arbitrary variants (`[&>li]:…`), aria-*/data-* variants, opacity slash syntax (`bg-primary/50` → bg-primary-soft) — drop or inline-style those.
8. Spacing scale matches Tailwind (n × 0.25rem). Available steps: 0–8 everywhere, plus 10/12/16/20/24 on the common axes listed above — snap odd steps to the nearest available.

## Page skeleton
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page</title>
  <link rel="stylesheet" href="https://skynetui.com/skynet-ui.css">
</head>
<body>
  <nav class="sk-navbar">...</nav>
  <div class="sk-container py-8">...</div>
  <script src="https://skynetui.com/skynet-ui.js" defer></script>
</body>
</html>
```