Swiss grid todo display

Skill jpoindexter/awwwards-todo-skills/skills/swiss-grid-todo-display

Use when rendering a todo list, checklist, or task status as a clean monospace/ASCII panel — applies Swiss-grid mathematical spacing, a fixed status-symbol set, and four selectable border styles (minimalist, brutalist, terminal, modern) to produce a consistent, scannable display.From its SKILL.md

Install

npx -y skills add jpoindexter/awwwards-todo-skills --skill swiss-grid-todo-display

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

29 days oldThe repository was created 29 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

3.2 KB, 855 tokens by cl100k_base, as published. Nobody here has run it

Swiss Grid Todo Display

Render tasks as a mathematically consistent monospace panel. Every line is the same width, symbols are fixed, and the border style is chosen to match the moment. This is the rendering concern only — score it with awwwards-interface-evaluation, time it with contextual-todo-triggers.

When to use

You need to print a todo/checklist to a terminal, chat, or markdown code block.
You want a repeatable, grid-aligned look instead of ad-hoc bullet lists.

Status symbols (fixed set)

State	Symbol	Notes
`pending`	`[ ]`	empty, actionable
`in_progress`	`[~]`	distinct mid-state
`completed`	`[✓]`	universal done
`cancelled`	`[×]`	dropped

Unknown state → fall back to [ ].

Style variations (pick by intent)

Style	Border	Weight/font intent	Use for
`minimalist`	`▓`	SF Mono, 400	default / daily use
`brutalist`	`▓▓`	Helvetica, 700	celebrating a completion
`terminal`	`░▒▓`	Courier, 400	showing progress/energy
`modern`	`▫`	Inter, 300	fresh topic / new context

Layout algorithm (Swiss grid)

Container width = 48 characters — the "optimal reading measure." Build it deterministically:

borderLine = border.repeat(48) — top and bottom rule.
For each task:
- status = symbol(task.status)
- taskText = task.content.slice(0, 40) — consistent truncation, never overflow the measure.
- row = pad(${border} ${status} ${taskText}, to 47) + border — left-aligned, right-framed.
Join rows between the two border lines with \n.

Left alignment is required (scanning pattern). Truncate, never wrap — wrapping breaks grid consistency and costs Design points in evaluation.

Example (minimalist)

▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ [✓] Review MCP server documentation          ▓
▓ [~] Test Swiss Grid implementation           ▓
▓ [ ] Apply Awwwards evaluation criteria       ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓

Reference implementation

reference/renderer.mjs — self-contained ES module. Exports renderTodos(items, style) and STATUS_SYMBOLS / STYLE_VARIATIONS. Run node reference/renderer.mjs to print all four styles.

Design lineage

48-char measure and modular spacing follow Josef Müller-Brockmann's Grid Systems in Graphic Design; symbol hierarchy and left-alignment follow Ellen Lupton's Thinking with Type.

Agent-runtime notes

Runtime-agnostic — pure string building, no host APIs. The font/weight column is design intent for downstream renderers that support fonts; the ASCII output itself is monospace-only.

What ships with it: 1 file

2.1 KB alongside SKILL.md, 1 of them executable

reference/

renderer.mjsruns2.1 KB