{
  "version": 1,
  "name": "Keep work moving",
  "url": "https://swipefile.design/board/keep-work-moving/",
  "markdown_url": "https://swipefile.design/board/keep-work-moving/notes.md",
  "json_url": "https://swipefile.design/board/keep-work-moving/data.json",
  "pdf_url": "https://swipefile.design/board/keep-work-moving/export.pdf",
  "reference_count": 3,
  "unavailable_count": 0,
  "guidance": "Use these references for design principles. Follow the project brief and use original branding, content, and imagery. Captures document a particular date; they do not verify current product behavior.",
  "references": [
    {
      "slug": "tabler-kanban",
      "name": "Tabler — Kanban board",
      "kind": "app",
      "archetype": "Project Management",
      "summary": "A task board groups work by progress while keeping owners, dates, and checklists on each card.",
      "use_for": "Compare work stages at a glance while keeping the details needed for the next action on each card.",
      "source_url": "https://preview.tabler.io/tasks.html",
      "reference_url": "https://swipefile.design/ref/tabler-kanban/",
      "screenshot_url": "https://swipefile.design/_astro/full.BphykkYq.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.lPepBYdI.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "demo",
      "tags": [
        "project management",
        "navigation",
        "tabler"
      ],
      "patterns": [
        "Navigation"
      ],
      "design_notes": {
        "surface": "Kanban board",
        "nav": "Project-area tabs sit above the board beneath a shared app header.",
        "layout": "Three work-in-progress columns contain cards of varying height, with optional previews and compact metadata.",
        "density": "Primary content has the most space; repeated rows and secondary navigation use a compact, consistent rhythm.",
        "color": "Pale gray workspace, white cards, blue actions, and restrained status accents.",
        "typography": "Medium-weight card titles lead compact dates, avatars, and task counts.",
        "pattern": "Compare work stages at a glance while keeping the details needed for the next action on each card.",
        "states": "Public demo board with upcoming, in-progress, and completed sample tasks.",
        "dont": "Adapt the interaction pattern to your own product. Do not copy brand assets, sample identities, proprietary text, or assume unseen states. Specify keyboard behavior, loading, empty, error, and narrow-screen layouts for your implementation."
      },
      "recreation_prompt": "# Design reference: Tabler — Kanban board\nSource: https://preview.tabler.io/tasks.html\nSwipefile reference: https://swipefile.design/ref/tabler-kanban/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: Kanban board\n- nav: Project-area tabs sit above the board beneath a shared app header.\n- layout: Three work-in-progress columns contain cards of varying height, with optional previews and compact metadata.\n- density: Primary content has the most space; repeated rows and secondary navigation use a compact, consistent rhythm.\n- color: Pale gray workspace, white cards, blue actions, and restrained status accents.\n- typography: Medium-weight card titles lead compact dates, avatars, and task counts.\n- pattern: Compare work stages at a glance while keeping the details needed for the next action on each card.\n- states: Public demo board with upcoming, in-progress, and completed sample tasks.\n- dont: Adapt the interaction pattern to your own product. Do not copy brand assets, sample identities, proprietary text, or assume unseen states. Specify keyboard behavior, loading, empty, error, and narrow-screen layouts for your implementation.\n\nUseful for: Compare work stages at a glance while keeping the details needed for the next action on each card.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence."
    },
    {
      "slug": "tabler-task-list",
      "name": "Tabler — Task list",
      "kind": "app",
      "archetype": "Project Management",
      "summary": "A grouped task list exposes owner, due date, and priority in consistent columns.",
      "use_for": "Offer a compact alternative to a board when users need to compare many tasks and deadlines.",
      "source_url": "https://preview.tabler.io/tasks-list.html",
      "reference_url": "https://swipefile.design/ref/tabler-task-list/",
      "screenshot_url": "https://swipefile.design/_astro/full.BNQTFMcG.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.CUUnqAyJ.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "demo",
      "tags": [
        "project management",
        "navigation",
        "tabler"
      ],
      "patterns": [
        "Navigation"
      ],
      "design_notes": {
        "surface": "Task list",
        "nav": "The app header stays global; a new-task action belongs to each status section.",
        "layout": "Status sections each contain a compact table with checkboxes and row actions.",
        "density": "Primary content has the most space; repeated rows and secondary navigation use a compact, consistent rhythm.",
        "color": "White rows on a pale background with small colored priority labels.",
        "typography": "Short headings and aligned metadata create a steady scanning rhythm across rows.",
        "pattern": "Offer a compact alternative to a board when users need to compare many tasks and deadlines.",
        "states": "Populated demo tasks grouped by progress stage.",
        "dont": "Adapt the interaction pattern to your own product. Do not copy brand assets, sample identities, proprietary text, or assume unseen states. Specify keyboard behavior, loading, empty, error, and narrow-screen layouts for your implementation."
      },
      "recreation_prompt": "# Design reference: Tabler — Task list\nSource: https://preview.tabler.io/tasks-list.html\nSwipefile reference: https://swipefile.design/ref/tabler-task-list/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: Task list\n- nav: The app header stays global; a new-task action belongs to each status section.\n- layout: Status sections each contain a compact table with checkboxes and row actions.\n- density: Primary content has the most space; repeated rows and secondary navigation use a compact, consistent rhythm.\n- color: White rows on a pale background with small colored priority labels.\n- typography: Short headings and aligned metadata create a steady scanning rhythm across rows.\n- pattern: Offer a compact alternative to a board when users need to compare many tasks and deadlines.\n- states: Populated demo tasks grouped by progress stage.\n- dont: Adapt the interaction pattern to your own product. Do not copy brand assets, sample identities, proprietary text, or assume unseen states. Specify keyboard behavior, loading, empty, error, and narrow-screen layouts for your implementation.\n\nUseful for: Offer a compact alternative to a board when users need to compare many tasks and deadlines.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence."
    },
    {
      "slug": "tabler-activity",
      "name": "Tabler — Activity timeline",
      "kind": "app",
      "archetype": "Media & Social",
      "summary": "An activity feed combines avatars, action summaries, and timestamps in a quiet vertical list.",
      "use_for": "Make recent changes readable through consistent actor-action-time rows and subtle unread indicators.",
      "source_url": "https://preview.tabler.io/activity.html",
      "reference_url": "https://swipefile.design/ref/tabler-activity/",
      "screenshot_url": "https://swipefile.design/_astro/full.Dx00KQbT.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.CXaNGjoa.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "demo",
      "tags": [
        "media & social",
        "content & media",
        "tabler"
      ],
      "patterns": [
        "Content & media"
      ],
      "design_notes": {
        "surface": "Activity timeline",
        "nav": "A common app header frames the feed without adding local navigation.",
        "layout": "A constrained feed column leaves open space at right; each row pairs an identity with a short activity sentence.",
        "density": "Primary content has the most space; repeated rows and secondary navigation use a compact, consistent rhythm.",
        "color": "White rows, pale separators, muted timestamps, and small blue unread markers.",
        "typography": "Regular-weight sentences use selective emphasis for identities and actions.",
        "pattern": "Make recent changes readable through consistent actor-action-time rows and subtle unread indicators.",
        "states": "Demo activity feed with varied sample actions and relative timestamps.",
        "dont": "Adapt the interaction pattern to your own product. Do not copy brand assets, sample identities, proprietary text, or assume unseen states. Specify keyboard behavior, loading, empty, error, and narrow-screen layouts for your implementation."
      },
      "recreation_prompt": "# Design reference: Tabler — Activity timeline\nSource: https://preview.tabler.io/activity.html\nSwipefile reference: https://swipefile.design/ref/tabler-activity/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: Activity timeline\n- nav: A common app header frames the feed without adding local navigation.\n- layout: A constrained feed column leaves open space at right; each row pairs an identity with a short activity sentence.\n- density: Primary content has the most space; repeated rows and secondary navigation use a compact, consistent rhythm.\n- color: White rows, pale separators, muted timestamps, and small blue unread markers.\n- typography: Regular-weight sentences use selective emphasis for identities and actions.\n- pattern: Make recent changes readable through consistent actor-action-time rows and subtle unread indicators.\n- states: Demo activity feed with varied sample actions and relative timestamps.\n- dont: Adapt the interaction pattern to your own product. Do not copy brand assets, sample identities, proprietary text, or assume unseen states. Specify keyboard behavior, loading, empty, error, and narrow-screen layouts for your implementation.\n\nUseful for: Make recent changes readable through consistent actor-action-time rows and subtle unread indicators.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence."
    }
  ]
}