Prompt a UI kit.UI your agent already knows.

CodeAtlas UI is a Svelte 5 library of full screens, not loose bricks. Component names say what the screen is, props are data, and every color comes from a token. An agent writes it right the first time, and it looks native on a phone.

Read the docs Star on GitHub

Send this prompt to your agent Claude Code, Cursor, Codex: it installs the skills, wires the theme and error pages, and saves your DX, QA and test-first rules to its memory.

Set up CodeAtlas UI (@codeatlasdev/ui, Svelte 5) in this project and make it the default way we build UI.

1. Learn the library first. Read https://ui.codeatlas.com.br/llms.txt and open the pages you need from it (installation, theming, mobile, accessibility). The full docs are at https://ui.codeatlas.com.br/llms-full.txt. Prefer an existing component or page template over writing UI by hand.

2. Install the agent skills: npx skills add codeatlasdev/ui (codeatlas-ui, codeatlas-dx, codeatlas-writing). Use them whenever you touch UI, structure new code or write user-facing text.

3. Install the package with this project's package manager: bun add @codeatlasdev/ui. Add echarts, @tanstack/svelte-table or shiki only when we use charts, data tables or code blocks.

4. Wire the theme, with one shared theme object in src/lib/theme.ts (ThemeOptions: presets from our brand hex, defaultPreset, defaultScheme).
   - SvelteKit: caThemePlugin(theme) and caErrorPlugin({ scaffold: true }) in vite.config.ts (from @codeatlasdev/ui/vite), caThemeHandle(theme) in src/hooks.server.ts and createErrorHandler() as handleError (from @codeatlasdev/ui/kit).
   - Astro: caUI(theme) from @codeatlasdev/ui/astro next to @astrojs/svelte.
   - Root layout: import "@codeatlasdev/ui/styles/global.css" once and call colorScheme.init() on mount. If the app is not in English, call setLocale("pt-BR") (or our locale) there too.
   - Viewport meta: width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content.

5. Save these rules in your persistent memory for this project (AGENTS.md or CLAUDE.md, whichever this repo uses), so every future session follows them:
   - UI: compose package components and page templates first. Colors, spacing, radius and type come only from --ca-* tokens: no hardcoded colors, no Tailwind, no !important. Never put transform or will-change on a glass element or its ancestors.
   - Mobile: test every screen at 390px. Text fields stay at 16px or more, touch targets at 44px, use the safe-area tokens, MobilePane / StickyActions / BottomNav for mobile layouts, and primeKeyboard() (from @codeatlasdev/ui/actions) in the tap that opens a view with a focused field.
   - Test first: write the failing test before the fix or feature (Vitest browser tests for components, with an axe check in every state; Playwright for flows). A bug is done when its regression test passed red and then green.
   - QA before saying done: run the type check, lint and tests, then open the changed screen at desktop and phone width, in light and dark, with the keyboard only, and with no console errors.
   - DX: small typed components, props as data, user-facing text through the i18n catalog, and docs or an example updated with every public change.

6. Prove it works: build, start the dev server, and show me one real screen built with the library (for example an AppList or a dashboard with PageShell and KpiCard) at desktop and phone width. Report what you changed, file by file.

Or tell it: follow https://ui.codeatlas.com.br/prompt.txt

Northwind

All systems normal

Revenue

41.2 k

↑+12.4%

Active teams

1,284

↑+4.1%

Weekly growth

v2 rollout Beta Live

Auto deploy

This is not a screenshot. It is a live composition of package components, retheming itself with data-preset, data-style and data-theme-scope.

One hex in, a whole theme out.

Themes are typed objects compiled once to CSS. Eight presets ship built in, and a brand preset is generated from a single hex color in OKLCH. Light, dark and system modes paint before first frame with no flash, and any element can become a theme island.

defineTheme() resolves one typed object, same input always yields the same CSS.
data-style switches glass, frosted, solid and flat without touching a component.
data-theme-scope="dark" turns any subtree into a dark island.

Brand color

Dark

