dashboard

Kanban Task Board

Drag-ready column-based task management layout.

kanban tasks board columns | Claude 4.6 Opus

Prompt

# 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

Notes

Prompt

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

Create a horizontal board layout with 3 columns:
- “To Do” — tasks not yet started
- “In Progress” — tasks currently being worked on
- “Done” — completed tasks
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
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
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
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

Notes

Use overflow-y: auto on columns with a defined max-height for scrollable cards.
Cards should have subtle hover shadow (box-shadow) for drag affordance.
Consider using cursor: grab on cards to communicate draggability.

Related Prompts

Prompt Result

Analytics Dashboard

Stat cards and chart placeholders for metrics.

# 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

analytics stats charts +1

GPT 5.3 Ultra

Complex Data Table

Data table with sortable headers and pagination.

# 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

table data admin

GPT 5.3 Ultra