# Skynet UI — LLM reference (v3.0.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: `` and `` (local copies), or from the CDN: `https://skynetui.com/v3.0.0/skynet-ui.css` and `https://skynetui.com/v3.0.0/skynet-ui.js` (minified: `skynet-ui.min.css`/`.min.js`; SRI hashes at `/v3.0.0/sri.txt`; pin a version; bare `https://skynetui.com/skynet-ui.css` = latest). Always include ``. - Dark theme is the default; no class needed. Built-in alternatives via `data-theme` on `` — 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 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: variants for a listed set, line-clamp, sr-only, …) — see "Tailwind-compat additions" and the conversion guide at the end of this file. - Do not invent class names not listed here. - AI agents can also consume this framework via MCP: streamable-HTTP server at https://skynetui.com/mcp (tools: get_reference, get_example). 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 — builds a confirm modal; opts: {title, okText, cancelText, danger} skPrompt(message, opts?) → Promise — 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 elements of a data-sk-select table ## 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
: 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 ``` ### Combobox (searchable select) div.sk-combobox[data-sk-combobox] > input.sk-input[role=combobox][autocomplete=off] + div.sk-combobox-list of
No matches.
``` ### Date picker div.sk-datepicker[data-sk-datepicker] > input.sk-input (text, autocomplete=off). Calendar opens on focus; picking writes YYYY-MM-DD. (Native also themed — use either.) ```html
``` ### Dual range slider ```html
``` Handles + fill + "low – high" readout are generated; hidden input carries "low,high". ### Number stepper ```html
``` ### Star rating (pure CSS; write inputs HIGH→LOW, CSS reverses display) ```html
``` ### Announcement banner (place as first element in ) ```html
News — read more
``` ### Lightbox ```html … ``` ### 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:
0 selected
; read rows via skSelectedRows("table-id") - CSV: - Sticky header: add sk-sticky-head + a max-height style to the .sk-table-wrap - Stat delta: 12% (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 ✓, ✗ as —. ### Breadcrumbs nav.sk-breadcrumbs > per ancestor + for the current page. Separators added by CSS. ```html ``` ### Pagination nav.sk-pagination > / ``` ### List group div.sk-list > / ``` ### 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
``` ### Hero (landing-page opener) section.sk-hero > sk-hero-title (h1), sk-hero-subtitle (p), sk-hero-actions (button row). ```html

Ship faster

Pitch.

Start
``` ### Footer footer.sk-footer > sk-container > sk-footer-grid (columns of sk-footer-title + links) + sk-footer-bottom (copyright bar). ```html ``` ### Range slider ```html ``` ### Tooltip / theme toggle / copy (attribute-only, no component markup) ```html ``` ### 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 SK
or
``` ## 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) NO other responsive variants exist — for anything else use sk-grid sk-cols-2/3/4 (auto-responsive) or restructure. ## 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: keep sm:/md:/lg: prefixes only for the variants listed above; map `xl:`→`lg:`. 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]`) → nearest utility, or `style=""` when exactness matters. 7. UNSUPPORTED (ring-*, backdrop-*, bg-gradient-* except the hero's built-in glow, transform/scale/rotate, animate-*, group-*, peer-*) → drop them; use `style=""` only if visually essential. 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 Page
...
```