lulu-agent-kanban-board

name	lulu-agent-kanban-board
version	1.0.0
description	Design lightweight Kanban board snapshots for project tracking and workflow visualization
triggers	["kanban board","project board","task board","sprint board","workflow board"]
category	design
quality_bar	Board is functional, visually organized, and shows clear task states with column swimlanes
tools	["write_file"]
permissions	["write"]

Kanban Board Snapshot

Design lightweight, self-contained Kanban boards for visualizing project workflows, sprint tracking, or personal task management.

Steps

1. Ask discovery questions — What workflow stages are needed? How many tasks/cards? What detail should each card show? Any color coding per task type?
2. Define columns — Map workflow stages (e.g., Backlog → To Do → In Progress → Review → Done).
3. Draft quickly — Build a Kanban board with horizontal swimlanes, draggable-looking cards, and column headers with task counts.
4. Add realistic tasks — Use project-appropriate task titles, descriptions, assignees, priority labels, and due dates.
5. Self-critique — Run the Visual Quality Checklist before finalizing.

Output Format

A single self-contained index.html file:

• Horizontal scrolling board layout with column swimlanes
• Column headers with title + task count
• Task cards with: title, description (2-3 lines), priority badge, assignee avatar (SVG), due date
• Color-coded priority indicators (high=red, medium=amber, low=green)
• A "new task" placeholder/composer at the end of the board
• Minimal JS for demo interactivity (optional, but keep under 20 lines)

Artifact Constraints

• File size: Max 40KB
• Columns: 4-7 columns
• Cards per column: 2-5 cards
• Precision: Pure HTML/CSS. JavaScript only for demo interactivity (showing card details on click, etc.)
• Responsive: Columns stack vertically on narrow screens (<600px)
• Colors: Use a consistent color system for priority/type labels
• Icons: SVG or Unicode only

Visual Quality Checklist

• All columns are visible without horizontal scroll at 1200px width
• Column headers show column name + card count
• Cards have visible elevation (box-shadow) and hover effect
• Priority labels are color-coded and easy to distinguish
• Assignee avatars (initials or SVG circles) visible on each card
• Cards show due dates or relative time indicators
• Empty columns show a "No tasks" placeholder state
• Drag affordance: cursor change or subtle visual cue on cards
• Color palette is limited and intentional (not rainbow)
• Typography is consistent: card titles bold, metadata smaller
• "Add task" button/placeholder at the end of the board
• Board title and description at the top of the page

Example Prompt

Generate a Kanban board snapshot for a mobile app development sprint.
Columns: Backlog, To Do, In Progress, Review, Done. Include 12 tasks across
columns: iOS features (blue badge), Android features (green badge), backend
tasks (purple badge), and design tasks (amber badge). Show realistic task
titles like "Implement push notifications" and "Redesign onboarding flow".

References

• See design/templates/kanban-board/ for a reference template
• See design/design-systems/lulu-ai/ for design tokens
• See design/prompts/designer.md for the designer persona profile