v3.13.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-full.txt (index at /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-full.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-full.txt MCP server ↓

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-full.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/skynet-ui.css">
<script src="https://skynetui.com/skynet-ui.js" defer></script>

These URLs auto-update — every site using them gets new components and fixes as they ship. Need a frozen build? Pin the immutable /v3.13.0/ URLs with SRI.

latest CSS latest JS Pinned versions are immutable; bare URLs track latest.

MCP server 15 tools

Skynet UI hosts a Model Context Protocol server at https://skynetui.com/mcp. Connect it once and your agent stops guessing: it can search the reference, validate the markup it writes, convert Tailwind pages, pull ready-made patterns and starter templates, inline icons, and derive a full custom theme from a single hex — all live, always matching the deployed version. Full tool reference on the MCP page.

Connect your agent

claude mcp add --transport http skynet-ui https://skynetui.com/mcp

Settings → Connectors → Add custom connector, then paste the server URL:

https://skynetui.com/mcp

Add to .cursor/mcp.json (project) or ~/.cursor/mcp.json (global):

{
  "mcpServers": {
    "skynet-ui": { "url": "https://skynetui.com/mcp" }
  }
}

Plain JSON-RPC over streamable HTTP — no auth, no session state required. Point any MCP client at the URL, or try it with curl:

curl -X POST https://skynetui.com/mcp -H "content-type: application/json" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call",
       "params":{"name":"get_version","arguments":{}}}'

Learn & search

Orientation and lookup — the agent reads only what it needs instead of the whole reference.

get_reference search_reference search_classes get_example get_version

Build

Working material on demand: nine starter templates, copy-paste page sections, 640 inline icons, and theme CSS from one hex.

get_template get_pattern list_icons get_icon get_theme_css make_theme

Check & convert

Catch invented class names before they ship, convert Tailwind markup server-side, and verify WCAG contrast.

validate_markup convert_tailwind check_contrast
Also on the server

Three ready-made prompts (build_page, convert_tailwind_page, custom_theme) and browsable resources: the full LLM reference, the class inventory, all nine patterns, all nine starter templates, and the email kit. No API key, no rate-limit gymnastics — it runs on the same edge as the CDN.

Components
80+
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