Plan usage resets in 9 days.

Team Annual

// src/theme.ts
import type { ThemeOptions } from "@codeatlasdev/ui/astro";

export const theme: ThemeOptions = {
  defaultPreset: "ocean",
  defaultScheme: "dark",
  defaultStyle: "glass",
};

Feels installed, not responsive.

Safe areas, the on-screen keyboard and 44px touch targets are handled inside the components. This phone is a real document at 390 pixels: tap the tabs, open the bell for a swipe-to-dismiss sheet, open a thread for a full-screen pane.

BottomNav, Sheet with swipe to dismiss, MobilePane and StickyActions.
A viewport store reads the visual viewport, so the keyboard never fakes the layout.
Form controls stay at 16px on touch, so iOS never zooms on focus.

Open the mobile demo in its own page

An agent gets it right on the first try.

Component names say what the screen is. Props are data. Snippets are the holes you fill. There are no styling decisions left for a model to hallucinate.

<AppList title="Users" data={users} searchKeys={['name', 'email']} perPage={8}>
  {#snippet actions()}
    <Button variant="filled" href="/users/new">New user</Button>
  {/snippet}

  {#snippet children(list)}
    <SimpleTable>
      {#each list.rows as u (u.id)}
        <tr><td><UserCell name={u.name} email={u.email} /></td></tr>
      {/each}
    </SimpleTable>
  {/snippet}
</AppList>

Typed propsEvery component ships its prop types, so an editor or a model sees the contract.
llms.txtA plain index of the library for any model to read.
AGENTS.mdThe rules file: layouts, tokens and the mistakes to avoid.
Agent skillsThree skills install with npx skills add codeatlasdev/ui.

Charts and tables that already match.

Pass data, not options. Charts read the active theme and re-theme when the preset, scheme or surface style changes. Both ship as opt-in subpaths, so the core stays light.

Order	Customer	Plan	Amount	Status
ORD-1042	Lumen Labs	Team	$480	Paid
ORD-1043	Fjord Studio	Solo	$96	Paid
ORD-1044	Kiln & Co	Business	$1,920	Pending
ORD-1045	Tern Systems	Team	$480	Paid
ORD-1046	Basalt	Solo	$96	Refunded
ORD-1047	Marlow Health	Business	$1,920	Paid
ORD-1048	Ostrava IO	Team	$480	Pending

Rows

Accessible by construction.

Primitives come from bits-ui, which handles focus traps, keyboard maps and ARIA. Components are tested with axe in a real browser, and the page you are reading uses the same components.

Browser tests with axe: 80 component suites
Visual regression: 77 component screenshot suites
Built-in presets: 8, plus a brand preset from one hex
Charts, table, code: Subpath imports, so unused ones are never bundled

Three files and you are live.

Works in SvelteKit and Astro. Add the theme hook, import the stylesheet once, and start with a layout.

Install the package

bun add @codeatlasdev/ui

npm install @codeatlasdev/ui

pnpm add @codeatlasdev/ui

Wire the theme into your framework

// vite.config.ts
import { sveltekit } from "@sveltejs/kit/vite";
import { caThemePlugin } from "@codeatlasdev/ui/vite";
import { defineConfig } from "vite";

export default defineConfig({ plugins: [sveltekit(), caThemePlugin()] });

// src/hooks.server.ts
import { sequence } from "@sveltejs/kit/hooks";
import { caThemeHandle } from "@codeatlasdev/ui/kit";

export const handle = sequence(caThemeHandle());

// astro.config.mjs
import svelte from "@astrojs/svelte";
import { caUI } from "@codeatlasdev/ui/astro";
import { defineConfig } from "astro/config";

export default defineConfig({
  integrations: [svelte(), caUI({ defaultPreset: "ocean" })],
});

Import the stylesheet and start the theme store
In your root layout: import "@codeatlasdev/ui/styles/global.css" and call colorScheme.init() once on mount. That is the whole setup.

Build the screen, skip the CSS.

Read the docs Star on GitHub npm