example-task-manager/task_list_ui_specification.yaml at main · Codeplain-ai/example-task-manager · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
functional_specification:
  page_overview:
    name: "Task List App"
    purpose: "A web-based user interface for managing tasks, allowing users to view, add, edit, and delete tasks."

  page_structure:
    header_section:
      title:
        text: "Task List App"
        font: "Sans-serif, bold, size: 24px"
        position: "Top of the page, left-aligned"
      menu_icon:
        size: "24px x 24px"
        function: "Opens a side navigation panel (not in scope for this UI)"

    main_content:
      main_title:
        text: "Task List"
        font: "Sans-serif, bold, size: 32px"
        position: "Left-aligned below the header"
      subtitle:
        text: "All of your tasks in one place."
        font: "Sans-serif, regular, size: 18px"
        position: "Below the main title"
        color: "#6c757d (Light gray)"

  task_list_container:
    layout: "Vertical list with space between task items"
    task_item_structure:
      container:
        border: "1px solid #ccc"
        margins: "16px between task items"
        padding: "12px within each card"
      checkbox:
        type: "Standard"
        function: "Marks the task as completed when checked"
        position: "Left-aligned within the card"
      task_title:
        placeholder: "Task Title"
        font: "Sans-serif, bold, size: 18px"
        position: "Right of the checkbox"
      description:
        placeholder: "Body text for whatever you'd like to say. Add main task description."
        font: "Sans-serif, regular, size: 14px"
        position: "Below the task title"
      date:
        format: "d. MMM (e.g., '9. Oct')"
        font: "Sans-serif, italic, size: 12px"
        position: "Below the description, right-aligned"
      edit_icon:
        type: "Pencil icon"
        size: "16px x 16px"
        position: "Right side of the card"
        function: "Opens the task editing modal"
      delete_icon:
        type: "Trash can icon"
        size: "16px x 16px"
        position: "Next to the edit icon"
        function: "Deletes the task after a confirmation"

  add_task_button:
    label: "Add New Task"
    style:
      background_color: "#000"
      text_color: "#fff"
      border_radius: "Rounded edges"
    size: "Medium (e.g., width: 120px, height: 40px)"
    position: "Top right corner of the main content section"
    function: "Opens a modal or form for adding a new task"

  styling_details:
    color_palette:
      header_background: "#f8f9fa"
      text_color: "#212529"
      button_color:
        background: "#000"
        text: "#fff"
      card_border: "#ccc"
    font_family: "Sans-serif (e.g., Arial, Helvetica)"
    spacing: "Consistent 16px margin/padding between elements"

  behavior_and_interactions:
    checkbox_interaction:
      function: "Toggles the completed state and changes the appearance (e.g., strikethrough on task title)"
    edit_icon:
      function: "Opens a modal allowing users to edit the task details"
    delete_icon:
      function: "Opens a confirmation dialog before deletion"
    add_task_button:
      function: "Opens a modal or form to add a new task"