daily-focus-board - Claude MCP Skill

# Daily Focus Board

A warm, visual "let's go" board for a person's day — rendered from a self-contained HTML
template, opened in a browser (ideally a side-panel **canvas** in the GitHub Copilot app), and
kept current *by conversation*: the human tells you what they finished, you update the board.

This is Ember partnership in daily practice: not a static to-do list, a thing you run *with*
your AI. Keep it light, encouraging, and honest — celebrate real progress, don't inflate it.

## When to use it

Trigger when the user wants to: plan today, "get organized / stay focused," start a work
session, or track progress on a set of tasks they list. If they just mention a pile of things
to do, offer the board.

## How to build it (3 steps)

**1. Gather the tasks.** Ask for (or lift from what they already said) their handful of tasks
for the day. For each, capture: a short title, an optional emoji, an optional one-line
sub-note, and an optional tag. If a task is a *count toward a number* (steps, pages,
pomodoros, reps), make it a **counter** with a numeric `goal`. Keep it to ~4–9 items — a focus
board, not a backlog.

**2. Generate the board.** Copy `assets/board.template.html` to a working file (e.g.
`focus-board.html` in a scratch/working dir — NOT into a source repo unless asked). In the copy,
find this line near the top:

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

Replace `null` with the config object. **Inject it as JSON with `<` escaped** so a task's text
can never break out of the `<script>` — e.g. `JSON.stringify(config).replace(/</g, "\\u003c")` —
never hand-concatenate raw user-provided text. Schema:

```js
{
  name: "Alex",              // optional — shows "Let's go, Alex 🔥"; omit for "Let's go 🔥"
  dateKey: "2026-07-27",     // optional — localStorage key; defaults to today (YYYY-MM-DD)
  mantra: "Small, real, done.", // optional — today's intention (editable on the board)
  checkin: "above",          // optional — arrival check-in: "below" | "mid" | "above"
  tasks: [
    // counter task (numeric goal → progress bar + set/＋ buttons):
    { id:"pages", emoji:"📖", title:"Read 30 pages",
      goal:30, start:0, inc:5, unit:"pages", tag:"mind", tagc:"new", quad:"ins" },
    // status task (to-do → in progress → done + progress notes):
    { 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" }
  ]
}
```

- `id` must be unique and stable, using only letters, digits, hyphens, or underscores
  (`[A-Za-z0-9_-]`) — it's embedded in HTML attributes, CSS selectors, storage keys, and
  colon-delimited note keys, so avoid quotes, colons, brackets, and spaces. `tagc` is an optional color class:
  `new` (green), `deadline` (red/pink), `career` (purple); omit for the default grey.
- Counter tasks: `goal` (a **positive integer**), `start` (default 0), `inc` (default
  `max(1, round(goal/10))`), `unit` (label). Everything else is a status task. Carryover
  ("not today") is for status tasks — counters are progress you dial down, not defer.
- `due` (optional, ISO local datetime) shows a **gentle** live countdown on the card, and after
  the time passes says "was due 5:00pm — still worth doing" in soft amber (never angry red). Use
  it for the one real anchor, not everything.
- `quad` (optional) sets a task's Eisenhower priority: `iu` (important & urgent → *Do first*),
  `ins` (important, not urgent → *Schedule*), `niu` (urgent, not important → *Delegate*), `ninu`
  (neither → *Later*). Renders as a colored accent; the person can change it on the board.
- `mantra` / `checkin` (both optional, top-level) seed today's intention and the above/below-the-line
  arrival check-in. Set these from the conversation, or leave them for the person to set/tap.
- **Built-in, no config needed:** the "how are you arriving?" check-in + daily mantra (with 🔄
  suggestions), ➕ **add-a-task** live, **drag-to-reorder** (⠿ handle) + **sort by priority**, a
  🧭 priority guide, **editable labels** per tile, a gentle **overload nudge**, an **end-of-day
  save** (download/copy a recap), Focus mode, "not today" carryover, the 🧠 brain-dump box, the
  reduced-motion toggle, and the live clock. Just set good tasks; the rest comes for free.

**3. Serve + open it.** localStorage needs an `http://` origin, so serve the folder rather than
opening the file path directly:

- Serve (loopback only): `python -m http.server 8799 --bind 127.0.0.1` from the board's folder
  (or `scripts/serve-board.ps1`). Binding to `127.0.0.1` keeps a board of personal tasks off the
  local network.
  If Python isn't available, any static file server works — you just need an `http://` origin.
- Open: prefer a **browser canvas** side-panel if the host supports one (best experience —
  it sits next to the chat). Otherwise open `http://localhost:8799/focus-board.html` in the
  default browser.
- If you truly can't serve, opening the file directly still works in most browsers; just note
  that some restrict localStorage on `file://`, so progress may not persist.

## How to drive it (the partnership part)

Once it's up, keep it current **through conversation** — this is the whole point:

