# Role You are a Senior Frontend Developer specializing in accessible UI, developer-focused tooling, and information-dense navigation design. # Objective Build a compact top navigation bar for a developer-focused dashboard tool — featuring monospace breadcrumbs, a search input with keyboard shortcut hint, and a user avatar dropdown — inspired by Vercel/Linear design language. # Instructions 1. Create a fixed top navigation bar: - Full width, exactly 48px height — no wasted space - Dark background with bottom border: `1px solid rgba(255, 255, 255, 0.08)` - Three sections: left (breadcrumbs), center (search), right (user) 2. Build the breadcrumb navigation (left section): - Implement as an unstyled `<ol>` with `display: inline-flex` - Monospace font for all breadcrumb text - Separator: subtle forward slashes (`/`) in muted color between items - Active (last) breadcrumb in full-brightness text; previous items muted - Example: `{{TOOL_NAME}} / Projects / Settings` 3. Add the search input (center section): - Compact input with search icon and `⌘K` keyboard shortcut badge - Muted placeholder text: "Search..." - Input styled with subtle background and border on focus - Shortcut badge as a `<kbd>` element inside the input area 4. Build the user section (right section): - Small avatar circle (32px) with user image or initials - Dropdown trigger: chevron icon beside the avatar - On click: dropdown menu with user options (Profile, Settings, Logout) 5. Use `{{FRAMEWORK}}` and `{{CSS_TOOL}}` as specified by the user: - Template variables allow customization for any stack # Constraints - Height must be exactly 48px — do not exceed - Monospace font for breadcrumbs and technical labels - Breadcrumbs as semantic `<ol>` with `inline-flex` — not concatenated strings - Must be keyboard-accessible: Tab through interactive elements - Dark mode only, Vercel/Linear aesthetic - Responsive: hide breadcrumb text on mobile, show only icons # Output Format - Single HTML file with embedded styles - Use `{{FRAMEWORK}}`, `{{CSS_TOOL}}`, and `{{TOOL_NAME}}` template variables for customization - Well-commented code with clear structural sections

# Role You are a Senior Frontend Developer specializing in accessible UI components, navigation patterns, and complex interactive menus. # Objective Build a full-width mega menu navigation system with categorized link columns, a featured content section, and smooth open/close transitions — fully accessible and keyboard-navigable. # Instructions 1. Create the top-level navigation bar: - Horizontal bar with 4–5 top-level menu items - Fixed or sticky positioning at the top of the page - Dark background with consistent height (56–64px) 2. Build the mega menu dropdown panel: - Triggers on hover over a top-level item - Full-width panel that slides down with smooth height transition - Divided into 3–4 content columns 3. Structure each column: - Section title (bold, uppercase or semi-bold) - List of 4–6 navigation links beneath each title - Links with hover color transition 4. Add a featured section: - Rightmost column contains an image card or promotional block - Image with overlay text and a CTA link - Visually distinct from the link columns 5. Implement interaction behavior: - Hover to open with a 150ms delay before closing (prevents accidental close) - Use `pointer-events` management to prevent flicker when moving between nav item and dropdown - Click outside the menu to close - Escape key to close - Smooth height/opacity transition on open and close # Constraints - Semantic HTML: `<nav>`, `<ul>`, `<li>`, `<a>` elements - Full keyboard navigation: Tab through items, Enter to open, arrow keys within dropdown - Add ARIA attributes: `aria-expanded`, `aria-haspopup`, `role="menu"` - No external dependencies — vanilla HTML, CSS, and JavaScript - Must work without JavaScript for basic link navigation (progressive enhancement) - Dark mode design # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include realistic placeholder navigation content (SaaS product categories) - Well-commented code with clear separation of structure, style, and behavior

# Role You are a Senior Frontend Developer specializing in accessible UI, responsive navigation, and dashboard layout patterns. # Objective Build a collapsible sidebar navigation with icon-based menu items, nested sections, and smooth expand/collapse transitions — suitable for dashboards and admin panels. # Instructions 1. Create a sidebar container: - Fixed to the left side of the viewport, full height - Two states: expanded (240px) and collapsed (64px, icons only) - Toggle button to switch between states (hamburger or chevron icon) - Smooth width transition (300ms ease) 2. Build the navigation menu: - 6–8 menu items, each with: - Icon (SVG or placeholder) on the left - Text label (visible only in expanded state, hidden in collapsed) - Active item highlighted with accent background and left border - Hover effect: subtle background highlight 3. Add nested/grouped sections: - Group items under section headers (e.g., "Main", "Settings") - Section headers visible in expanded state, hidden in collapsed - Optional: collapsible sub-menus with chevron indicators 4. Include a user section at the bottom: - Avatar (small circle) + user name + role - In collapsed state: show only avatar 5. Style with Tailwind CSS in dark mode: - Dark sidebar background, slightly different from main content area - Subtle border on the right edge - Consistent icon sizing and alignment # Constraints - Semantic HTML: `<nav>`, `<ul>`, `<li>`, `<a>` elements - Tailwind CSS only — no custom CSS - Add ARIA attributes: `aria-expanded`, `aria-label` on toggle button - Keyboard-navigable: Tab through menu items, Enter to select - Responsive: on mobile (<768px), sidebar becomes an overlay with backdrop - Transitions must respect `prefers-reduced-motion` media query # Output Format - Single HTML file using Tailwind CSS CDN - Include a dummy main content area to demonstrate the layout - Well-structured markup with comments for each section