# 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

# 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 and Product UX Engineer specializing in notification systems, dropdown interfaces, and information prioritization. # Objective Build a notification center triggered by a bell icon, featuring a dropdown panel with grouped notifications, read/unread states, action buttons, and a notification badge counter — styled for a dark-mode dashboard. # Instructions 1. Create the bell icon trigger: - Bell icon (CSS-only or inline SVG) positioned in a top navigation bar - Unread count badge: small red circle with white number, positioned top-right of the bell - Badge pulses briefly when a new notification arrives (CSS animation) - Click toggles the dropdown open/closed 2. Build the dropdown panel: - Positioned below the bell icon, right-aligned - Width: 380px, max-height: 480px with scroll - Header row: "Notifications" title + "Mark all as read" text button - Smooth scale + fade entrance from top-right (transform-origin: top right) 3. Structure the notification list: - Group by time: "Today", "Yesterday", "Earlier" with section headers - Each notification item includes: - Avatar circle (user initials or colored placeholder) - Title text (bold for unread, normal weight for read) - Description (1–2 lines, truncated with ellipsis) - Relative timestamp (e.g., "5 min ago") - Unread indicator: small accent dot on the left edge - Notification types with distinct accent colors: - Mention: blue - Assignment: purple - Alert: red - Update: green 4. Add interaction features: - Click a notification to mark as read (dot disappears, font weight changes) - "Mark all as read" clears all unread indicators and resets the badge - Hover state: subtle background highlight - Empty state: illustration or text when no notifications exist 5. Footer: "View all notifications" link at the bottom # Constraints - Vanilla JavaScript — no frameworks - Close dropdown on outside click or Escape key - Badge count updates in real time when notifications are marked as read - Semantic HTML with `role="menu"` and `aria-expanded` on the trigger - Include at least 8 sample notifications across 3 time groups - Dark mode only - Responsive: dropdown goes full-width on mobile (bottom sheet style) # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include a minimal nav bar to house the bell icon - Well-commented code with sections: trigger, dropdown, notification items, interaction logic