# 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, 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, search interfaces, and keyboard-driven interaction patterns. # Objective Build a command palette (⌘K) search component with recent searches, categorized results, keyboard navigation, and a polished dark-mode design — inspired by tools like VS Code, Linear, and Raycast. # Instructions 1. Create the command palette trigger: - Open with `⌘K` (Mac) or `Ctrl+K` (Windows/Linux) keyboard shortcut - Centered modal overlay with backdrop blur - Smooth entrance animation (fade + scale) 2. Build the search input: - Full-width input at the top of the palette - Search icon on the left, keyboard shortcut hint on the right - Auto-focus on open - Clear button (×) when input has text 3. Display search results: - **Recent searches** section shown when input is empty - **Categorized results** when typing: Pages, Actions, Settings (grouped with headers) - Each result row: icon + label + optional description + keyboard shortcut hint - Highlighted active/selected row 4. Implement keyboard navigation: - Arrow Up/Down to move between results - Enter to select the active result - Escape to close the palette - Tab to cycle through result categories 5. Close behavior: - Escape key - Click on backdrop - After selecting a result 6. Style with Tailwind CSS in dark mode: - Dark modal background, subtle border - Muted section headers, bright result text - Accent highlight on active row # Constraints - Use Tailwind CSS for all styling - Semantic HTML with `role="dialog"`, `role="listbox"`, `aria-activedescendant` - No external dependencies for search logic — filter from a static list - Palette max-width: 640px, max-height: 400px with scrollable results - Must be fully keyboard-navigable — mouse is optional - Include at least 10 sample searchable items across 3 categories # Output Format - Single HTML file using Tailwind CSS CDN - Embedded JavaScript for keyboard handling and filtering - Well-commented code with clear sections for markup, styles, 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