atlas

Atlas

The shadcn for agent UI. A framework-agnostic design language for dense, AMOLED-black, multi-surface interfaces — dashboards, chat surfaces, autonomous workflow tools, landing pages, mobile apps. One skill for agents, one reference CSS file for humans.

ui.pacifio.dev  ·  Get started  ·  Components  ·  Foundations  ·  Patterns  ·  Mockups  ·  Discord

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

---

What Atlas actually is

Atlas is a design language, not a CSS framework you bolt on. It's:

1. A Claude Code skill (skills/atlas/) — markdown rules + one reference CSS file that teaches any coding agent the Atlas aesthetic, tokens, vocabulary, and composition recipes.
2. A reference CSS implementation (colors_and_type.css) — 180+ tokens and 50+ .atlas-* classes. Works as-is for plain HTML; translates cleanly to any other stack.
3. A live kitchen-sink site at ui.pacifio.dev — 55+ pages rendering every component, pattern, and four full-app mockups. One-shot generated by an agent reading the skill.

Your agent reads the rules and generates code that fits your stack — shadcn, Tailwind, raw HTML, React with CSS Modules, Vue, Svelte. The reference CSS is not required.

---

Live site

All these pages are browsable at ui.pacifio.dev:

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

Every component page has a "Copy rules" button in the inspector that drops a complete markdown spec (anatomy + tokens + dos/donts + Atlas core rules) on your clipboard — paste it into any agent chat and get faithful Atlas output.

---

Install

1. As a Claude Code skill (recommended)

# 1. Register this repo as a marketplace
/plugin marketplace add pacifio/ui

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

Your agent now reads the Atlas skill on every UI task and generates code in your target stack. What gets loaded:

skills/atlas/
├── SKILL.md                    # entry rules + activation protocol
├── colors_and_type.css         # reference implementation (not a dependency)
└── references/
    ├── tokens.md               # every CSS variable
    ├── components.md           # every .atlas-* 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 + one CSS file. Point the agent at skills/atlas/ in this repo and tell it to read SKILL.md first. No proprietary format, no vendor lock-in.

# Clone and reference from your project
git clone https://github.com/pacifio/ui.git .atlas-skill
# Then in your agent chat:
# "Read .atlas-skill/skills/atlas/SKILL.md and generate a deploy dashboard."

3. As a raw stylesheet (no agent, plain HTML)

curl -o atlas.css https://raw.githubusercontent.com/pacifio/ui/main/skills/atlas/colors_and_type.css

Then:

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