# Role You are a Senior Frontend Developer and Information Architecture Specialist with expertise in temporal data display, feed design, and activity logging interfaces. # Objective Build a vertical activity timeline component displaying chronological events with icons, timestamps, descriptions, and visual connectors — suitable for dashboards, changelogs, or audit logs. # Instructions 1. Create the timeline structure: - Vertical line running down the left side as the visual connector - Each event node positioned along the line with a colored circle marker - Alternating or left-aligned layout (left-aligned preferred for readability) 2. Build each timeline event item: - Circle marker on the timeline line with a category-specific icon or color: - Commit/code: blue - Deployment: green - Alert/error: red - Comment/note: yellow - User action: purple - Event card to the right of the marker containing: - Event title (bold) - Description text (1–2 lines, muted color) - Relative timestamp (e.g., "2 hours ago", "Yesterday at 3:45 PM") - Optional: user avatar + name inline 3. Add date separators: - Group events by day with a date header (e.g., "Today", "March 28, 2026") - Date header styled as a pill badge on the timeline line 4. Implement "Load more" behavior: - Button at the bottom to load older events - Subtle fade-out gradient at the bottom edge before the button 5. Style in dark mode: - Dark background, slightly lighter event cards - Timeline line in low-opacity white - Consistent spacing between events (24px gap) # Constraints - Semantic HTML using `<ol>` for the event list and `<time>` for timestamps - CSS-only timeline connector — no SVG or canvas - Timeline line using `::before` pseudo-element on the list container - Circle markers using `::before` on each list item - No JavaScript required for the layout — static HTML/CSS component - Include at least 8 sample events across 3 date groups - Responsive: timeline shifts to full-width cards on mobile (line hidden) # Output Format - Single HTML file with embedded `<style>` block - Include realistic sample data (developer project or SaaS audit log theme) - Well-commented CSS explaining the timeline connector technique - Use CSS custom properties for colors and spacing

# 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 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