# 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 Email Developer and HTML Specialist with deep expertise in cross-client email rendering and responsive email design. # Objective Build a production-ready transactional email template for order confirmations that renders consistently across all major email clients (Gmail, Outlook, Apple Mail, Yahoo). # Instructions 1. Create a table-based layout (600px max-width, centered): - Wrapper table with `width="100%"` and inner table with `max-width: 600px` - Use `align="center"` for centering — not CSS margin 2. Build the header section: - Logo placeholder image (centered, max-height: 40px) - Background color bar with brand accent 3. Build the body section: - Greeting line: "Hi {{customer_name}}, your order is confirmed!" - Order number and date in a highlighted box 4. Create the order summary table: - Columns: Item Name, Quantity, Price - Each row with subtle bottom border for separation - Subtotal row - Shipping row - Total row with bold, larger font 5. Add a CTA button: - "View Order" button with bulletproof button technique (VML fallback for Outlook) - Centered with padding 6. Build the footer: - Company address (CAN-SPAM compliance) - Social media icon links (placeholder images) - Unsubscribe link (required) - Muted text color for footer content # Constraints - Inline CSS only — no `<style>` blocks (Outlook strips them from non-`<head>` positions) - Table-based layout only — no CSS Grid, Flexbox, or `<div>` layouts - All images must include `alt` text and explicit `width`/`height` attributes - Use `role="presentation"` on layout tables for accessibility - Dark mode support: include `color-scheme: light dark` meta tag and test with inverted colors - Maximum image width: 600px; use web-safe fonts with fallbacks # Output Format - Single `.html` file with complete `<!DOCTYPE html>` structure - All CSS inlined on elements - Use placeholder values wrapped in `{{mustache}}` syntax for dynamic content - Include HTML comments marking each section for easy editing