v2.1.0 · built for LLMs

The UI kit your AI can learn from one URL

Skynet UI is a two-file, zero-build CSS + JS framework designed to be written by language models. One compact reference — skynetui.com/llms.txt — teaches any LLM every component, all 8 themes, and every behavior. A Tailwind-compat utility layer means models can also convert existing Tailwind pages almost 1:1.

1 · Build something new

Paste this into Claude, ChatGPT, Cursor — any model with web access. The reference teaches it the whole framework.

Read https://skynetui.com/llms.txt - it documents the
Skynet UI framework. Then build me a modern, responsive
[landing page / dashboard / settings page] using Skynet UI,
including the two CDN tags it specifies.
View llms.txt

2 · Or convert a Tailwind page

v2.0 ships Tailwind-compatible utilities plus step-by-step conversion rules in the reference — the result is smaller markup that all 8 themes restyle for free.

Read https://skynetui.com/llms.txt, especially the
"Converting Tailwind CSS markup" section. Convert the
following Tailwind page to Skynet UI, preserving the
layout: [paste your HTML]
Browse components
The only install — two tags, no build step
<link rel="stylesheet" href="https://skynetui.com/v2.1.0/skynet-ui.css">
<script src="https://skynetui.com/v2.1.0/skynet-ui.js" defer></script>
latest CSS latest JS Pinned versions are immutable; bare URLs track latest.
Components
50+
Dependencies
0
Build steps
0
Context for an LLM
1 URL

Buttons

Base class .sk-btn plus a variant. Sizes: .sk-btn-sm, .sk-btn-lg, .sk-btn-block.

.sk-btn-loading shows a spinner and blocks clicks. .sk-btn-group joins buttons; add data-sk-segment and clicks move the .active highlight automatically.

Badges & alerts

Default Primary Success Warning Danger Info
Heads up — this is an informational message.
Deployment finished without errors.
Disk usage is above 80%.
Connection to the database was lost.

Cards

Structure with .sk-card-header, .sk-card-body, .sk-card-footer. Add .sk-card-hover for a lift effect. These three carry data-sk-reveal, so they fade in the first time you scroll to them.

Simple card

Just a body, nothing else

Cards are the basic building block for grouping content on dark backgrounds.

Project status Live

Header and footer sections are optional. This one shows a progress bar.

SK
Skynet
Administrator

Combine avatars, badges, and utilities to build profile cards in seconds.

Forms & toggles

Contact form

We never share your email. The form uses data-sk-validate — try submitting it empty.

Settings

Plan
Enter a valid email address.

Tables

Wrap in .sk-table-wrap so wide tables scroll sideways on phones. Add .sk-table-hover and/or .sk-table-striped. New: data-sk-sort on a <th> makes the column click-sortable, and an input with data-sk-filter="table-id" live-filters the rows.

ServiceRegionUptimeStatus
api-gateway eu-west-1 99.98% Healthy
worker-pool eu-west-1 99.71% Degraded
legacy-cron us-east-2 91.02% Down
static-cdn global 100% Healthy

Tabs

Underline tabs. Buttons get data-sk-tab="panel-id"; panels get matching ids. No JS to write.

Usage panel content. Panels fade in when activated.

Billing panel content goes here.

Pill-style tabs — add .sk-tabs-pills to the container.

Weekly view.

Monthly view.

Modals, drawers & toasts

Accordion

Built on the native <details> element — zero JavaScript. Add open to expand one by default.

Does it need any JavaScript?
No — the accordion uses the browser's built-in <details>/<summary> elements, so it works even before skynet-ui.js loads.
Can several stay open at once?
Yes, each accordion is independent. If you want exclusive behavior, give them the same name attribute (modern browsers close the others automatically).
How do I style the body?
Put your content in a .sk-accordion-body div right after the summary — anything can go inside.

Chips & tooltips

default frontend passing flaky deprecated beta

Tooltips are pure CSS: put data-sk-tip="text" on anything. Add .sk-tip-bottom to flip below.

Popovers & command palette

Popovers are click-toggled rich panels — like a dropdown, but for content instead of menu items. Outside click and Esc close them.

Usage-based billing
You're charged only for the compute you use, metered per second. The first 100 hours each month are free.
Delete workspace?

This removes all projects and members.

The command palette opens with Ctrl+K (or ⌘K), or from any data-sk-open button. Type to filter, ↑↓ to move, Enter to run.

Stepper & timeline

.sk-steps — mark completed steps done and the current one active.

✓
Cart
✓
Address
3
Shipping
4
Payment
5
Done

.sk-timeline — color the dots with sk-tl-success, sk-tl-danger, etc.

2 minutes ago
Deploy finished

v2.1 rolled out to all regions.

1 hour ago
Latency warning

p95 briefly exceeded 800ms in eu-west-1.

Yesterday
New API key created

Key prod-7f3a added by admin.

3 days ago
Project created

Groups & avatars

.sk-avatar-group overlaps avatars; .sk-presence + sk-online/away/busy/offline adds a status dot.

AB CD EF +5
ON AW BY OF

Callouts

Docs-style notes with a colored edge — quieter than alerts, with an optional .sk-callout-title.

Note
The default edge uses the primary color. Anything can go in the body.
Careful
Renaming the CSS variables breaks every component that uses them.
No title needed — a single line works fine too.

Lists & empty state

.sk-list — a bordered stack of links, buttons, or divs.

📥 Inbox 12 📤 Sent 📝 Drafts 3
Archive (plain row)

.sk-empty — placeholder for screens with no data yet.

📦
No projects yet

Create your first project to get started.

Skeleton loaders

Shimmering placeholders while real content loads. Size them with utilities or inline widths.

Grid system

.sk-grid is one column on phones. .sk-cols-2/3/4 add columns from 640px / 1024px up. .sk-grid-auto auto-fits as many 240px columns as fit.

1
2
3
.sk-span-all — full row
auto
auto
auto
auto

Misc

A SK XL Press Ctrl + K to search
or continue with