no-fi-skill 0.2.1 → 0.3.1

package/README.md

@@ -39,7 +39,11 @@ The outer frame is double-lined, every box inside it is single-lined, and the pr
 
 ## Install
 
-Pick one. Each puts the `no-fi/` folder where your agent loads skills from.
+Pick one. Each puts the `no-fi` skill folder where your agent loads skills from.
+
+**With a prompt**
+
+Copy the install prompt from [no-fi.dev](https://no-fi.dev/#get-started) and paste it into Claude Code or any agent. It runs the npx command below, or downloads the files one by one if it can't run npx.
 
 **With npx**
 
@@ -59,18 +63,18 @@ npx skills add p-a-u-l-i-e/no-fi --skill no-fi
 
 ```sh
 git clone https://github.com/p-a-u-l-i-e/no-fi.git
-cp -R no-fi/no-fi ~/.claude/skills/
+cp -R no-fi/plugin/skills/no-fi ~/.claude/skills/
 ```
 
 **On claude.ai**
 
-Download the repository as a ZIP and upload it under Settings, Capabilities, Skills.
+Download [no-fi.zip](https://no-fi.dev/no-fi.zip) and upload it under Settings, Capabilities, Skills. It holds only the skill folder. GitHub's Download ZIP holds the whole repository, which claude.ai won't take as a skill.
 
-The skill is plain text and a few small scripts, so you can read every file before you install it.
+The skill is plain text plus one small checker script, in Node and Python, so you can read every file before you install it.
 
 ## Use it
 
-Ask for a screen the way you would ask a designer for a sketch:
+Ask for a screen the way you would ask a designer for a sketch. Saying wireframe or sketch is enough to load the skill, or type `/no-fi` in Claude Code.
 
 > Wireframe a send-money form with three steps.
 >
@@ -82,7 +86,7 @@ Claude replies with a fenced code block, runs the checker on it, and adds a note
 
 ## The rules
 
-Seven rules keep every wireframe readable. The full text is in [`no-fi/SKILL.md`](no-fi/SKILL.md).
+Seven rules keep every wireframe readable. The full text is in [`SKILL.md`](plugin/skills/no-fi/SKILL.md).
 
 1. **Plain characters, plus box-drawing.** Printable ASCII, box-drawing borders, and block characters for bars and charts. No emoji, no tabs.
 2. **Double outside, single inside.** The outermost container uses double lines. Every box inside it uses single lines.
@@ -102,56 +106,65 @@ Seven rules keep every wireframe readable. The full text is in [`no-fi/SKILL.md`
 - Open states are drawn open: a **select** with its menu below, an **accordion** with its content under it.
 - **Modals**, **toasts**, and **tooltips** are cards drawn inside the screen they sit on.
 
-The complete table, with a drawing and a note for each element, is in [`no-fi/SKILL.md`](no-fi/SKILL.md). The same data is in [`no-fi/vocabulary.json`](no-fi/vocabulary.json).
+The complete table, with a drawing and a note for each element, is in [`SKILL.md`](plugin/skills/no-fi/SKILL.md). The same data is in [`vocabulary.json`](plugin/skills/no-fi/vocabulary.json).
 
 ## Examples
 
-Seven finished screens in [`no-fi/examples/`](no-fi/examples), built to use the whole vocabulary:
+Seven finished screens in [`examples/`](plugin/skills/no-fi/examples), built to use the whole vocabulary:
 
 | Screen | File |
 | --- | --- |
-| Fintech dashboard | [`fintech-dashboard.txt`](no-fi/examples/fintech-dashboard.txt) |
-| Send money form | [`send-money-form.txt`](no-fi/examples/send-money-form.txt) |
-| Transactions table | [`transactions-table.txt`](no-fi/examples/transactions-table.txt) |
-| Spending report | [`spending-report.txt`](no-fi/examples/spending-report.txt) |
-| Card details | [`card-details.txt`](no-fi/examples/card-details.txt) |
-| Notification settings | [`settings-notifications.txt`](no-fi/examples/settings-notifications.txt) |
-| Activity patterns | [`activity-patterns.txt`](no-fi/examples/activity-patterns.txt) |
+| Fintech dashboard | [`fintech-dashboard.txt`](plugin/skills/no-fi/examples/fintech-dashboard.txt) |
+| Send money form | [`send-money-form.txt`](plugin/skills/no-fi/examples/send-money-form.txt) |
+| Transactions table | [`transactions-table.txt`](plugin/skills/no-fi/examples/transactions-table.txt) |
+| Spending report | [`spending-report.txt`](plugin/skills/no-fi/examples/spending-report.txt) |
+| Card details | [`card-details.txt`](plugin/skills/no-fi/examples/card-details.txt) |
+| Notification settings | [`settings-notifications.txt`](plugin/skills/no-fi/examples/settings-notifications.txt) |
+| Activity patterns | [`activity-patterns.txt`](plugin/skills/no-fi/examples/activity-patterns.txt) |
 
 ## Check your work
 
-Two scripts ship with the skill. Each comes in Node and Python, with the same output.
-
-**Check a wireframe**
+Your agent checks every wireframe before it shows you one. To check one yourself, from anywhere:
 
 ```sh
-node no-fi/scripts/check_wireframe.mjs wireframe.txt
-python3 no-fi/scripts/check_wireframe.py wireframe.txt
 npx no-fi-skill check wireframe.txt
 ```
 
-It fails on unsupported characters, tabs, ASCII box borders, boxes that don't close or line up, mixed double and single lines in one box, a double-line box nested inside another box, table dividers that don't land in the same column, progress bars whose fill disagrees with their percentage, bar chart rows whose length disagrees with their value, heatmaps without a legend, and column charts that don't say what a row is worth.
+The checker also ships with the skill, in Node and Python with the same output. From an install, or from this repository:
+
+```sh
+node ~/.claude/skills/no-fi/scripts/check_wireframe.mjs wireframe.txt
+python3 plugin/skills/no-fi/scripts/check_wireframe.py wireframe.txt
+```
+
+It fails on unsupported characters, tabs, ASCII box borders, boxes that don't close or line up, mixed double and single lines in one box, a double-line box nested inside another box, table dividers that don't land in the same column, progress bars whose fill disagrees with their percentage, bar chart rows whose length disagrees with their value, heatmaps and stacked columns without a legend, and column charts that don't say what a row is worth.
+
+## Maintaining the vocabulary
 
-**Check vocabulary coverage**
+`plugin/skills/no-fi/vocabulary.json` is the source of truth. These scripts live in `scripts/`, outside the skill, so they don't ship to users. After editing the vocabulary, run:
 
 ```sh
-node no-fi/scripts/check_coverage.mjs
-python3 no-fi/scripts/check_coverage.py
+python3 scripts/sync_vocabulary.py                 # rewrite the tables in SKILL.md
+node scripts/check_coverage.mjs                    # every element appears in an example
+node plugin/skills/no-fi/scripts/check_wireframe.mjs plugin/skills/no-fi/examples/*.txt
 ```
 
-It confirms every vocabulary element appears in at least one example screen.
+`python3 scripts/check_coverage.py` gives the same coverage output without Node.
 
 ## Repository layout
 
 ```
-no-fi/               the skill
-  SKILL.md           rules and vocabulary tables
-  vocabulary.json    the element vocabulary as data
-  examples/          finished example screens
-  scripts/           wireframe and coverage checks
-bin/no-fi-skill.mjs  the npx no-fi-skill command
-assets/              README images
-site/                the no-fi.dev site
+plugin/                    the Claude plugin
+  .claude-plugin/          plugin.json
+  skills/no-fi/            the skill
+    SKILL.md               rules and vocabulary tables
+    vocabulary.json        the element vocabulary as data
+    examples/              finished example screens
+    scripts/               the wireframe checker
+scripts/                   maintainer scripts: vocabulary sync and coverage
+bin/no-fi-skill.mjs        the npx no-fi-skill command
+assets/                    README images
+site/                      the no-fi.dev site
 ```
 
 ## License

package/bin/no-fi-skill.mjs

@@ -9,7 +9,7 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 
 const root = path.join(path.dirname(fileURLToPath(import.meta.url)), "..");
-const skill = path.join(root, "no-fi");
+const skill = path.join(root, "plugin", "skills", "no-fi");
 const { version } = JSON.parse(fs.readFileSync(path.join(root, "package.json"), "utf8"));
 
 const usage = `no-fi ${version}: wireframes without the distraction.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "no-fi-skill",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "An agent skill that draws UI wireframes and charts as plain text, so teams discuss layout and flow instead of color and type.",
   "keywords": [
     "wireframe",
@@ -25,7 +25,7 @@
   },
   "files": [
     "bin",
-    "no-fi",
+    "plugin/skills/no-fi",
     "!**/__pycache__",
     "!**/.DS_Store"
   ],

package/{no-fi → plugin/skills/no-fi}/SKILL.md

@@ -9,7 +9,7 @@ Draw screens as monospaced text. The goal is to make the conversation about stru
 
 ## Rules
 
-1. **Plain characters, plus box-drawing.** Printable ASCII, the box-drawing characters used for borders (`╔ ═ ╗ ║ ╚ ╝` and `┌ ─ ┐ │ └ ┘ ├ ┤ ┬ ┴ ┼`), and block characters for progress bars and charts (`▮ ▯ █ ▒ ░ ▓`, the horizontal eighths `▏▎▍▌▋▊▉`, and the vertical steps `▁▂▃▄▅▆▇`). No emoji, no tabs.
+1. **Plain characters, plus box-drawing.** Printable ASCII, the box-drawing characters used for borders (`╔ ═ ╗ ║ ╚ ╝` and `┌ ─ ┐ │ └ ┘ ├ ┤ ┬ ┴ ┼`), and block characters for progress bars and charts (`▮ ▯ █ ▒ ░ ▓`, the horizontal eighths `▏▎▍▌▋▊▉`, and the vertical steps `▁▂▃▄▅▆▇`), and the rounded corners `╭ ╮ ╰ ╯` where a line chart turns. No emoji, no tabs.
 2. **Double outside, single inside.** The outermost container is drawn with double lines `╔═╗`. Every box inside it uses single lines `┌─┐`.
 3. **Fixed width.** Keep every line at 80 characters or fewer. Every box is exactly as wide on every row.
 4. **Code block.** Always wrap the output in a fenced block with no language tag, so monospacing and alignment hold.
@@ -18,12 +18,12 @@ Draw screens as monospaced text. The goal is to make the conversation about stru
 7. **Validate.** Run the checker before showing the result:
 
    ```sh
-   node no-fi/scripts/check_wireframe.mjs path/to/wireframe.txt
+   node ${CLAUDE_SKILL_DIR}/scripts/check_wireframe.mjs path/to/wireframe.txt
    ```
 
-   Without Node, `python3 no-fi/scripts/check_wireframe.py` gives the same output.
+   `${CLAUDE_SKILL_DIR}` is the folder this file is in. Without Node, `python3 ${CLAUDE_SKILL_DIR}/scripts/check_wireframe.py` gives the same output.
 
-   It fails on unsupported characters, tabs, ASCII box borders, boxes that don't close or line up, mixed double and single lines in one box, a double-line box nested inside another box, table dividers that don't land in the same column top and bottom, progress bars whose fill disagrees with their percentage, bar chart rows whose length disagrees with their value and stated unit, heatmaps without a legend, and column charts that don't say what a row is worth. Fix every failure before presenting the wireframe.
+   It fails on unsupported characters, tabs, ASCII box borders, boxes that don't close or line up, mixed double and single lines in one box, a double-line box nested inside another box, table dividers that don't land in the same column top and bottom, progress bars whose fill disagrees with their percentage, bar chart rows whose length disagrees with their value and stated unit, heatmaps and stacked columns without a legend, and column charts that don't say what a row is worth. Fix every failure before presenting the wireframe.
 
 ## Draw it like the UI it stands for
 
@@ -113,22 +113,23 @@ Each element should look like the component it represents, not a character that
 | --- | --- | --- |
 | Bar chart | `Rent Co  ████████████  $1,200`: one `█` per fixed unit, and `▏▎▍▌▋▊▉` add eighths. ASCII fallback: `#` | State the unit of one █. The partial block is the remainder. |
 | Column chart | `███` columns, one row per fixed unit, a `▁▂▃▄▅▆▇` top for the remainder, `───` baseline, labels below. ASCII fallback: `###` | State what one row is worth. The partial top is the remainder. |
-| Line chart | `*` points against a `$400 │` axis and a `└────` baseline | Label the top, middle, and bottom of the axis. |
+| Line chart | a `─` line that turns with `╭ ╮ ╰ ╯` and climbs with `│`, against a `$400 ┤` axis and a `└────` baseline. ASCII fallback: `o` points | Label the top, middle, and bottom of the axis. Each x label sits under the start of its step. |
 | Sparkline | `▁▂▃▄▅▆▇█` from low to high. ASCII fallback: `~` then `_ . - = + * #` | A trend with no axis. |
-| Stacked bar | `[FFFHHHHTO]` with a legend mapping each letter | One letter per share. Legend below. |
+| Stacked column | `███` columns of `█ ▓ ▒ ░` segments, with a `█ Food  ▓ Home` legend. ASCII fallback: `# = : .` | Stack in legend order, darkest at the bottom. |
 | Heatmap | blank, `░ ▒ ▓ █` from light to dark, two characters per cell, with a `Low ░ ▒ ▓ █ High` legend. ASCII fallback: `. : - = + * # % @` | Always draw the legend. |
 
 <!-- vocabulary:end -->
 
 ## Charts
 
-- Draw charts with block characters. Each one has an ASCII fallback for places that can't show blocks: `#` for bars, `###` for columns, `~_.-=+*#` for sparklines, and `. : - = + * # % @` for heatmaps. Use one style within a chart.
+- Draw charts with block characters. Each one has an ASCII fallback for places that can't show blocks: `o` points for line charts, `#` for bars, `###` for columns, `~_.-=+*#` for sparklines, `# = : .` for stacked columns, and `. : - = + * # % @` for heatmaps. Use one style within a chart.
 - State what one unit is: `(one █ is $100)`, `(one row is $25)`. The checker compares each bar's length to its value.
 - Use the partial block for the remainder, so 4.1 units is `████▏`, not `████`. A value under one unit is just the partial block.
 - Label the top, middle, and bottom of an axis, and the first and last point on the x axis.
 - Keep a chart under about eight rows or columns. Summarise the rest in words.
 - A bar's fill must agree with its label. The checker enforces this for progress bars and bar charts.
-- Always draw a legend for stacked bars and heatmaps. The checker requires `Low ░ ▒ ▓ █ High` for a shaded heatmap.
+- Always draw a legend for stacked columns and heatmaps. The checker requires `Low ░ ▒ ▓ █ High` for a shaded heatmap, and a legend naming every shade, like `█ Food  ▓ Home`, for stacked columns.
+- Stack segments in legend order, darkest at the bottom, the same order in every column. Use at most four, and group the rest as Other. Round each segment to whole rows and put exact figures in the legend.
 
 ## Layout
 
@@ -165,14 +166,4 @@ Each element should look like the component it represents, not a character that
 ╚═════════════════════════════════════╝
 ```
 
-Seven full screens that use every element are in `examples/`. `scripts/check_coverage.mjs` confirms that none of the vocabulary goes unused.
-
-## Maintaining the vocabulary
-
-`vocabulary.json` is the source of truth. After editing it, run:
-
-```sh
-python3 no-fi/scripts/sync_vocabulary.py      # rewrite the tables above
-node no-fi/scripts/check_coverage.mjs         # every element appears in an example
-node no-fi/scripts/check_wireframe.mjs no-fi/examples/*.txt
-```
+Seven full screens that use every element are in `examples/`.

package/{no-fi → plugin/skills/no-fi}/examples/spending-report.txt

@@ -6,13 +6,13 @@
 ║ $2,315.40   v -3.4% vs April                                                 ║
 ║                                                                              ║
 ║ Weekly spend                                                                 ║
-║ $450 │                                                                       ║
-║      │             *               *                                         ║
-║      │                                     *                                 ║
-║ $225 │     *               *           *                                     ║
-║      │ *               *       *                                             ║
-║      │         *                                                             ║
-║   $0 │                                                                       ║
+║ $450 ┤                                                                       ║
+║      │            ╭───╮               ╭───╮                                  ║
+║      │            │   │       ╭───╮   │   ╰───                               ║
+║ $225 ┤    ╭───╮   │   ╰───────╯   ╰───╯                                      ║
+║      │────╯   ╰───╯                                                          ║
+║      │                                                                       ║
+║   $0 ┤                                                                       ║
 ║      └────────────────────────────────────────                               ║
 ║       Mar 1       Mar 10      Mar 19      Mar 28                             ║
 ║                                                                              ║
@@ -22,9 +22,17 @@
 ║ Cafe Nero    █▊               $180                                           ║
 ║ Electric Co  ▊                 $74                                           ║
 ║                                                                              ║
-║ By category                                                                  ║
-║ [FFFFFFHHHHHHHHTTOOOO]                                                       ║
-║ F Food 30%   H Housing 40%   T Travel 10%   O Other 20%                      ║
+║ By category   (one row is $100)                                              ║
+║      ░░░                                                                     ║
+║ ░░░  ░░░                                                                     ║
+║ ▓▓▓  ▒▒▒  ░░░  ░░░                                                           ║
+║ ▓▓▓  ▓▓▓  ▒▒▒  ▓▓▓                                                           ║
+║ ▓▓▓  ▓▓▓  ▓▓▓  ▓▓▓                                                           ║
+║ ███  ███  ▓▓▓  ███                                                           ║
+║ ███  ███  ███  ███                                                           ║
+║ ───  ───  ───  ───                                                           ║
+║ Wk1  Wk2  Wk3  Wk4                                                           ║
+║ █ Food 30%  ▓ Housing 40%  ▒ Travel 10%  ░ Other 20%                         ║
 ║                                                                              ║
 ║ Budget used                                                                  ║
 ║ [ ▮▮▮▮▮▮▮▮▮▮▮▮▯▯▯▯▯▯▯▯ ] 62%                                                 ║

package/{no-fi → plugin/skills/no-fi}/scripts/check_wireframe.mjs

@@ -2,7 +2,8 @@
 // Validate a no-fi wireframe.
 //
 // Characters: printable ASCII, box-drawing characters for borders, and block
-// characters for progress bars and charts (see BLOCKS below). Nothing else.
+// characters for progress bars and charts (see BLOCKS below), and rounded corners
+// where a line chart turns. Nothing else.
 //
 // Boxes: the outermost container uses double lines (╔═╗ ║ ╚═╝). Every box nested
 // inside it uses single lines (┌─┐ │ └─┘). Each box must close, its sides must line
@@ -12,8 +13,10 @@
 // - A progress bar's fill must match its percentage.
 // - A bar chart row's length must match its value, using the stated unit
 //   ("one █ is $100"). Without a stated unit the length is not checked.
-// - A heatmap drawn with shade blocks needs a "Low ... High" legend.
-// - A column chart needs a stated row value ("one row is $25").
+// - A chart drawn with shade blocks needs a legend: "Low ... High" for a
+//   heatmap, or one naming every shade ("█ Food  ▓ Home") for stacked columns.
+// - A column chart needs a stated row value ("one row is $25"), unless its
+//   legend names its shades (stacked columns).
 //
 // This is a port of check_wireframe.py. Keep the two in step.
 //
@@ -33,9 +36,12 @@ const BOX_CHARS = new Set(Object.values(STYLES).flatMap((style) => Object.values
 // Block characters, allowed in progress bars and charts.
 const EIGHTHS = "▏▎▍▌▋▊▉"; // horizontal partials, 1/8 to 7/8 of a cell, left to right
 const VERTICAL = "▁▂▃▄▅▆▇"; // vertical partials, 1/8 to 7/8 of a cell, bottom to top
-const SHADES = "░▒▓"; // heatmap intensity, with █ as the darkest
+const SHADES = "░▒▓"; // heatmap intensity and stacked segments, with █ as the darkest
 const BLOCKS = new Set([...(EIGHTHS + VERTICAL + SHADES + "█▮▯")]);
 
+// Rounded corners, allowed where a line chart turns.
+const CURVES = new Set([..."╭╮╰╯"]);
+
 // Progress bars: (filled, empty) pairs. A bar uses one pair, filled first.
 const UNICODE_BARS = [["▮", "▯"], ["█", "▒"]];
 const BAR_CHARS = UNICODE_BARS.flat().join("");
@@ -50,6 +56,7 @@ const BLOCK_ROW = new RegExp(`(?<=\\s)(█*[${EIGHTHS}]?)\\s+${VALUE}(?=\\s|[│
 const HASH_ROW = new RegExp(`(?<=\\s)(#+)\\s+${VALUE}(?=\\s|[│║]|$)`, "g");
 const BLOCK_UNIT = /one █ is \$?([\d,]+(?:\.\d+)?)/;
 const HASH_UNIT = /one # is \$?([\d,]+(?:\.\d+)?)/;
+const SHADE_KEY = /([█░▒▓]) [A-Z]/g;
 
 const number = (text) => Number(text.replace(/,/g, ""));
 
@@ -80,7 +87,7 @@ function checkCharacters(lines) {
     [...line].forEach((ch, index) => {
       const col = index + 1;
       if (ch === "\t") errors.push(`line ${lineNo} col ${col}: tab character, use spaces`);
-      else if (BOX_CHARS.has(ch) || BLOCKS.has(ch)) return;
+      else if (BOX_CHARS.has(ch) || BLOCKS.has(ch) || CURVES.has(ch)) return;
       else if (!(ch >= " " && ch <= "~")) {
         errors.push(`line ${lineNo} col ${col}: unsupported character '${ch}'`);
       }
@@ -135,7 +142,7 @@ function checkBars(lines) {
   return errors;
 }
 
-// Bar charts, heatmaps, and column charts.
+// Bar charts, heatmaps, column charts, and stacked columns.
 function checkCharts(lines) {
   const errors = [];
   const text = lines.join("\n");
@@ -180,13 +187,25 @@ function checkCharts(lines) {
     }
   });
 
-  // A heatmap drawn with shades needs its legend.
-  if ((text.includes("░") || text.includes("▓")) && !/Low [░▒▓█ ]+ High/.test(text)) {
-    errors.push("heatmap: draw a legend like 'Low ░ ▒ ▓ █ High'");
+  // A chart drawn with shades needs its legend. Progress bars use ▒ too, so
+  // leave them out.
+  const charted = text.replace(UNICODE_BAR, "");
+  if ((charted.includes("░") || charted.includes("▓")) && !/Low [░▒▓█ ]+ High/.test(text)) {
+    const named = new Set([...text.matchAll(SHADE_KEY)].map((match) => match[1]));
+    const missing = [...SHADES].filter((c) => charted.includes(c) && !named.has(c));
+    if (named.size === 0) {
+      errors.push(
+        "shaded chart: draw a legend, 'Low ░ ▒ ▓ █ High' for a heatmap " +
+          "or '█ Food  ▓ Home' for stacked columns",
+      );
+    } else if (missing.length) {
+      errors.push(`stacked columns: the legend is missing ${missing.join(" ")}`);
+    }
   }
 
   // A column chart needs to say what a row is worth.
-  if (/─{3}  ─{3}/.test(text) && !text.includes("one row is")) {
+  // Stacked columns name their shades instead.
+  if (/─{3}  ─{3}/.test(text) && !text.includes("one row is") && !text.match(SHADE_KEY)) {
     errors.push("column chart: state what one row is worth, e.g. '(one row is $25)'");
   }
   return errors;

package/{no-fi → plugin/skills/no-fi}/scripts/check_wireframe.py

@@ -2,7 +2,8 @@
 """Validate a no-fi wireframe.
 
 Characters: printable ASCII, box-drawing characters for borders, and block
-characters for progress bars and charts (see BLOCKS below). Nothing else.
+characters for progress bars and charts (see BLOCKS below), and rounded corners
+where a line chart turns. Nothing else.
 
 Boxes: the outermost container uses double lines (╔═╗ ║ ╚═╝). Every box nested
 inside it uses single lines (┌─┐ │ └─┘). Each box must close, its sides must line
@@ -12,8 +13,10 @@ Bars and charts:
 - A progress bar's fill must match its percentage.
 - A bar chart row's length must match its value, using the stated unit
   ("one █ is $100"). Without a stated unit the length is not checked.
-- A heatmap drawn with shade blocks needs a "Low ... High" legend.
-- A column chart needs a stated row value ("one row is $25").
+- A chart drawn with shade blocks needs a legend: "Low ... High" for a
+  heatmap, or one naming every shade ("█ Food  ▓ Home") for stacked columns.
+- A column chart needs a stated row value ("one row is $25"), unless its
+  legend names its shades (stacked columns).
 
 Usage: check_wireframe.py FILE [FILE ...]
 Exit status is 0 when every file passes, 1 otherwise.
@@ -38,9 +41,12 @@ BOX_CHARS = {c for style in STYLES.values() for c in style.values()}
 # Block characters, allowed in progress bars and charts.
 EIGHTHS = "▏▎▍▌▋▊▉"  # horizontal partials, 1/8 to 7/8 of a cell, left to right
 VERTICAL = "▁▂▃▄▅▆▇"  # vertical partials, 1/8 to 7/8 of a cell, bottom to top
-SHADES = "░▒▓"  # heatmap intensity, with █ as the darkest
+SHADES = "░▒▓"  # heatmap intensity and stacked segments, with █ as the darkest
 BLOCKS = set(EIGHTHS + VERTICAL + SHADES + "█▮▯")
 
+# Rounded corners, allowed where a line chart turns.
+CURVES = set("╭╮╰╯")
+
 # Progress bars: (filled, empty) pairs. A bar uses one pair, filled first.
 UNICODE_BARS = (("▮", "▯"), ("█", "▒"))
 BAR_CHARS = "".join(filled + empty for filled, empty in UNICODE_BARS)
@@ -55,6 +61,7 @@ BLOCK_ROW = re.compile(r"(?<=\s)(█*[" + EIGHTHS + r"]?)\s+" + VALUE + r"(?=\s|
 HASH_ROW = re.compile(r"(?<=\s)(#+)\s+" + VALUE + r"(?=\s|[│║]|$)")
 BLOCK_UNIT = re.compile(r"one █ is \$?([\d,]+(?:\.\d+)?)")
 HASH_UNIT = re.compile(r"one # is \$?([\d,]+(?:\.\d+)?)")
+SHADE_KEY = re.compile(r"([█░▒▓]) [A-Z]")
 
 
 def number(text):
@@ -74,7 +81,7 @@ def check_characters(lines):
             col = index + 1
             if ch == "\t":
                 errors.append(f"line {number_} col {col}: tab character, use spaces")
-            elif ch in BOX_CHARS or ch in BLOCKS:
+            elif ch in BOX_CHARS or ch in BLOCKS or ch in CURVES:
                 continue
             elif not (" " <= ch <= "~"):
                 errors.append(f"line {number_} col {col}: unsupported character {ch!r}")
@@ -123,7 +130,7 @@ def check_bars(lines):
 
 
 def check_charts(lines):
-    """Bar charts, heatmaps, and column charts."""
+    """Bar charts, heatmaps, column charts, and stacked columns."""
     errors = []
     text = "\n".join(lines)
 
@@ -158,12 +165,23 @@ def check_charts(lines):
                         f"(one # is {hash_unit.group(1)})"
                     )
 
-    # A heatmap drawn with shades needs its legend.
-    if ("░" in text or "▓" in text) and not re.search(r"Low [░▒▓█ ]+ High", text):
-        errors.append("heatmap: draw a legend like 'Low ░ ▒ ▓ █ High'")
+    # A chart drawn with shades needs its legend. Progress bars use ▒ too, so
+    # leave them out.
+    charted = UNICODE_BAR.sub("", text)
+    if ("░" in charted or "▓" in charted) and not re.search(r"Low [░▒▓█ ]+ High", text):
+        named = set(SHADE_KEY.findall(text))
+        missing = [c for c in SHADES if c in charted and c not in named]
+        if not named:
+            errors.append(
+                "shaded chart: draw a legend, 'Low ░ ▒ ▓ █ High' for a heatmap "
+                "or '█ Food  ▓ Home' for stacked columns"
+            )
+        elif missing:
+            errors.append(f"stacked columns: the legend is missing {' '.join(missing)}")
 
     # A column chart needs to say what a row is worth.
-    if re.search(r"─{3}  ─{3}", text) and "one row is" not in text:
+    # Stacked columns name their shades instead.
+    if re.search(r"─{3}  ─{3}", text) and "one row is" not in text and not SHADE_KEY.search(text):
         errors.append("column chart: state what one row is worth, e.g. '(one row is $25)'")
     return errors
 

package/{no-fi → plugin/skills/no-fi}/vocabulary.json

@@ -324,10 +324,10 @@
     {
       "name": "Line chart",
       "group": "Charts",
-      "draw": "`*` points against a `$400 │` axis and a `└────` baseline",
-      "glyph": "$40 │       *\n$20 │  *  *   *\n $0 │ *\n    └──────────\n     1  2  3  4",
-      "note": "Label the top, middle, and bottom of the axis.",
-      "patterns": ["\\$\\d+k? +│.*\\*"]
+      "draw": "a `─` line that turns with `╭ ╮ ╰ ╯` and climbs with `│`, against a `$400 ┤` axis and a `└────` baseline. ASCII fallback: `o` points",
+      "glyph": "$40 ┤         ╭──╮\n    │         │  │\n$20 ┤   ╭─────╯  ╰──\n    │   │\n $0 ┤───╯\n    └───────────────\n     1  2  3  4  5",
+      "note": "Label the top, middle, and bottom of the axis. Each x label sits under the start of its step.",
+      "patterns": ["\\$\\d+k? +┤", "[╭╰]─+[╮╯]"]
     },
     {
       "name": "Sparkline",
@@ -338,12 +338,12 @@
       "patterns": ["(▁▂|▂▃|▃▄|▄▅|▅▆|▆▇|▇█|█▇|▇▆|▆▅|▅▄|▄▃|▃▂|▂▁)"]
     },
     {
-      "name": "Stacked bar",
+      "name": "Stacked column",
       "group": "Charts",
-      "draw": "`[FFFHHHHTO]` with a legend mapping each letter",
-      "glyph": "[FFFFFFHHHHHHHHTTOOOO]\nF Food  H Home  T Trip",
-      "note": "One letter per share. Legend below.",
-      "patterns": ["\\[([A-Z])\\1+([A-Z])\\2+"]
+      "draw": "`███` columns of `█ ▓ ▒ ░` segments, with a `█ Food  ▓ Home` legend. ASCII fallback: `# = : .`",
+      "glyph": "          ░░░       ░░░\n▒▒▒  ░░░  ▒▒▒       ▓▓▓\n▓▓▓  ▓▓▓  ▓▓▓       ▓▓▓\n███  ▓▓▓  ███  ▓▓▓  ███\n███  ███  ███  ███  ███\n───  ───  ───  ───  ───\nMon  Tue  Wed  Thu  Fri\n█ Food  ▓ Home  ▒ Trip  ░ Other",
+      "note": "Stack in legend order, darkest at the bottom.",
+      "patterns": ["([▓▒░])\\1\\1  ([▓▒░█])\\2\\2", "█ [A-Z][a-z]+[^▓\\n]*▓ [A-Z]"]
     },
     {
       "name": "Heatmap",

package/no-fi/scripts/check_coverage.mjs

@@ -1,73 +0,0 @@
-#!/usr/bin/env node
-// Check that every vocabulary element appears in at least one example.
-//
-// Each element in vocabulary.json lists one or more regex patterns. An element
-// is covered when every one of its patterns matches somewhere in the examples.
-//
-// This is a port of check_coverage.py. Keep the two in step.
-//
-// Usage: node check_coverage.mjs [VOCABULARY_JSON EXAMPLES_DIR]
-// Exit status is 0 when everything is covered, 1 otherwise.
-
-import fs from "node:fs";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import { checkText } from "./check_wireframe.mjs";
-
-const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
-
-function loadExamples(directory) {
-  return Object.fromEntries(
-    fs
-      .readdirSync(directory)
-      .filter((name) => name.endsWith(".txt"))
-      .sort()
-      .map((name) => [name, fs.readFileSync(path.join(directory, name), "utf8")]),
-  );
-}
-
-// Examples that match every pattern, or an empty list if any pattern is unmatched.
-function usedIn(item, examples) {
-  const found = new Set();
-  for (const pattern of item.patterns) {
-    const regex = new RegExp(pattern, "m");
-    const hits = Object.keys(examples).filter((name) => regex.test(examples[name]));
-    if (hits.length === 0) return [];
-    hits.forEach((name) => found.add(name));
-  }
-  return [...found].sort();
-}
-
-function main(argv) {
-  const vocabulary = argv[0] ?? path.join(ROOT, "vocabulary.json");
-  const examplesDir = argv[1] ?? path.join(ROOT, "examples");
-  const data = JSON.parse(fs.readFileSync(vocabulary, "utf8"));
-  const examples = loadExamples(examplesDir);
-
-  const missing = [];
-  for (const item of data.items) {
-    const hits = usedIn(item, examples);
-    const status = hits.length ? "ok  " : "MISS";
-    console.log(`${status} ${item.group.padEnd(10)} ${item.name.padEnd(13)} ${hits.join(", ")}`);
-    if (hits.length === 0) missing.push(item.name);
-  }
-
-  const total = data.items.length;
-  console.log(`\n${total - missing.length} of ${total} elements covered by ${Object.keys(examples).length} examples`);
-
-  // The drawings in the vocabulary must pass the same checks as the screens.
-  const badGlyphs = data.items.flatMap((item) =>
-    checkText(item.glyph).map((error) => `${item.name}: ${error}`),
-  );
-  if (badGlyphs.length) {
-    console.log("\nInvalid glyphs in vocabulary.json:");
-    for (const line of badGlyphs) console.log(`  ${line}`);
-  } else {
-    console.log(`All ${total} vocabulary drawings pass the wireframe checks`);
-  }
-
-  if (missing.length) console.log("Not covered: " + missing.join(", "));
-  return missing.length || badGlyphs.length ? 1 : 0;
-}
-
-if (process.argv[1] === fileURLToPath(import.meta.url)) process.exit(main(process.argv.slice(2)));

package/no-fi/scripts/check_coverage.py

@@ -1,75 +0,0 @@
-#!/usr/bin/env python3
-"""Check that every vocabulary element appears in at least one example.
-
-Each element in vocabulary.json lists one or more regex patterns. An element
-is covered when every one of its patterns matches somewhere in the examples.
-
-Usage: check_coverage.py [VOCABULARY_JSON EXAMPLES_DIR]
-Exit status is 0 when everything is covered, 1 otherwise.
-"""
-
-import json
-import re
-import sys
-from pathlib import Path
-
-from check_wireframe import check_text
-
-ROOT = Path(__file__).resolve().parent.parent
-
-
-def load_examples(directory):
-    return {
-        path.name: path.read_text(encoding="utf-8")
-        for path in sorted(Path(directory).glob("*.txt"))
-    }
-
-
-def used_in(item, examples):
-    """Examples that match every pattern, or an empty list if any pattern is unmatched."""
-    found = set()
-    for pattern in item["patterns"]:
-        regex = re.compile(pattern, re.MULTILINE)
-        hits = {name for name, text in examples.items() if regex.search(text)}
-        if not hits:
-            return []
-        found |= hits
-    return sorted(found)
-
-
-def main(argv):
-    vocabulary = Path(argv[0]) if argv else ROOT / "vocabulary.json"
-    examples_dir = Path(argv[1]) if len(argv) > 1 else ROOT / "examples"
-    data = json.loads(vocabulary.read_text(encoding="utf-8"))
-    examples = load_examples(examples_dir)
-
-    missing = []
-    for item in data["items"]:
-        hits = used_in(item, examples)
-        status = "ok  " if hits else "MISS"
-        print(f"{status} {item['group']:<10} {item['name']:<13} {', '.join(hits)}")
-        if not hits:
-            missing.append(item["name"])
-
-    total = len(data["items"])
-    print(f"\n{total - len(missing)} of {total} elements covered by {len(examples)} examples")
-
-    # The drawings in the vocabulary must pass the same checks as the screens.
-    bad_glyphs = []
-    for item in data["items"]:
-        for error in check_text(item["glyph"]):
-            bad_glyphs.append(f"{item['name']}: {error}")
-    if bad_glyphs:
-        print("\nInvalid glyphs in vocabulary.json:")
-        for line in bad_glyphs:
-            print(f"  {line}")
-    else:
-        print(f"All {total} vocabulary drawings pass the wireframe checks")
-
-    if missing:
-        print("Not covered: " + ", ".join(missing))
-    return 1 if missing or bad_glyphs else 0
-
-
-if __name__ == "__main__":
-    sys.exit(main(sys.argv[1:]))

package/no-fi/scripts/sync_vocabulary.py

@@ -1,57 +0,0 @@
-#!/usr/bin/env python3
-"""Regenerate the vocabulary tables in SKILL.md from vocabulary.json.
-
-Replaces everything between the vocabulary:start and vocabulary:end markers.
-
-Usage: sync_vocabulary.py [--check]
-With --check, writes nothing and exits 1 if SKILL.md is out of date.
-"""
-
-import json
-import sys
-from pathlib import Path
-
-ROOT = Path(__file__).resolve().parent.parent
-START = "<!-- vocabulary:start -->"
-END = "<!-- vocabulary:end -->"
-
-
-def render(data):
-    blocks = []
-    for group in data["groups"]:
-        items = [i for i in data["items"] if i["group"] == group]
-        if not items:
-            continue
-        rows = [f"### {group}", "", "| Element | Draw as | Notes |", "| --- | --- | --- |"]
-        for item in items:
-            rows.append(f"| {item['name']} | {item['draw']} | {item['note']} |")
-        blocks.append("\n".join(rows))
-    return "\n\n".join(blocks)
-
-
-def main(argv):
-    data = json.loads((ROOT / "vocabulary.json").read_text(encoding="utf-8"))
-    skill_path = ROOT / "SKILL.md"
-    skill = skill_path.read_text(encoding="utf-8")
-    if START not in skill or END not in skill:
-        print(f"SKILL.md is missing the {START} / {END} markers")
-        return 1
-
-    head, rest = skill.split(START, 1)
-    _, tail = rest.split(END, 1)
-    updated = f"{head}{START}\n\n{render(data)}\n\n{END}{tail}"
-
-    if "--check" in argv:
-        if updated != skill:
-            print("SKILL.md is out of date. Run scripts/sync_vocabulary.py")
-            return 1
-        print("SKILL.md is up to date")
-        return 0
-
-    skill_path.write_text(updated, encoding="utf-8")
-    print(f"Wrote {len(data['items'])} elements to SKILL.md")
-    return 0
-
-
-if __name__ == "__main__":
-    sys.exit(main(sys.argv[1:]))