MCPInstall

use-topbar

by cognitedataFrontend & Design

Wires the Aura Topbar (@aura/topbar) into Flows/Fusion apps: breadcrumbs, optional Tabs/Segmented, right strip (Share, notifications, theme, Atlas, user Avatar), light/dark. Atlas opens the EOS sidebar — wire context with integrate-fusion-agent; do not embed a chat UI. Use when adding a topbar, header, breadcrumbs, theme switcher, or Atlas launcher.

Installs
1.9K
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/cognitedata/builder-skills --skill use-topbar
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads use-topbar automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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.

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.

Step 0 — Auto-prompt hook setup

Ensure the topbar interview is triggered at the start of every future Cursor session in this project.

  1. Check whether .cursor/hooks.json exists in the project root.
  2. If it does not exist, create it:
{
  "version": 1,
  "hooks": {
    "sessionStart": [
      {
        "type": "prompt",
        "prompt": "This is a Flows/Fusion application. Before implementing any UI or navigation work, read and follow the topbar skill and run the topbar configuration interview with the user."
      }
    ]
  }
}
  1. If .cursor/hooks.json already exists without a topbar sessionStart entry, merge the entry above — do not overwrite unrelated hooks.
  2. Confirm to the user, then continue.

Step 1 — Pre-flight: read the app

Before asking any questions, read:

  • package.json — package manager, existing UI deps, existing @aura/topbar
  • src/App.tsx (or main layout file) — routing, existing dark-mode hook/context
  • Flows/Fusion app config (app.config.ts, fusion.config.ts, manifest) — displayName, name, app mark / branding

Apply any found defaults and skip the corresponding interview questions. State what was inferred.

Step 2 — Configuration interview (mandatory)

Run the full Q1–Q9 interview in INTERVIEW.md before writing any implementation code. Ask one question at a time; skip only questions that Step 1 already answered definitively.

Steps 3–5 — Install, theme hook, implement

See IMPLEMENTATION.md for:

  • Installing @aura/topbar via the shadcn CLI (mandatory, no workarounds)
  • useThemeMode hook wiring for light/dark switching
  • Topbar component composition example and layout wrapper

Step 6 — Compliance checklist

Verify before finishing (see RULES.md §12 for the full enforcement checklist):

  • Exactly one Topbar per page
  • Left: Avatar application mark (small, fjord) → app name breadcrumb → object name breadcrumb (only when an object is open)
  • Breadcrumb segments are interactive links — not static text
  • Object dropdown (if present) only on the object name segment; actions are object-scoped only
  • Inline metadata (if present) is a plain string, left-aligned after the breadcrumb — not centered
  • Middle: Tabs or Segmented control at small if present; no sidebar; no primary CTA in the Topbar
  • Primary / app-specific actions live in the content area below the Topbar
  • Right strip order when used: Share → Notifications → Theme → Atlas → user Avatar; Share/Notifications/Theme ghost small; Atlas secondary small with leading icon + "Atlas" (opens EOS sidebar; default on if the app has AI — integrate-fusion-agent)
  • Theme: sun in light mode, moon in dark mode; Menu with Light/Dark rows + checkmark on active; wired to document.documentElement
  • tailwind.config has darkMode: 'class'

FAQ

What does the use-topbar skill do?

Wires the Aura Topbar (@aura/topbar) into Flows/Fusion apps: breadcrumbs, optional Tabs/Segmented, right strip (Share, notifications, theme, Atlas, user Avatar), light/dark. Atlas opens the EOS sidebar — wire context with integrate-fusion-agent; do not embed a chat UI. Use when adding a topbar, header, breadcrumbs, theme switcher, or Atlas launcher.

How do I install use-topbar?

Run npx skills add https://github.com/cognitedata/builder-skills --skill use-topbar in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/use-topbar/ (personal) or .claude/skills/use-topbar/ (project).

Which AI agents can use use-topbar?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is use-topbar safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains use-topbar?

It is published by cognitedata in cognitedata/builder-skills. It has 1,891 recorded installs.

More from cognitedata/builder-skills

View all →

skill-creator

cognitedata/builder-skills

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch for Claude Code or Cursor, update or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.

AI & Agents2.5K installs

code-quality

cognitedata/builder-skills

MUST be used whenever reviewing a Flows app for code quality, maintainability, or clean code issues — before a PR review, after a feature is complete, or when the user asks for a code review. Do NOT skip linting steps. Triggers: code quality, code review, clean code, refactor, maintainability, technical debt, any type, naming, dead code, duplication, DRY, single responsibility, component size, lint, linting, TypeScript strict, dependency injection, file structure.

Code Quality & Workflow2K installs

test-coverage

cognitedata/builder-skills

MUST be used whenever fixing test coverage for a Flows app to meet the 80% line coverage hard gate. This skill finds AND fixes coverage gaps — it configures tooling, writes missing tests, covers untested paths, and refactors code for testability. It does not just report. Triggers: test coverage, fix tests, write tests, add tests, coverage fix, 80% coverage, coverage gate, missing tests, testability, vitest coverage, jest coverage.

Testing & QA1.9K installs

dependencies-audit

cognitedata/builder-skills

MUST be used whenever fixing dependency issues in a Flows app. This skill finds AND fixes vulnerabilities, outdated packages, deprecated dependencies, and license issues — it does not just report them. Triggers: dependencies, packages, fix dependencies, update packages, fix vulnerabilities, npm audit fix, pnpm audit fix, CVE fix, outdated, deprecated, supply chain, license.

Security1.9K installs

design

cognitedata/builder-skills

Simplified Aura guidance for selecting primitives, keeping token usage consistent, and applying reliable layout/copy/state patterns in Flows and Fusion apps.

Frontend & Design1.9K installs

reveal-3d

cognitedata/builder-skills

Integrates the @cognite/reveal-widget npm package into Flows apps for an interactive Cognite Reveal 3D Scene/CAD/point cloud/360-image viewer. Use when adding 3D viewer, 3D visualization, Reveal, CAD model, Point cloud model, 360 image collection, Scenes, RevealWidget, RevealWidgetController, DM 3D mapping, asset 3D model, model browser, or Cognite 3D content to a Flows application.

Media & Creative1.9K installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs