Use Topbar

Wires Aura Topbar into your Flows or Fusion app as the canonical navigation header: breadcrumbs on the left, optional tabs or segmented control in the middle, utility strip on the right (share, notifications, theme switcher, Atlas, user avatar). It's a shadcn registry component, not an npm package, so installation goes through the shadcn CLI. The skill walks you through a nine question interview to configure everything, then enforces strict compliance rules. One topbar per page, no sidebar navigation, primary actions live below the header. It even sets up a Cursor session hook so you get prompted about topbar config at the start of every session. Opinionated, but that's the point.

skills.sh installs: 1.9K
GitHub stars: 6
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add cognitedata/builder-skills --skill use-topbar --agent claude-code

Installs into .claude/skills of the current project.

Files

Topbar

@aura/topbar is the single, compliant top navigation bar for every authenticated Flows/Fusion app. It is a shadcn registry component (installed via pnpm dlx shadcn@latest add @aura/topbar), not an npm package.

Storybook: https://cognitedata.github.io/aura/storybook/?path=/docs/primitives-topbar--docs
Full rules: RULES.md · Interview: INTERVIEW.md · Install + code: IMPLEMENTATION.md

Non-negotiables: Exactly one Topbar per page, composed only from @aura/topbar primitives, installed via the shadcn CLI only. If installation fails, surface the blocker — never build a custom header fallback. See RULES.md §1, §11, §12.