# Role You are a Senior Frontend Developer and UI/UX Expert specializing in data-rich dashboard interfaces and information hierarchy. # Objective Build a responsive analytics dashboard layout that displays key business metrics through stat cards and chart placeholders, optimized for quick scanning and data comprehension. # Instructions 1. Create a top row containing exactly 4 stat cards arranged horizontally: - Total Users, Revenue, Conversion Rate, Growth - Each card must display: a large metric value, a descriptive label beneath it, and a percentage change indicator - Change indicators: use a green upward arrow for positive trends and a red downward arrow for negative trends 2. Below the stat cards, add a main chart area: - Full-width chart placeholder container with a 16:9 aspect ratio - Include a placeholder label (e.g., "Revenue Over Time") 3. Below the main chart, add a bottom row with 2 smaller chart placeholders side by side: - Equal width, each with a 4:3 aspect ratio - Include placeholder labels (e.g., "Traffic Sources", "Conversion Funnel") 4. Apply a dark theme throughout: - Dark background with subtle card borders using low-opacity white or gray - Use consistent spacing and padding between all elements # Constraints - Use semantic HTML elements (`<section>`, `<article>`, `<header>`) - Use CSS `aspect-ratio` for chart containers — do not use padding hacks - Apply `font-variant-numeric: tabular-nums` on all numeric values for proper alignment - Ensure responsive behavior: stack cards vertically on mobile, 2x2 on tablet, 4 across on desktop - Do not use JavaScript for layout — CSS Grid or Flexbox only - Dark mode first; do not include a light mode variant # Output Format - Single HTML file with embedded `<style>` block - Clean, well-indented code with brief inline comments for each major section - Use CSS custom properties for colors and spacing to enable easy theming

# Role You are a Senior Frontend Developer and UI/UX Expert specializing in data-dense interfaces and enterprise dashboard components. # Objective Build a feature-rich data table component with sortable columns, pagination, row selection, and a dark-mode admin aesthetic suitable for dashboards and back-office tools. # Instructions 1. Create an HTML table with the following columns: - Checkbox (for row selection) - Name (sortable, text) - Email (sortable, text) - Role (filterable badge: Admin, Editor, Viewer) - Status (Active/Inactive with colored dot indicator) - Date Joined (sortable, formatted date) - Actions (edit/delete icon buttons) 2. Implement sorting functionality: - Click column header to sort ascending; click again for descending - Visual indicator: arrow icon showing current sort direction 3. Add pagination controls below the table: - Previous/Next buttons - Page number indicators (1, 2, 3...) - "Showing X–Y of Z results" text 4. Include a top toolbar with: - Search input to filter rows by name or email - Bulk action dropdown (appears when rows are selected) - "Select All" checkbox in header 5. Style in dark mode using Tailwind CSS: - Alternating row backgrounds with subtle contrast - Hover highlight on rows - Sticky header on scroll # Constraints - Use semantic `<table>`, `<thead>`, `<tbody>`, `<th>`, `<td>` elements - Add proper ARIA attributes: `aria-sort` on sortable headers, `role="checkbox"` on selection - Tailwind CSS only — no custom CSS unless required for table-specific behavior - Responsive: horizontal scroll wrapper on small screens with sticky first column - Use sample/mock data (8–12 rows) to demonstrate functionality # Output Format - Single HTML file using Tailwind CSS CDN - Embedded JavaScript for sort, search, and pagination logic - Well-commented code with clear sections for markup, styles, and scripts

# Role You are a Senior Frontend Developer and UI/UX Expert specializing in productivity tools, drag-and-drop interfaces, and task management layouts. # Objective Design a Kanban task board layout with three status columns, task cards showing assignee and priority information, and interactive features like adding tasks and scrollable overflow. # Instructions 1. Create a horizontal board layout with 3 columns: - "To Do" — tasks not yet started - "In Progress" — tasks currently being worked on - "Done" — completed tasks 2. Each column must include: - Column header with the status name and a task count badge (e.g., "To Do (5)") - "+ Add Task" button at the top of the column - Scrollable task card area with `overflow-y: auto` and a defined `max-height` 3. Each task card must display: - Task title (bold, truncated with ellipsis if too long) - Assignee avatar (small circle with initials or placeholder image) - Priority label as a colored badge: - High: red background - Medium: yellow/amber background - Low: green background - Optional: due date in muted text 4. Add visual affordances for interactivity: - Subtle hover shadow on cards to suggest draggability - Cursor: `grab` on hover, `grabbing` on active - Smooth transition on hover effects 5. Style in dark mode: - Dark column backgrounds, slightly lighter card backgrounds - Subtle column borders for separation - Consistent spacing and padding throughout # Constraints - Use CSS Flexbox for the horizontal column layout - Use `overflow-y: auto` with `max-height: calc(100vh - 200px)` on card containers - Semantic HTML with proper heading hierarchy - No drag-and-drop JavaScript required — this is a layout/UI prompt only - Include 3–4 sample task cards per column with varied priorities - Responsive: horizontal scroll on the board container for mobile # Output Format - Single HTML file with embedded `<style>` block - Include realistic sample task data (project management theme) - Well-commented code with clear section markers - Use CSS custom properties for colors to enable easy theming

# 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