- When the user says they finished / started something, either (a) tell them the one-tap move
  ("tap the pill on the design-doc card to mark it done"), or (b) regenerate the board only when
  the *task list itself* changes (add/rename tasks) — status and notes live in the browser
  (localStorage) and are set by tapping, not by config; a regenerate with the same `dateKey`
  preserves existing progress. Clicking is faster for live updates.
- Encourage logging **incremental notes** ("all three desks up and running") — momentum is
  built from small logged wins, and the momentum feed becomes the story of their day.
- The board is the artifact; you are the partner. Check in, nudge the anchor task (the one with
  a deadline), celebrate real completion, and protect against overload (too many cards = not a
  focus board).

## Executive-function-friendly behavior (how to show up)

The board's UI has EF/neurodivergent affordances, but **the biggest help is how you, the
partner, behave.** This matters for everyone and is essential for people with ADHD or executive-function challenges.
Bake these in — they're not optional politeness, they're the point:

- **You are a body-double.** The whole premise — "drive your board by talking to your AI" — is
  body-doubling, a well-documented focus strategy. Stay present: check in, co-work, be the
  gentle other-in-the-room. Don't just set up the board and vanish.
- **Beat activation energy: shrink the first step.** When someone's stuck starting a task, don't
  say "just do it." Offer *one tiny concrete first action* ("open the doc and write the ugliest
  possible first sentence"). Starting is the wall; make the first step almost too small to refuse.
- **Suggest ONE next thing, not the list.** When asked "what now?", name a single next action —
  and offer Focus mode (dim the rest). A visible list of 8 is overwhelming; one is doable.
- **Celebrate starting, not just finishing.** Moving a task to "in progress" is a real win. Log
  it in the momentum feed. Dopamine on starting is what carries people with ADHD through.
- **Never shame an incomplete.** No "you didn't finish." Offer **"not today"** carryover freely —
  deciding *not* to do something is a valid, healthy choice, not a failure. Missing one task
  should never threaten the whole system (all-or-nothing spirals are how these tools get abandoned).
- **Externalize intrusive thoughts.** If they get pulled toward something mid-task, tell them to
  **park it in the brain-dump box** and keep going — don't chase it now.
- **Make time concrete.** Time blindness is real; reference the clock and the gentle countdowns,
  and nudge the anchor task before its `due` — kindly, not as a threat.
- **Protect against overload.** The board nudges gently when it passes ~9 active tasks; back it
  up — help them carry things to tomorrow (⤳ not today). A focus board that's a backlog isn't a
  focus board.
- **Open with a check-in, not a task list.** Invite them to *locate* how they're arriving
  (above / in-between / below the line — from Conscious Leadership). It's noticing without
  judgment; below-the-line just means "be gentler, shrink the first step." Never diagnose it.
- **Offer an intention (the mantra).** A short line for the day — theirs, or one you suggest that
  fits the check-in (grounding when they're below the line, momentum when above). Keep it kind.
- **Prioritize together, gently.** If everything feels equally urgent, walk the Eisenhower
  quadrants with them (Do first / Schedule / Delegate / Later) and offer "sort by priority" — the
  point is to make *Schedule* (important, not urgent) visible, not to cram more in.
- **Close the day: save it.** At end of day, have them **download or copy the recap** — and if
  they copy it, they can paste it to you to journal the day and set up tomorrow. Celebrate what
  got done; frame carryover as a healthy choice, not a miss.

Frame all of this as *executive-function-friendly design for everyone* — never diagnose, never
assume someone is neurodivergent, and keep every affordance optional. See
`references/neurodivergent-design.md` for the principles behind each feature.

## Honest limits (say these if relevant)

- **State lives in the browser (localStorage).** It's per-browser and you (the agent) can't read
  it back directly. The **end-of-day recap** (download/copy) bridges this: when they paste the
  copied recap to you, you *can* journal and plan from it. For a fully automatic read/write loop,
  see `references/customize.md` (file-backed state, v2).
- **The polished side-panel experience needs a host with a browser canvas** (like the GitHub
  Copilot app). Everywhere else it's a normal browser tab — same board, less integrated.

## References

- `references/tutorial.md` — how to use the board in the GitHub Copilot app (browser canvas) or
  directly through Ember: the daily loop (check-in → mantra → plan → work → end-of-day save).
- `examples/sample-board.html` — a populated example board: open it to see the board in action,
  or copy it as a starting point (it's this template with a sample config injected).
- `references/neurodivergent-design.md` — the executive-function / ADHD design principles behind
  each feature (task initiation, time blindness, working memory, overwhelm, reward, shame, capture,
  body-doubling), and the "make it optional, don't medicalize" stance.
- `references/customize.md` — theming, the file-backed-state upgrade (agent can read/write
  progress), and the optional "shared signals" bridge for people who run a multi-agent workshop.