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:
- 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.
- 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.
- 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>
