Skip to main content
Prompts Drag-and-Drop Kanban Board Builder

developer coding user risk: low

Drag-and-Drop Kanban Board Builder

Build a Kanban project management board using HTML5, CSS3, and JavaScript with customizable columns, drag-and-drop card movement, card creation featuring rich text, labels, due dat…

PROMPT 

Build a Kanban project management board using HTML5, CSS3, and JavaScript. Create a flexible board layout with customizable columns (To Do, In Progress, Done, etc.). Implement drag-and-drop card movement between columns with smooth animations. Add card creation with rich text formatting, labels, due dates, and priority levels. Include user assignment with avatars and filtering by assignee. Implement card comments and activity history. Add board customization with column reordering and color themes. Support multiple boards with quick switching. Implement data persistence using localStorage with export/import functionality. Create a responsive design that adapts to different screen sizes. Add keyboard shortcuts for common actions.

EXPECTED OUTPUT

Format
code

SUCCESS CRITERIA

  • Build Kanban board with customizable columns
  • Implement drag-and-drop card movement with animations
  • Add card creation with rich text, labels, due dates, priority
  • Include user assignment with avatars and filtering
  • Implement card comments and activity history
  • Add board customization with column reordering and themes
  • Support multiple boards with switching
  • Implement localStorage persistence with export/import
  • Create responsive design
  • Add keyboard shortcuts

FAILURE MODES

  • Incomplete implementation of all features
  • Non-functional drag-and-drop
  • Lack of responsiveness on mobile
  • Missing data persistence or export
  • Poor performance with many cards
  • No smooth animations or rich text
  • Inadequate keyboard support

CAVEATS

Missing context
  • Output format (e.g., single HTML file or multiple files).
  • Predefined users/assignees and avatar sources.
  • Exact list of keyboard shortcuts.
  • Rich text editor implementation details (e.g., using contenteditable).
Ambiguities
  • 'Rich text formatting' is vague on supported features like bold, italic, lists.
  • 'User assignment with avatars' unclear on user source or predefined list.
  • 'Keyboard shortcuts for common actions' does not specify which actions.
  • Export/import functionality lacks specified data format (e.g., JSON).

QUALITY

OVERALL
0.75
CLARITY
0.95
SPECIFICITY
0.80
REUSABILITY
0.20
COMPLETENESS
0.85

IMPROVEMENT SUGGESTIONS

  • Specify 'Output as a single self-contained HTML file with inline CSS and JS.'
  • List specific keyboard shortcuts, e.g., 'N: new card, D: delete card, ? : help.'
  • Provide sample users with avatar URLs or placeholders.
  • Clarify 'rich text formatting' as 'support bold, italic, underline, bullet lists via contenteditable.'
  • Define export/import as JSON with schema example.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER