Aura Design System

Installation

Install Aura with the CLI on a new or existing Next.js app, then add registry components.

Install is the human path into the kit. What an agent should read, and the rules it follows, is on Get started.

New app

pnpm dlx @aura-design/cli@latest init

init creates a Next.js app, then applies Aura:

  1. components.json with the @aura and @aura-dev registries
  2. Light and dark accent and gray scales in globals.css
  3. @aura/class-names, @aura/page-get-starter, @aura/css-main, @aura/rules, @aura/skill-aura, and @aura/skills
  4. Blueprint scaffolding, including gdp-ts proofs

@aura/rules writes root DESIGN.md and the always-on process rules into .agents/rules/ (feature map, no comments, and the DESIGN.md pointer). aura blueprint symlinks .cursor/rules to that directory. @aura/skill-aura writes the design skill to .agents/skills/aura/ (color, type, the 13px grid, icons, motion, forms, and lint). @aura/skills writes the procedure skills under .cursor/skills/.

Install the design skill on its own with either command:

pnpm dlx shadcn@latest add @aura/skill-aura
pnpm dlx skills add somosgented/aura-design-system --skill aura

See Aura skill and Get started.

Existing app

pnpm dlx @aura-design/cli@latest setup

setup runs the same apply step and skips create-next-app. Pass --dir when the app is not the current directory.

pnpm dlx @aura-design/cli@latest setup --dir ./apps/web

An agent on a project that is already partly set up should follow the agent blueprint and install only what is missing.

One component

pnpm dlx shadcn@latest add @aura/button

There is no command that adds every component at once. The current names, one per line, are at all.txt.

Flags for link, colors, typography, spacing, and blueprint are on the CLI page.