[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-2083":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":17,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":15,"starSnapshotCount":15,"syncStatus":14,"lastSyncTime":28,"discoverSource":29},2083,"ui","pacifio\u002Fui","pacifio","The shadcn for agent UI. A framework-agnostic design language for dense, AMOLED-black, multi-surface interfaces","https:\u002F\u002Fui.pacifio.dev\u002F",null,"TypeScript",138,18,2,0,1,3,7,3.84,"MIT License",false,"main",true,[],"2026-06-12 02:00:36","# Atlas\n\n> **The shadcn for agent UI.**\n> A framework-agnostic design language for dense, AMOLED-black, multi-surface\n> interfaces — dashboards, chat surfaces, autonomous workflow tools, landing\n> pages, mobile apps. One skill for agents, one reference CSS file for humans.\n\n\u003Cp>\n  \u003Ca href=\"https:\u002F\u002Fui.pacifio.dev\">\u003Cstrong>ui.pacifio.dev\u003C\u002Fstrong>\u003C\u002Fa>\n   · \n  \u003Ca href=\"https:\u002F\u002Fui.pacifio.dev\u002Fget-started\">Get started\u003C\u002Fa>\n   · \n  \u003Ca href=\"https:\u002F\u002Fui.pacifio.dev\u002Fcomponents\u002Fbutton\">Components\u003C\u002Fa>\n   · \n  \u003Ca href=\"https:\u002F\u002Fui.pacifio.dev\u002Ffoundations\u002Fcolors\">Foundations\u003C\u002Fa>\n   · \n  \u003Ca href=\"https:\u002F\u002Fui.pacifio.dev\u002Fpatterns\u002Flanding\">Patterns\u003C\u002Fa>\n   · \n  \u003Ca href=\"https:\u002F\u002Fui.pacifio.dev\u002Fmockups\u002Femail\">Mockups\u003C\u002Fa>\n   · \n  \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002FBF7ngVQuCS\">Discord\u003C\u002Fa>\n\u003C\u002Fp>\n\n```html\n\u003Clink rel=\"stylesheet\" href=\"colors_and_type.css\" \u002F>\n\u003Cbutton class=\"atlas-btn atlas-btn-primary\">Ship it\u003C\u002Fbutton>\n```\n\n---\n\n## What Atlas actually is\n\n**Atlas is a design *language*, not a CSS framework you bolt on.** It's:\n\n1. A **Claude Code skill** (`skills\u002Fatlas\u002F`) — markdown rules + one reference CSS\n   file that teaches any coding agent the Atlas aesthetic, tokens, vocabulary,\n   and composition recipes.\n2. A **reference CSS implementation** (`colors_and_type.css`) — 180+ tokens and\n   50+ `.atlas-*` classes. Works as-is for plain HTML; translates cleanly to any\n   other stack.\n3. A **live kitchen-sink site** at **[ui.pacifio.dev](https:\u002F\u002Fui.pacifio.dev)** — 55+ pages rendering every\n   component, pattern, and four full-app mockups. One-shot generated by an agent\n   reading the skill.\n\n> Your agent reads the rules and generates code that fits **your** stack —\n> shadcn, Tailwind, raw HTML, React with CSS Modules, Vue, Svelte. The reference\n> CSS is not required.\n\n---\n\n## Live site\n\nAll these pages are browsable at **[ui.pacifio.dev](https:\u002F\u002Fui.pacifio.dev)**:\n\n| Section | What's there |\n|---|---|\n| [**Get started**](https:\u002F\u002Fui.pacifio.dev\u002Fget-started) | Install, per-stack translation examples, FAQ |\n| [**Foundations**](https:\u002F\u002Fui.pacifio.dev\u002Ffoundations\u002Fcolors) | Colors, typography, spacing, radius, shadows, motion, icons |\n| [**Components**](https:\u002F\u002Fui.pacifio.dev\u002Fcomponents\u002Fbutton) | 36 component pages — buttons, inputs, cards, dialogs, tabs, tables, stepper, toast, command palette, etc. |\n| [**Patterns**](https:\u002F\u002Fui.pacifio.dev\u002Fpatterns\u002Flanding) | Landing, agent chat, mobile app, 3-pane shell, dashboard, settings |\n| [**Mockups**](https:\u002F\u002Fui.pacifio.dev\u002Fmockups\u002Femail) | Full-app UIs — [Email](https:\u002F\u002Fui.pacifio.dev\u002Fmockups\u002Femail), [E-commerce](https:\u002F\u002Fui.pacifio.dev\u002Fmockups\u002Fecommerce), [Multi-agent](https:\u002F\u002Fui.pacifio.dev\u002Fmockups\u002Fmulti-agent), [News & polls](https:\u002F\u002Fui.pacifio.dev\u002Fmockups\u002Fnews) |\n\nEvery component page has a **\"Copy rules\"** button in the inspector that drops\na complete markdown spec (anatomy + tokens + dos\u002Fdonts + Atlas core rules) on\nyour clipboard — paste it into any agent chat and get faithful Atlas output.\n\n---\n\n## Install\n\n### 1. As a Claude Code skill (recommended)\n\n```bash\n# 1. Register this repo as a marketplace\n\u002Fplugin marketplace add pacifio\u002Fui\n\n# 2. Install the atlas plugin from it\n\u002Fplugin install atlas@atlas-ui\n```\n\nYour agent now reads the Atlas skill on every UI task and generates code in\nyour target stack. What gets loaded:\n\n```\nskills\u002Fatlas\u002F\n├── SKILL.md                    # entry rules + activation protocol\n├── colors_and_type.css         # reference implementation (not a dependency)\n└── references\u002F\n    ├── tokens.md               # every CSS variable\n    ├── components.md           # every .atlas-* class + HTML snippet\n    ├── theming.md              # dark\u002Flight + shadcn alias table\n    ├── patterns.md             # 3-pane shell, content tone, icon rules\n    ├── responsive.md           # multi-surface, device frames, container queries\n    ├── motion.md               # easing tokens, durations, overlay rules\n    ├── lessons.md              # 20 gotchas from real builds (button resets,\n    │                           #  shadow-per-theme, pulse-only-opacity, etc.)\n    └── examples.md             # 10 copy-ready composition snippets\n```\n\n### 2. With any other coding agent (Cursor, Windsurf, Cody, Aider…)\n\nThe skill is plain markdown + one CSS file. Point the agent at\n`skills\u002Fatlas\u002F` in this repo and tell it to read `SKILL.md` first.\nNo proprietary format, no vendor lock-in.\n\n```bash\n# Clone and reference from your project\ngit clone https:\u002F\u002Fgithub.com\u002Fpacifio\u002Fui.git .atlas-skill\n# Then in your agent chat:\n# \"Read .atlas-skill\u002Fskills\u002Fatlas\u002FSKILL.md and generate a deploy dashboard.\"\n```\n\n### 3. As a raw stylesheet (no agent, plain HTML)\n\n```bash\ncurl -o atlas.css https:\u002F\u002Fraw.githubusercontent.com\u002Fpacifio\u002Fui\u002Fmain\u002Fskills\u002Fatlas\u002Fcolors_and_type.css\n```\n\nThen:\n\n```html\n\u003Clink rel=\"stylesheet\" href=\"atlas.css\" \u002F>\n\u003Cbutton class=\"atlas-btn atlas-btn-primary\">Ship it\u003C\u002Fbutton>\n```\n\nInter and JetBrains Mono are imported from Google Fonts automatically. No build\nstep. No config.\n\n---\n\n## Usage examples by stack\n\n### Plain HTML\n\n```html\n\u003C!doctype html>\n\u003Chtml lang=\"en\" data-theme=\"dark\">\n  \u003Chead>\n    \u003Clink rel=\"stylesheet\" href=\"\u002Fatlas.css\" \u002F>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Cheader class=\"atlas-titlebar\">\n      \u003Cspan class=\"atlas-panel-title\">Atlas — Production\u003C\u002Fspan>\n    \u003C\u002Fheader>\n\n    \u003Cmain style=\"padding: 24px;\">\n      \u003Cdiv class=\"atlas-card\" style=\"width: 320px;\">\n        \u003Cdiv class=\"atlas-card-header\">\n          \u003Cspan class=\"atlas-dot atlas-dot-success\">\u003C\u002Fspan>\n          \u003Cspan class=\"atlas-panel-title\">Deploy\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"atlas-card-body\">\n          Production · main@a9f3b1 · 42ms p95\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv style=\"margin-top: 12px; display: flex; gap: 8px;\">\n        \u003Cbutton class=\"atlas-btn atlas-btn-primary\">Deploy\u003C\u002Fbutton>\n        \u003Cbutton class=\"atlas-btn atlas-btn-secondary\">Preview\u003C\u002Fbutton>\n        \u003Cbutton class=\"atlas-btn atlas-btn-ghost\">Logs\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fmain>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### React \u002F Next.js (App Router)\n\n```tsx\n\u002F\u002F app\u002Flayout.tsx\nimport \".\u002Fatlas.css\";\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    \u003Chtml lang=\"en\" data-theme=\"dark\">\n      \u003Cbody>{children}\u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  );\n}\n\n\u002F\u002F app\u002Fpage.tsx\nexport default function Home() {\n  return (\n    \u003Cdiv style={{ padding: 24 }}>\n      \u003Cbutton className=\"atlas-btn atlas-btn-primary\">Ship it\u003C\u002Fbutton>\n      \u003Cspan className=\"atlas-badge atlas-badge-success\">OK\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n### Tailwind v4 (translate tokens, don't overlay)\n\nYour agent puts Atlas tokens in an `@theme` block and emits utility classes.\n**Don't ship `atlas.css` to the bundle** — Tailwind already has a utility\nsystem.\n\n```css\n\u002F* app\u002Fglobals.css *\u002F\n@import \"tailwindcss\";\n\n@theme {\n  --color-bg-base: #000000;\n  --color-bg-raised: #0f0f0f;\n  --color-text-primary: #ffffff;\n  --color-text-secondary: #aaaaaa;\n  --color-accent-primary: #ededed;\n  --color-accent-highlight: #0070f3;\n  --color-status-error: #F44747;\n  --color-status-warning: #CD9731;\n  --color-status-success: #4d4d4d;\n\n  --radius-sm: 3px;\n  --radius-md: 4px;\n  --radius-lg: 6px;\n\n  --font-sans: \"Inter\", system-ui, sans-serif;\n  --font-mono: \"JetBrains Mono\", ui-monospace, monospace;\n}\n```\n\nThen emit utility classes following Atlas rules (28px buttons, 4px grid, 1px\nborders):\n\n```tsx\n\u003Cbutton className=\"inline-flex items-center h-7 px-3 bg-accent-primary\n                   text-black rounded-md text-sm font-medium hover:brightness-95\n                   transition-colors\">\n  Ship it\n\u003C\u002Fbutton>\n```\n\n### shadcn\u002Fui (override CSS variables)\n\nshadcn already has a variable-driven theme. **Don't overlay `.atlas-*`\nclasses.** Instead, override shadcn's variables with Atlas values — keep\nshadcn's component structure intact.\n\n```css\n\u002F* app\u002Fglobals.css *\u002F\n:root {\n  --background: 0 0% 0%;                 \u002F* Atlas --bg-base *\u002F\n  --foreground: 0 0% 100%;                \u002F* Atlas --text-primary *\u002F\n  --card: 0 0% 6%;                        \u002F* Atlas --bg-raised *\u002F\n  --card-foreground: 0 0% 100%;\n  --popover: 0 0% 6%;\n  --popover-foreground: 0 0% 100%;\n  --primary: 0 0% 93%;                    \u002F* Atlas --accent-primary (#ededed) *\u002F\n  --primary-foreground: 0 0% 0%;\n  --secondary: 0 0% 9%;\n  --secondary-foreground: 0 0% 67%;\n  --muted: 0 0% 9%;\n  --muted-foreground: 0 0% 35%;\n  --accent: 0 0% 9%;\n  --accent-foreground: 0 0% 100%;\n  --destructive: 0 87% 62%;               \u002F* Atlas --status-error (#F44747) *\u002F\n  --destructive-foreground: 0 0% 100%;\n  --border: 0 0% 12%;\n  --input: 0 0% 12%;\n  --ring: 212 100% 48%;                   \u002F* Atlas --accent-highlight (#0070f3) *\u002F\n  --radius: 0.25rem;                      \u002F* 4px *\u002F\n}\n```\n\nThen just use shadcn normally:\n\n```tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\";\n\u003CButton variant=\"default\">Ship it\u003C\u002FButton>\n```\n\nThe shadcn button now looks Atlas. Your markup stays shadcn.\n\n### Vue 3\n\n```ts\n\u002F\u002F main.ts\nimport { createApp } from \"vue\";\nimport \".\u002Fatlas.css\";\nimport App from \".\u002FApp.vue\";\n\ncreateApp(App).mount(\"#app\");\n```\n\n```vue\n\u003C!-- components\u002FDeployButton.vue -->\n\u003Ctemplate>\n  \u003Cbutton class=\"atlas-btn atlas-btn-primary\" @click=\"$emit('deploy')\">\n    \u003Cslot>Deploy\u003C\u002Fslot>\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n```\n\n### Svelte \u002F SvelteKit\n\n```svelte\n\u003C!-- +layout.svelte -->\n\u003Cscript>\n  import \".\u002Fatlas.css\";\n\u003C\u002Fscript>\n\n\u003Cslot \u002F>\n```\n\n```svelte\n\u003C!-- DeployButton.svelte -->\n\u003Cbutton class=\"atlas-btn atlas-btn-primary\" on:click>\n  \u003Cslot>Deploy\u003C\u002Fslot>\n\u003C\u002Fbutton>\n```\n\n### CSS Modules \u002F styled-components\n\nPort the relevant `.atlas-*` rule into your styling system. The CSS file is\nthe source of truth for *visual values*; your emitted code is the translation.\n\n```css\n\u002F* Button.module.css — port of .atlas-btn rules *\u002F\n.button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 28px;\n  padding: 0 12px;\n  border-radius: 4px;\n  border: 1px solid transparent;\n  font: 500 12px \"Inter\", system-ui;\n  cursor: pointer;\n  transition: background-color 120ms ease;\n}\n.primary { background: #ededed; color: #000; }\n.primary:hover { background: #fff; }\n```\n\n---\n\n## Principles (non-negotiable)\n\n1. **AMOLED black.** Pure `#000` base, no dark-gray drift.\n2. **Monochromatic.** Grays + whites do the work. Saturated color is for\n   status semantics only.\n3. **Compact.** Strict 4px grid. 13px base text. 28px buttons. 24px inputs.\n4. **Border-defined surfaces.** Shadows reserved for overlays (dialog,\n   popover, toast, tooltip, device frame).\n5. **Near-white primary, blue highlight.** `#ededed` is the CTA color.\n   `#0070f3` is **never a CTA** — it's the highlight (focus rings, selection,\n   links, active stepper dots).\n6. **Radii are 3 \u002F 4 \u002F 6 \u002F 9999.** No inventing 8, 10, 12, 16.\n7. **Lucide icons, 1.5px stroke.** Never emoji, never unicode symbols.\n8. **Only animate `background-color` by default.** No color\u002Fopacity on icons.\n9. **Overlays get `backdrop-filter: blur()` + spring curves.** Never flat\n   `ease` on modal entrances.\n10. **Dark-first with a real light theme.** All tokens remap under\n    `[data-theme=\"light\"]`. Component structure never changes.\n\n---\n\n## Component vocabulary\n\n50+ `.atlas-*` classes. Full HTML snippets for each are at\n[`\u002Fcomponents`](https:\u002F\u002Fui.pacifio.dev\u002Fcomponents\u002Fbutton) on the live site.\n\n**Primitives:** `.atlas-btn` (+ `-primary` \u002F `-secondary` \u002F `-ghost` \u002F\n`-destructive` \u002F `-icon` \u002F `-sm` \u002F `-lg`), `.atlas-btn-pill` (same variants),\n`.atlas-input` (+ `-sm`), `.atlas-checkbox`, `.atlas-radio`, `.atlas-switch`,\n`.atlas-kbd`, `.atlas-link`\n\n**Surfaces:** `.atlas-card` \u002F `-header` \u002F `-body`, `.atlas-panel-header` \u002F\n`.atlas-panel-title`, `.atlas-stat` \u002F `-label` \u002F `-value` \u002F `-delta`,\n`.atlas-empty`\n\n**Navigation:** `.atlas-tabbar` + `.atlas-tab`, `.atlas-tabbar-bottom` +\n`.atlas-tabbar-bottom-item`, `.atlas-segmented` + `-item`, `.atlas-toggle`,\n`.atlas-breadcrumb`, `.atlas-pagination`, `.atlas-stepper`\n\n**Overlays:** `.atlas-popover` + `.atlas-menu-item`, `.atlas-dialog`,\n`.atlas-command`, `.atlas-tooltip`, `.atlas-toast`, `.atlas-alert`\n\n**Data:** `.atlas-table`, `.atlas-list` + `.atlas-list-item`, `.atlas-badge`,\n`.atlas-pill`, `.atlas-dot` (+ `.is-pulse`), `.atlas-accordion`\n\n**Feedback:** `.atlas-progress`, `.atlas-slider`, `.atlas-skeleton`,\n`.atlas-titlebar`, `.atlas-statusbar`\n\n**Identity:** `.atlas-avatar`, `.atlas-avatar-group`, `.atlas-divider` \u002F `-v`,\n`.atlas-divider-dashed` \u002F `-v-dashed`\n\n**Multi-surface:** `.atlas-device-mobile`, `.atlas-device-tablet`,\n`.atlas-device-desktop`, `.atlas-marquee`, `.atlas-filmstrip`, `.atlas-reveal`,\n`.atlas-display` \u002F `-lg`, `.atlas-eyebrow`\n\n---\n\n## Local development\n\nClone and run the kitchen-sink docs site locally:\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fpacifio\u002Fui.git\ncd ui\u002Fkitchen-sink\nbun install       # or: npm install, pnpm install\nbun run dev       # starts on http:\u002F\u002Flocalhost:3000\n```\n\nThe dev server watches both `kitchen-sink\u002Fapp\u002F**` and any edits you make to\n`skills\u002Fatlas\u002Fcolors_and_type.css` (copy into `kitchen-sink\u002Fpublic\u002Fatlas.css`\nto see them applied). Hot reload is instant — the kitchen-sink is a normal\nNext.js 16 app.\n\n---\n\n## Repo layout\n\n```\nui\u002F\n├── .claude-plugin\u002F\n│   ├── marketplace.json           ← registers the repo as a Claude Code marketplace\n│   └── plugin.json                ← Claude Code plugin manifest (served by the marketplace)\n├── skills\u002F\n│   └── atlas\u002F                     ← For agents\n│       ├── SKILL.md               ←   entry point (read first)\n│       ├── colors_and_type.css    ←   reference implementation\n│       ├── references\u002F            ←   tokens, components, theming,\n│       │                          ←   patterns, responsive, motion,\n│       │                          ←   lessons, examples\n│       ├── preview\u002F               ←   HTML previews per component\n│       └── ui_kits\u002Fgeneric_app\u002F   ←   3-pane shell reference\n├── kitchen-sink\u002F                  ← For humans (Next.js 16)\n│   ├── app\u002F                       ←   55+ pages\n│   │   ├── get-started\u002F\n│   │   ├── foundations\u002F\n│   │   ├── components\u002F\n│   │   ├── patterns\u002F\n│   │   └── mockups\u002F\n│   ├── components\u002F                ←   site chrome + showcase primitives\n│   ├── lib\u002F                       ←   nav registry\n│   └── public\u002F\n│       └── atlas.css              ←   synced from skills\u002Fatlas\u002F\n├── README.md                      ← you are here\n└── LICENSE                        ← MIT\n```\n\n---\n\n## Ecosystem (plays well with…)\n\n- **[Radix UI](https:\u002F\u002Fwww.radix-ui.com\u002F)** — dropdown, popover, dialog, context menu primitives\n- **[Lucide](https:\u002F\u002Flucide.dev\u002F)** — 1.5px stroke icons, color inherited from parent\n- **[react-resizable-panels](https:\u002F\u002Freact-resizable-panels.vercel.app\u002F)** — for 3-pane layouts\n- **[shadcn\u002Fui](https:\u002F\u002Fui.shadcn.com\u002F)** — variable-aliased for automatic Atlas inheritance\n- **[Tailwind CSS v4](https:\u002F\u002Ftailwindcss.com\u002F)** — optional; Atlas tokens translate to `@theme`\n- **[Next.js](https:\u002F\u002Fnextjs.org\u002F)** — the kitchen-sink uses 16 + Turbopack\n\n---\n\n## FAQ\n\n**Does it work with shadcn?** Yes — by not overlaying. Your agent reads the\nshadcn variable alias table in `references\u002Ftheming.md` and overrides shadcn's\nCSS variables with Atlas values. shadcn components stay shadcn; they just look\nAtlas.\n\n**Does it conflict with Tailwind?** No — your agent translates Atlas tokens\ninto Tailwind's `@theme` block and emits utility classes. `atlas.css` never\nships to a Tailwind bundle unless you explicitly opt in.\n\n**When do I use `colors_and_type.css` directly?** Plain HTML, static-site\ngenerators, or greenfield projects with no component library. The CSS is\nproduction-grade — it powers the entire kitchen-sink site. For other stacks,\ntranslate.\n\n**Is the reference CSS complete?** 180+ tokens, 50+ class rules, dark + light\ntheme, responsive helpers, device frames, easing tokens, motion primitives,\nall documented. It does not ship JavaScript — interactions (dialogs,\ndropdowns, toasts) are styling only. Wire them to your stack's state\nmanagement.\n\n**How was this site built?** One-shot generated by an agent reading this\nskill. Hero, meta banner, 29+ live component cards, 7 foundations, 36\ncomponents, 6 patterns, and 4 full-app mockups ([email](https:\u002F\u002Fui.pacifio.dev\u002Fmockups\u002Femail),\n[e-commerce](https:\u002F\u002Fui.pacifio.dev\u002Fmockups\u002Fecommerce), [multi-agent](https:\u002F\u002Fui.pacifio.dev\u002Fmockups\u002Fmulti-agent),\n[news](https:\u002F\u002Fui.pacifio.dev\u002Fmockups\u002Fnews)) — all from the markdown rules.\n\n---\n\n## Contributing\n\nPRs welcome. Open an issue first for anything structural (new tokens, new\ncomponent classes, renames).\n\n- **Bug reports \u002F feature requests**: [github.com\u002Fpacifio\u002Fui\u002Fissues](https:\u002F\u002Fgithub.com\u002Fpacifio\u002Fui\u002Fissues)\n- **Discord**: [discord.gg\u002FBF7ngVQuCS](https:\u002F\u002Fdiscord.gg\u002FBF7ngVQuCS)\n\nWhen contributing to the skill:\n1. Keep `skills\u002Fatlas\u002Fcolors_and_type.css` and\n   `kitchen-sink\u002Fpublic\u002Fatlas.css` in sync (they're a copy).\n2. If you add a CSS class, add a snippet to\n   `skills\u002Fatlas\u002Freferences\u002Fcomponents.md` and a showcase page under\n   `kitchen-sink\u002Fapp\u002Fcomponents\u002F`.\n3. If you discover a gotcha, document it in\n   `skills\u002Fatlas\u002Freferences\u002Flessons.md`.\n\n---\n\n## License\n\nMIT © [pacifio](https:\u002F\u002Fgithub.com\u002Fpacifio)\n","pacifio\u002Fui 是一个专为密集、AMOLED 黑色和多表面界面设计的框架无关设计语言。其核心功能包括一套 Claude Code 技能，用于教授任何编码代理 Atlas 的美学规则、令牌、词汇及组合方式；一份包含 180 多个令牌和 50 多个 `.atlas-*` 类别的参考 CSS 文件，可直接应用于纯 HTML 或轻松转换到其他技术栈；以及一个展示所有组件、模式和四个完整应用模型的在线厨房汇网站。该项目非常适合需要构建仪表板、聊天界面、自动化工作流工具、着陆页或移动应用等场景，尤其适用于追求一致性和高质量 UI 设计的开发者团队。","2026-06-11 02:48:01","CREATED_QUERY"]