← ClaudeAtlas

iblai-vibe-navbarlisted

Add a responsive navbar with logo, page links, notification bell, and profile dropdown
iblai/vibe · ★ 15 · AI & Automation · score 76
Install: claude install-skill iblai/vibe
# /iblai-vibe-navbar Add a responsive top navigation bar with: - **Left:** Logo + page links - **Right:** Notification bell + user profile dropdown The navbar matches the ibl.ai skillsai reference app and is fully responsive -- desktop shows inline links, tablet/mobile collapses to a hamburger drawer. Do NOT add custom styles, colors, or CSS overrides to ibl.ai SDK components. They ship with their own styling. Keep the components as-is. Do NOT implement dark mode unless the user explicitly asks for it. Do NOT add Lucide icons next to nav link labels. Links are text-only. When building custom UI around SDK components, use the ibl.ai brand: - **Primary**: `#0058cc`, **Gradient**: `linear-gradient(135deg, #00b0ef, #0058cc)` - **Button**: `bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-white` - **Font**: System sans-serif stack, **Style**: shadcn/ui new-york variant - Follow the component hierarchy: use ibl.ai SDK components (`@iblai/iblai-js`) first, then shadcn/ui for everything else (`npx shadcn@latest add <component>`). Do NOT write custom components when an ibl.ai or shadcn equivalent exists. Both share the same Tailwind theme and render in ibl.ai brand colors automatically. - Follow [BRAND.md](https://raw.githubusercontent.com/iblai/vibe/refs/heads/main/BRAND.md) for colors, typography, spacing, and component styles. The navbar MUST follow BRAND.md colors: - **Active link**: `text-[var(--navbar-active-text,var(--primary-color))]` / `border-[var(--navbar-