Prompt: Interactive Kanban Board UI (FPC005)
Model: Groq-Llama3.3-70b | Date: 05/17/2025 | Page Title: Kanban Board
Prompt Description
Develop a client-side interactive Kanban board (like Trello or Jira) with basic drag-and-drop functionality.
**Board Structure & Features:**
1. **Columns:** Display at least three columns: 'To Do', 'In Progress', 'Done'. Each column should be clearly labeled (e.g., with an `<h2>`) and act as a drop zone. Columns should be identifiable `data-testid='kanban-column-todo'`, `data-testid='kanban-column-inprogress'`, etc.
2. **Cards:**
* Each column should contain several task cards. Each card displays a task title and a brief description.
* Cards MUST be draggable between columns. They should have `draggable='true'` attribute and be identifiable `data-testid='kanban-card-N'`.
* Cards should also be editable in place (e.g., clicking card title makes it an input, saving on blur/Enter - medium complexity).
3. **Add New Card:** Provide a way to add a new card to the 'To Do' column (e.g., a button at the bottom of the column or a global 'Add Task' button that opens a small form/modal). The form should ask for a title and description. `data-testid='add-card-form'`.
4. **Drag and Drop:** Implement HTML5 drag and drop API to move cards between columns. When a card is dropped into a new column, it should visually move and its underlying data structure (if any in JS) should reflect the change of status.
**Technical & Accessibility Requirements:**
* Semantic HTML for the board, columns, and cards. Use `<ul>` or `<ol>` for lists of cards within columns if appropriate.
* **Drag and Drop Accessibility:** This is challenging. Provide keyboard alternatives for moving cards if possible (e.g., a context menu on the card with 'Move to In Progress' options). If full keyboard D&D is too complex, ensure users can still manage tasks without a mouse (e.g., edit, delete, add, potentially move via other means). At a minimum, draggable items should be focusable.
* Visual feedback during drag (e.g., highlighting drop zones, ghost image of card).
* The board should be responsive. Columns might stack on mobile, or horizontal scrolling might be enabled for the board container.
* Styling: Tailwind CSS. Custom CSS/JS will be critical for drag-and-drop visuals, card editing, and potentially complex responsive column layouts.
**Testing Identifiers:**
* To Do Column: `data-testid='kanban-column-todo'`
* In Progress Column: `data-testid='kanban-column-inprogress'`
* Done Column: `data-testid='kanban-column-done'`
* A Draggable Card: `data-testid='kanban-card-1'`
* Add Card Form: `data-testid='add-card-form'` or trigger `data-testid='add-card-button'`
Key Links & Info
Analysis Timestamp: 05/17/2025 11:46:10
Desktop Screenshot:
Mobile Screenshot:
Scores for this Prompt
Technical Quality
136.2 / 190.0
(71.68%)
Prompt Adherence
20.0 / 25.0
(80.00%)
Overall Weighted
78.34 %
Technical Quality Breakdown
HTML Structure & Semantics (7.0 / 10.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| HTML Lang | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Page Title | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Main Tag | FAIL |
No visible <main>.
|
0.0 / 1.0 | desktop |
| Nav Tag | WARN |
No visible <nav>.
|
0.0 / 1.0 | desktop |
| Footer Tag | WARN |
No visible <footer>.
|
0.0 / 1.0 | desktop |
| H1 Count | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Heading Order Logic | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Image Alts | INFO |
No visible images (INFO).
|
1.0 / 1.0 | desktop |
| Form Labels | INFO |
No relevant form inputs (INFO).
{
"unlabeled_count": 0
}
|
2.0 / 2.0 | desktop |
CSS Quality (2.0 / 5.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| CSS Variables | WARN |
No :root CSS variables.
|
0.0 / 2.0 | desktop |
| Modern Layout Body/Main | INFO |
Flex/Grid not on body/main.
|
0.0 / 1.0 | desktop |
| Inline Styles | PASS |
Minimal inline styles.
|
1.0 / 1.0 | desktop |
| !important Usage | PASS |
No !important in <style> tags.
|
1.0 / 1.0 | desktop |
JavaScript Health (5.0 / 5.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| JS Console Errors | PASS |
No significant JS errors.
|
5.0 / 5.0 | desktop |
Accessibility (Axe-core) (22.0 / 40.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Axe Violations | FAIL |
3 Axe violations (Crit:0,Ser:1,Mod:2,Min:0). Report: axe_report_FPC005_Interactive_Kanban_Board_UI_desktop.json
[
{
"help": "Elements must have sufficient color contrast",
"id": "color-contrast",
"impact": "serious"
},
{
"help": "Page must have one main landmark",
"id": "landmark-one-main",
"impact": "moderate"
},
{
"help": "All page content must be contained by landmarks",
"id": "region",
"impact": "moderate"
}
]
|
11.0 / 20.0 | desktop |
| Axe Violations | FAIL |
3 Axe violations (Crit:0,Ser:1,Mod:2,Min:0). Report: axe_report_FPC005_Interactive_Kanban_Board_UI_mobile.json
[
{
"help": "Elements must have sufficient color contrast",
"id": "color-contrast",
"impact": "serious"
},
{
"help": "Page must have one main landmark",
"id": "landmark-one-main",
"impact": "moderate"
},
{
"help": "All page content must be contained by landmarks",
"id": "region",
"impact": "moderate"
}
]
|
11.0 / 20.0 | mobile |
Rendered Color & Contrast (10.0 / 30.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Contrast Failure (AA) | FAIL |
AA FAIL 3.68 for 'Edit' in <button class='bg-blue-500 hover:bg-blue-700 ...'>
{
"bg_eff": "rgb(59, 130, 246)",
"fg": "rgb(255, 255, 255)",
"ratio": 3.6779011537825332,
"text": "Edit"
}
|
0.0 / 0.0 | desktop |
| Contrast Failure (AA) | FAIL |
AA FAIL 2.28 for 'Add Card' in <button id='add-card-button' data-testid='add-card-button' class='bg-green-500 hover:bg-green-70...'>
{
"bg_eff": "rgb(34, 197, 94)",
"fg": "rgb(255, 255, 255)",
"ratio": 2.2786093403477246,
"text": "Add Card"
}
|
0.0 / 0.0 | desktop |
| Contrast Failure (AA) | FAIL |
AA FAIL 3.68 for 'Edit' in <button class='bg-blue-500 hover:bg-blue-700 ...'>
{
"bg_eff": "rgb(59, 130, 246)",
"fg": "rgb(255, 255, 255)",
"ratio": 3.6779011537825332,
"text": "Edit"
}
|
0.0 / 0.0 | desktop |
| Contrast Failure (AA) | FAIL |
AA FAIL 3.68 for 'Edit' in <button class='bg-blue-500 hover:bg-blue-700 ...'>
{
"bg_eff": "rgb(59, 130, 246)",
"fg": "rgb(255, 255, 255)",
"ratio": 3.6779011537825332,
"text": "Edit"
}
|
0.0 / 0.0 | desktop |
| Contrast Check Result | FAIL |
4 WCAG AA failures on 14 instances.
|
5.0 / 15.0 | desktop |
| Contrast Failure (AA) | FAIL |
AA FAIL 3.68 for 'Edit' in <button class='bg-blue-500 hover:bg-blue-700 ...'>
{
"bg_eff": "rgb(59, 130, 246)",
"fg": "rgb(255, 255, 255)",
"ratio": 3.6779011537825332,
"text": "Edit"
}
|
0.0 / 0.0 | mobile |
| Contrast Failure (AA) | FAIL |
AA FAIL 2.28 for 'Add Card' in <button id='add-card-button' data-testid='add-card-button' class='bg-green-500 hover:bg-green-70...'>
{
"bg_eff": "rgb(34, 197, 94)",
"fg": "rgb(255, 255, 255)",
"ratio": 2.2786093403477246,
"text": "Add Card"
}
|
0.0 / 0.0 | mobile |
| Contrast Failure (AA) | FAIL |
AA FAIL 3.68 for 'Edit' in <button class='bg-blue-500 hover:bg-blue-700 ...'>
{
"bg_eff": "rgb(59, 130, 246)",
"fg": "rgb(255, 255, 255)",
"ratio": 3.6779011537825332,
"text": "Edit"
}
|
0.0 / 0.0 | mobile |
| Contrast Failure (AA) | FAIL |
AA FAIL 3.68 for 'Edit' in <button class='bg-blue-500 hover:bg-blue-700 ...'>
{
"bg_eff": "rgb(59, 130, 246)",
"fg": "rgb(255, 255, 255)",
"ratio": 3.6779011537825332,
"text": "Edit"
}
|
0.0 / 0.0 | mobile |
| Contrast Check Result | FAIL |
4 WCAG AA failures on 14 instances.
|
5.0 / 15.0 | mobile |
Responsiveness (Viewport & Scroll) (16.0 / 20.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Viewport Meta Tag | PASS |
Configured correctly for responsiveness.
|
4.0 / 4.0 | desktop |
| Horizontal Scrollbar | PASS |
No horizontal scrollbar detected.
|
6.0 / 6.0 | desktop |
| Viewport Meta Tag | INFO |
Already scored for this prompt.
|
0.0 / 0.0 | mobile |
| Horizontal Scrollbar | PASS |
No horizontal scrollbar detected.
|
6.0 / 6.0 | mobile |
Performance (Lighthouse) (37.4 / 40.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Lighthouse Score | PASS |
95/100
|
19.0 / 20.0 | desktop |
| Lighthouse Score | PASS |
92/100
|
18.4 / 20.0 | mobile |
Accessibility (Lighthouse) (18.2 / 20.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Lighthouse Score | PASS |
91/100
|
9.1 / 10.0 | desktop |
| Lighthouse Score | PASS |
91/100
|
9.1 / 10.0 | mobile |
Best Practices (Lighthouse) (9.6 / 10.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Lighthouse Score | PASS |
96/100
|
4.8 / 5.0 | desktop |
| Lighthouse Score | PASS |
96/100
|
4.8 / 5.0 | mobile |
SEO (Lighthouse) (9.0 / 10.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Lighthouse Score | PASS |
90/100
|
4.5 / 5.0 | desktop |
| Lighthouse Score | PASS |
90/100
|
4.5 / 5.0 | mobile |
Prompt Adherence Breakdown
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| To Do Column | PASS |
Element '[data-testid='kanban-column-todo']' present and visible.
Selector:
[data-testid='kanban-column-todo'] |
2.0 / 2.0 | desktop |
| In Progress Column | PASS |
Element '[data-testid='kanban-column-inprogress']' present and visible.
Selector:
[data-testid='kanban-column-inprogress'] |
2.0 / 2.0 | desktop |
| Done Column | PASS |
Element '[data-testid='kanban-column-done']' present and visible.
Selector:
[data-testid='kanban-column-done'] |
2.0 / 2.0 | desktop |
| Draggable Cards (min 3 total) | PASS |
Count is 3 (Actual: 3, Expected: >= 3).
|
2.0 / 2.0 | desktop |
| Add Card Mechanism | PASS |
Element '[data-testid='add-card-form'], [data-testid='add-card-button']' present and visible.
Selector:
[data-testid='add-card-form'], [data-testid='add-card-button'] |
2.0 / 2.0 | desktop |
| Drag Card from ToDo to InProgress | PASS |
All interaction steps/outcomes verified.
|
7.0 / 7.0 | desktop |
| Add New Card to ToDo | FAIL |
One or more interaction steps/outcomes failed.
Interaction Log: [ "--- Executing Step: Open Add Card Form (if button exists) ---", " Action \u0027click\u0027 on \u003cbutton id=\u0027add-card-button\u0027 data-testid=\u0027add-card-button\u0027 class=\u0027bg-green-500 hover:bg-green-70...\u0027\u003e.", "--- Step Open Add Card Form (if button exists) Passed ---", "--- Executing Step: Fill and Submit New Card ---", " [FAIL] Trigger config missing." ] |
0.0 / 5.0 | desktop |
| Cards are Focusable (for A11y D&D alternative prep) | PASS |
Custom script evaluation result: True (expected true).
Script Eval: True
|
3.0 / 3.0 | desktop |
| To Do Column | PASS |
(Points already awarded) Element '[data-testid='kanban-column-todo']' present and visible.
Selector:
[data-testid='kanban-column-todo'] |
0.0 / 2.0 | mobile |
| In Progress Column | PASS |
(Points already awarded) Element '[data-testid='kanban-column-inprogress']' present and visible.
Selector:
[data-testid='kanban-column-inprogress'] |
0.0 / 2.0 | mobile |
| Done Column | PASS |
(Points already awarded) Element '[data-testid='kanban-column-done']' present and visible.
Selector:
[data-testid='kanban-column-done'] |
0.0 / 2.0 | mobile |
| Draggable Cards (min 3 total) | PASS |
(Points already awarded) Count is 3 (Actual: 3, Expected: >= 3).
|
0.0 / 2.0 | mobile |
| Add Card Mechanism | PASS |
(Points already awarded) Element '[data-testid='add-card-form'], [data-testid='add-card-button']' present and visible.
Selector:
[data-testid='add-card-form'], [data-testid='add-card-button'] |
0.0 / 2.0 | mobile |
| Add New Card to ToDo | FAIL |
One or more interaction steps/outcomes failed.
Interaction Log: [ "--- Executing Step: Open Add Card Form (if button exists) ---", " Action \u0027click\u0027 on \u003cbutton id=\u0027add-card-button\u0027 data-testid=\u0027add-card-button\u0027 class=\u0027bg-green-500 hover:bg-green-70...\u0027\u003e.", "--- Step Open Add Card Form (if button exists) Passed ---", "--- Executing Step: Fill and Submit New Card ---", " [FAIL] Trigger config missing." ] |
0.0 / 5.0 | mobile |
| Cards are Focusable (for A11y D&D alternative prep) | PASS |
(Points already awarded) Custom script evaluation result: True (expected true).
Script Eval: True
|
0.0 / 3.0 | mobile |