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