Daily Focus Board

Daily Focus Board

Build a warm, visual focus board from user tasks, render it as focus-board.html, serve it on loopback, and coach the user through status updates, progress notes, counters, carryover, and an end-of-day recap.

When to invoke

• "Help me plan my day."
• "I need to get organized and stay focused."
• "Start a work session with these tasks."
• "Track my progress on pages, pomodoros, or reps."
• "Make a daily focus board."

Board configuration

Copy assets/board.template.html to a working file such as focus-board.html in a scratch or working directory unless the user asks to place it in a repository. Replace only the null in this template line:

<script>window.__BOARD__ = null; /* SKILL: replace null with the config object above */</script>

Inject JSON with < escaped so user text cannot break out of the <script> block: JSON.stringify(config).replace(/</g, "\u003c"). Never concatenate raw task text into JavaScript.

{
  name: "Alex",
  dateKey: "2026-07-27",
  mantra: "Small, real, done.",
  checkin: "above",
  tasks: [
    { id:"pages", emoji:"", title:"Read 30 pages", goal:30, start:0, inc:5, unit:"pages", tag:"mind", tagc:"new", quad:"ins" },
    { id:"doc", emoji:"", title:"Finish the design doc", sub:"the anchor", due:"2026-07-27T17:00", tag:"deadline", tagc:"deadline", quad:"iu" },
    { id:"move", emoji:"", title:"Move a little — whatever fits your body", tag:"body" }
  ]
}

Keep the board to about 4–9 active tasks. A focus board that becomes a backlog loses the overload protection and the point of the artifact.

Procedure

1. Gather the task list from the user or their message. Capture a short title, optional emoji, optional sub note, optional tag, optional due, optional quad, and counter fields when the task has a numeric goal.
2. Generate focus-board.html from assets/board.template.html, escaping injected JSON as described above.
3. Serve the folder on loopback so localStorage has an http:// origin: python -m http.server 8799 --bind 127.0.0.1, or use scripts/serve-board.ps1.
4. Open the board in a browser canvas side panel when the host supports it; otherwise open http://localhost:8799/focus-board.html in the default browser.
5. Drive the board through conversation: keep status and notes in the browser, regenerate only when the task list changes, and preserve progress by keeping the same dateKey.
6. At end of day, ask the user to download or copy the recap and paste it back if they want journaling or tomorrow planning.

Partnership behavior

Frame the design as executive-function-friendly for everyone. Never diagnose neurodivergence, never assume ADHD, and keep every affordance optional. See references/neurodivergent-design.md for task initiation, time blindness, working memory, overwhelm, reward, shame, capture, and body-doubling principles.

Built-in board features

No extra config is needed for the check-in, daily mantra suggestions, add-a-task live editing, drag-to-reorder with the ⠿ handle, sort by priority, priority guide, editable labels, gentle overload nudge, end-of-day save, Focus mode, not today carryover, brain-dump box, reduced-motion toggle, and live clock. Set high-quality tasks; the template provides the interaction layer.

Gotchas

• State lives in browser localStorage: it is per browser and the agent cannot read it directly. The end-of-day recap download/copy bridges this. For automatic read/write state, see references/customize.md for file-backed state and v2 shared signals.
• Do not open with file:// unless necessary: some browsers restrict localStorage on file origins. Prefer the loopback server.
• Do not overfill the board: more than about 9 active tasks triggers overload and turns the board into a backlog.
• Counters are not carryover tasks: counters are progress you dial down; use not today for status tasks.

Progressive disclosure and bundled resources

• assets/board.template.html: self-contained board template; copy it and inject the config.
• scripts/serve-board.ps1: helper for serving the board folder.
• examples/sample-board.html: populated example board for seeing the UI or copying a starting config.
• references/tutorial.md: daily loop for GitHub Copilot app browser canvas or direct browser use.
• references/neurodivergent-design.md: executive-function and ADHD design rationale.
• references/customize.md: theming, file-backed state, and optional shared signals bridge.

Output template

### Daily focus board

**Status:** created | needs input | blocked
**Board file:** `focus-board.html`
**Open URL:** `http://localhost:8799/focus-board.html`
**Date key:** `<YYYY-MM-DD>`

| Task | Type | Priority | Due | Notes |
| --- | --- | --- | --- | --- |
| `<title>` | status | Do first / Schedule / Delegate / Later | `<time or none>` | `<sub/tag/counter details>` |

**Next partnership move:** <one tiny next action or focus suggestion>
**End-of-day recap:** download/copy from the board when ready

Quality gate

• The config JSON is injected with < escaped and no raw user text concatenated into a script.
• Every task has a unique stable id matching [A-Za-z0-9_-].
• Counter tasks have a positive integer goal; status tasks use carryover instead of counters.
• due appears only on real anchors and uses an ISO local datetime.
• The board is served on 127.0.0.1 when persistence matters.
• The user receives exactly one next action when asking what to do next.
• Incomplete tasks are framed as carryover or choice, never failure.
• Bundled resources referenced above exist and are used only when needed.