Getting started

npm install @tollerud/ui clsx tailwind-merge tailwindcss@4 \
  @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-progress \
  @radix-ui/react-slot @radix-ui/react-tabs @radix-ui/react-tooltip \
  lucide-react framer-motion sonner

# Optional — NoirGlowBackground only
npm install @paper-design/shaders-react

npm install @tollerud/footer

import { Footer } from '@tollerud/footer'

<Footer />

# From the Tollerud/ui repo:
cp -R examples/next-starter my-app && cd my-app && npm install && npm run dev

# Or clone and copy:
# https://github.com/Tollerud/ui/tree/main/examples/next-starter

Set up a new Next.js App Router project with @tollerud/ui (Tollerud User Interface / Tollerud UI).

Requirements:
1. Use Next.js with App Router and Tailwind CSS v4 (PostCSS).
2. Install @tollerud/ui and all required peers:
   npm install @tollerud/ui clsx tailwind-merge tailwindcss@4 @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-progress @radix-ui/react-slot @radix-ui/react-tabs @radix-ui/react-tooltip lucide-react framer-motion sonner
3. In app/globals.css, import BOTH:
   @import "@tollerud/ui/globals.css";
   @import "@tollerud/ui/source.css";
4. Mount <Toaster /> from @tollerud/ui in the root layout.
5. Build the sample home page with exported layout primitives and screen patterns (PageShell, Section, Stack, Button, etc.) — not hand-built min-h-screen/grid utilities. Follow https://design.tollerud.dev/recipes/ for screen structure.
6. Sync the Tollerud UI skill: fetch https://raw.githubusercontent.com/Tollerud/ui/main/SKILL.md and write it to .claude/skills/tollerud-ui/SKILL.md (or the equivalent skills folder for this agent).
7. Do NOT copy @tollerud/ui component source into components/ui. Import from @tollerud/ui only. Do NOT create a local cn() helper — use import { cn } from '@tollerud/ui'.
8. Style links with <Button asChild><Link … /></Button> or buttonVariants() — never nest <a> inside <button>.
9. Use Tollerud tokens (text-tollerud-yellow, bg-tollerud-noir-950) — never hardcode #FFFF00 or #0A0A0A.
10. When done, run npx tollerud-ui-audit and fix all errors before finishing.

If examples/next-starter exists in the Tollerud/ui repo, use it as the reference layout. Otherwise match its structure: globals.css + source.css, layout with Toaster, component-first sample page.

Tell me what you created and any audit output.

Add @tollerud/ui (Tollerud User Interface / Tollerud UI) to this existing project.

Requirements:
1. Install @tollerud/ui and required peers if missing:
   npm install @tollerud/ui clsx tailwind-merge tailwindcss@4 @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-progress @radix-ui/react-slot @radix-ui/react-tabs @radix-ui/react-tooltip lucide-react framer-motion sonner
2. Ensure the Tailwind entry CSS imports BOTH:
   @import "@tollerud/ui/globals.css";
   @import "@tollerud/ui/source.css";
3. Mount <Toaster /> near the app root if we use sonner toasts.
4. Sync SKILL.md from https://raw.githubusercontent.com/Tollerud/ui/main/SKILL.md into the project skills folder (.claude/skills/tollerud-ui/SKILL.md or equivalent).
5. Replace any vendored components/ui copies with imports from @tollerud/ui. Delete local cn() helpers — use import { cn } from '@tollerud/ui/utils'.
6. Do NOT copy new component source from the Tollerud UI repo into this app.
7. Use component-first composition: @tollerud/ui exports, then layout/screen patterns, then small Tailwind glue only. Screen starting points: https://design.tollerud.dev/recipes/
8. Fix Button/Link nesting: use asChild or buttonVariants() on links.
9. Replace hardcoded brand hex (#FFFF00, #0A0A0A) with Tollerud tokens.
10. Run npx tollerud-ui-audit from the app package root and fix all errors.

Summarize changes and audit results when done.

Add the Tollerud branded footer to this project using @tollerud/footer (footer-only — not the full Tollerud UI package).

Requirements:
1. npm install @tollerud/footer
2. Ensure Tailwind is configured with Tollerud tokens via @import "@tollerud/ui/globals.css" (footer-only apps still need token utilities for text-tollerud-* / bg-tollerud-*).
3. import { Footer } from '@tollerud/footer' and render <Footer /> in the layout.
4. Do not install the full @tollerud/ui peer set unless I ask for more components later.

Tell me what you changed.

/* app/globals.css */
@import "@tollerud/ui/globals.css";
@import "@tollerud/ui/source.css";

import type { Config } from 'tailwindcss'
import tollerudPreset from '@tollerud/ui/preset'

const config: Config = {
  presets: [tollerudPreset],
  content: [
    './app/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './node_modules/@tollerud/ui/dist/**/*.{js,mjs}',
  ],
}

export default config

@import "tailwindcss/preflight";
@import "tailwindcss/utilities";
@import "@tollerud/ui/globals-v3.css";

import { Button, Card, Badge, cn, Monogram, DataTable } from '@tollerud/ui'
import { PageShell, Section, Stack } from '@tollerud/ui'
import { PageHeader, ResourceList } from '@tollerud/ui'

// Tree-shaken subpaths:
import { Button } from '@tollerud/ui/button'
import { cn } from '@tollerud/ui/utils'

import { Button, Card } from '@tollerud/ui'

export function DeployCard() {
  return (
    <Card>
      <p>Ready to deploy.</p>
      <div className="mt-6">
        <Button variant="primary">Deploy</Button>
      </div>
    </Card>
  )
}

// Avoid: this bypasses Button variants, focus states, and brand tokens.
<button className="rounded-lg bg-yellow-400 px-4 py-2 text-black">
  Deploy
</button>

// Avoid: move repeated branded layout into @tollerud/ui
// or a semantic feature component.
<section className="min-h-screen bg-black px-6 py-24">
  <div className="mx-auto grid max-w-6xl gap-6 md:grid-cols-3">
    {/* hand-built branded cards */}
  </div>
</section>

npx tollerud-ui-audit
# monorepo: npx tollerud-ui-audit ./apps/web
# without npx:
node node_modules/@tollerud/ui/scripts/audit-consumer-styling.mjs
# advisory CI (exit 0 even with errors):
npx tollerud-ui-audit --warn-only

import { Toaster } from '@tollerud/ui'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

grep -rl "tollerud-yellow\|tollerud-noir\|tollerud-surface" src --include="*.tsx" --include="*.ts"

// Before
import { Button } from '@/components/ui/Button'
import { cn } from '@/lib/utils'

// After
import { Button } from '@tollerud/ui'
import { cn } from '@tollerud/ui/utils'