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