kairoz

Kairoz

The shadcn for AI tooling. A framework-agnostic design system for AI and agent interfaces — dense, AMOLED-black, multi-surface. 180+ tokens, 50+ component classes. Dashboards, chat surfaces, autonomous workflows, landing pages, mobile apps. One skill teaches agents the system. One CSS file lets humans build with it directly.

kairoz-live.vercel.app  ·  Get started  ·  Components  ·  Foundations  ·  Patterns  ·  Mockups  ·  Contact

<link rel="stylesheet" href="colors_and_type.css" />
<button class="kairoz-btn kairoz-btn-primary">Ship it</button>

---

What Kairoz actually is

Kairoz is a design language — not another CSS framework you wire up and hope for the best. It breaks down into three pieces:

1. A Claude Code skill (skills/kairoz/) — markdown rules and a reference CSS file that give any coding agent a complete understanding of the Kairoz aesthetic: tokens, vocabulary, composition patterns, and the reasoning behind each constraint.
2. A reference CSS implementation (colors_and_type.css) — 180+ tokens and 50+ .kairoz-* classes. Drop it into plain HTML and it works. Translate it to any other stack and it still holds.
3. A live app site at kairoz-live.vercel.app — 55+ pages covering every component, pattern, and four complete app mockups. The entire site was generated in a single pass by an agent reading the skill.

The agent absorbs the rules and produces code native to your stack — shadcn, Tailwind, raw HTML, React with CSS Modules, Vue, Svelte. The reference CSS is there if you want it, never required.

---

Live site

Every page is live and browsable at kairoz-live.vercel.app:

Section	What's there
Get started	Install, per-stack translation examples, FAQ
Foundations	Colors, typography, spacing, radius, shadows, motion, icons
Components	36 component pages — buttons, inputs, cards, dialogs, tabs, tables, stepper, toast, command palette, etc.
Patterns	Landing, agent chat, mobile app, 3-pane shell, dashboard, settings
Mockups	Full-app UIs — Email, E-commerce, Multi-agent, News & polls

Each component page includes a "Copy rules" button in the inspector. One click captures the full markdown spec — anatomy, tokens, dos/donts, and Kairoz core rules — ready to paste into any agent conversation for precise output.

---

Install

1. As a Claude Code skill (recommended)

# 1. Register this repo as a marketplace
/plugin marketplace add sujal7103/kairoz

# 2. Install the kairoz plugin from it
/plugin install kairoz@kairoz-ui

From here on, every UI task triggers the Kairoz skill. The agent reads the system, then generates code matched to your stack. Here is what gets loaded:

skills/kairoz/
├── SKILL.md                    # entry rules + activation protocol
├── colors_and_type.css         # reference implementation (not a dependency)
└── references/
    ├── tokens.md               # every CSS variable
    ├── components.md           # every .kairoz-* class + HTML snippet
    ├── theming.md              # dark/light + shadcn alias table
    ├── patterns.md             # 3-pane shell, content tone, icon rules
    ├── responsive.md           # multi-surface, device frames, container queries
    ├── motion.md               # easing tokens, durations, overlay rules
    ├── lessons.md              # 20 gotchas from real builds (button resets,
    │                           #  shadow-per-theme, pulse-only-opacity, etc.)
    └── examples.md             # 10 copy-ready composition snippets

2. With any other coding agent (Cursor, Windsurf, Cody, Aider…)

The skill is plain markdown and one CSS file — nothing proprietary. Point your agent at skills/kairoz/ in this repo. Tell it to start with SKILL.md. That is the entire setup.