MCPInstall

use-topbar

by cognitedataFrontend & Design

Wires the Aura Topbar (@aura/topbar) into Dune/Fusion apps as the single top navigation bar — breadcrumbs, optional center Tabs or Segmented control, right utility strip (Share, notifications, theme menu, Atlas, user Avatar), and light/dark theme switching. Use when adding a topbar, app header, navigation bar, breadcrumbs, or theme switcher to a Dune or Fusion app, or when scaffolding a new Dune/Fusion application.

Installs
232
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/cognitedata/dune-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 Dune/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 Dune/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
  • Dune/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 as ghost small, Atlas as secondary small with leading icon + "Atlas"
  • 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 Dune/Fusion apps as the single top navigation bar — breadcrumbs, optional center Tabs or Segmented control, right utility strip (Share, notifications, theme menu, Atlas, user Avatar), and light/dark theme switching. Use when adding a topbar, app header, navigation bar, breadcrumbs, or theme switcher to a Dune or Fusion app, or when scaffolding a new Dune/Fusion application.

How do I install use-topbar?

Run npx skills add https://github.com/cognitedata/dune-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/dune-skills. It has 232 recorded installs.

More from cognitedata/dune-skills

View all →

code-quality

cognitedata/dune-skills

MUST be used whenever reviewing a Dune 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 & Workflow343 installs

design

cognitedata/dune-skills

Open the skill to read its SKILL.md instructions.

341 installs

skill-creator

cognitedata/dune-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 & Agents341 installs

create-client-tool

cognitedata/dune-skills

MUST be used whenever creating an AtlasTool (client-side tool) for an Atlas agent. Do NOT manually write AtlasTool definitions or wire them into useAtlasChat — this skill handles the TypeBox schema, execute function, and hook wiring. This includes tools that fetch data, render UI, call APIs, show charts, query local state, or perform any browser-side action. Triggers: AtlasTool, client tool, add tool, create tool, new tool, tool definition, agent tool.

Frontend & Design340 installs

dune-app-review

cognitedata/dune-skills

Open the skill to read its SKILL.md instructions.

Code Quality & Workflow338 installs

integrate-atlas-chat

cognitedata/dune-skills

Open the skill to read its SKILL.md instructions.

338 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