no-fi-skill 0.0.0-stage → 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Paul van Oijen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,159 @@
-# Temporary Holding Version
+![no-fi: wireframes without the distraction](https://raw.githubusercontent.com/p-a-u-l-i-e/no-fi/main/assets/banner.png)
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# no-fi
+
+**Wireframes without the distraction.** no-fi is an agent skill that draws UI as plain text, so a team argues about layout, content, and flow instead of color and type.
+
+Ask for a screen and Claude answers with a monospaced drawing: boxes, fields, buttons, tables, and bar charts made from plain characters. There are no colors, fonts, or icons to react to, so the only thing left to discuss is structure.
+
+## Contents
+
+- [What it looks like](#what-it-looks-like)
+- [Install](#install)
+- [Use it](#use-it)
+- [The rules](#the-rules)
+- [The vocabulary](#the-vocabulary)
+- [Examples](#examples)
+- [Check your work](#check-your-work)
+- [Repository layout](#repository-layout)
+
+## What it looks like
+
+```
+╔══════════════════════════════════════╗
+║ SIGN IN                              ║
+║                                      ║
+║ ┌──────────────────────────────────┐ ║
+║ │ Email                            │ ║
+║ │ [ ana@acme.com_______________ ]  │ ║
+║ │                                  │ ║
+║ │ Password                         │ ║
+║ │ [ ************_______________ ]  │ ║
+║ │                                  │ ║
+║ │ [[ Sign in ]]   [ Forgot? ]      │ ║
+║ └──────────────────────────────────┘ ║
+╚══════════════════════════════════════╝
+```
+
+The outer frame is double-lined, every box inside it is single-lined, and the primary button gets double brackets. Larger screens are in [Examples](#examples).
+
+## Install
+
+Pick one. Each puts the `no-fi/` folder where your agent loads skills from.
+
+**With npx**
+
+```sh
+npx no-fi-skill
+```
+
+This copies the skill into `~/.claude/skills/no-fi`. Add `--project` to install it into `./.claude/skills/no-fi` instead, and `--force` to replace an existing install.
+
+**With the skills CLI**
+
+```sh
+npx skills add p-a-u-l-i-e/no-fi --skill no-fi
+```
+
+**By hand**
+
+```sh
+git clone https://github.com/p-a-u-l-i-e/no-fi.git
+cp -R no-fi/no-fi ~/.claude/skills/
+```
+
+**On claude.ai**
+
+Download the repository as a ZIP and upload it under Settings, Capabilities, Skills.
+
+The skill is plain text and a few small scripts, 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:
+
+> Wireframe a send-money form with three steps.
+>
+> Draw the settings page for notification preferences.
+>
+> Let's talk through the transactions table before we design it.
+
+Claude replies with a fenced code block, runs the checker on it, and adds a note below the drawing for anything that needs a visual described in words.
+
+## The rules
+
+Seven rules keep every wireframe readable. The full text is in [`no-fi/SKILL.md`](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.
+3. **Fixed width.** No line is longer than 80 characters, and every box is the same width on every row.
+4. **Code block.** Output is always a fenced block, so alignment holds.
+5. **Describe, don't decorate.** No colors, fonts, or icons. Name anything visual in a note below the drawing.
+6. **Use the vocabulary.** Draw each element as the tables show. Don't invent symbols.
+7. **Validate.** Run the checker and fix every failure before showing the result.
+
+## The vocabulary
+
+44 elements in 7 groups: Structure, Fields, Buttons, Feedback, Navigation, Data, and Charts. Each element looks like the component it stands for:
+
+- An **input** is one line. A **textarea** is a taller card with a `//` grip.
+- A **badge** is a pill, `( Paid )`. A **tag** is removable, `<Food x>`.
+- A **button** has brackets, and the **primary** one has double brackets.
+- 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).
+
+## Examples
+
+Seven finished screens in [`no-fi/examples/`](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) |
+
+## Check your work
+
+Two scripts ship with the skill. Each comes in Node and Python, with the same output.
+
+**Check a wireframe**
+
+```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.
+
+**Check vocabulary coverage**
+
+```sh
+node no-fi/scripts/check_coverage.mjs
+python3 no-fi/scripts/check_coverage.py
+```
+
+It confirms every vocabulary element appears in at least one example screen.
+
+## 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
+```
+
+## License
+
+[MIT](LICENSE)

package/bin/no-fi-skill.mjs

@@ -0,0 +1,67 @@
+#!/usr/bin/env node
+// npx no-fi-skill            Install the skill into ~/.claude/skills/no-fi.
+// npx no-fi-skill --project  Install it into ./.claude/skills/no-fi instead.
+// npx no-fi-skill check FILE Run the wireframe checker.
+import { spawnSync } from "node:child_process";
+import fs from "node:fs";
+import os from "node:os";
+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 { version } = JSON.parse(fs.readFileSync(path.join(root, "package.json"), "utf8"));
+
+const usage = `no-fi ${version}: wireframes without the distraction.
+
+Usage:
+  npx no-fi-skill                     Install the skill into ~/.claude/skills/no-fi
+  npx no-fi-skill --project           Install it into ./.claude/skills/no-fi
+  npx no-fi-skill --force             Replace an existing install
+  npx no-fi-skill check FILE [FILE]   Check wireframes
+
+More: https://no-fi.dev`;
+
+const skip = new Set(["__pycache__", ".DS_Store"]);
+
+function install(flags) {
+  const project = flags.has("--project");
+  const target = path.join(project ? process.cwd() : os.homedir(), ".claude", "skills", "no-fi");
+  const shown = project ? "./.claude/skills/no-fi" : "~/.claude/skills/no-fi";
+  const exists = fs.existsSync(target);
+  if (exists && !flags.has("--force")) {
+    console.error(`${shown} already exists. Run again with --force to replace it.`);
+    return 1;
+  }
+  fs.rmSync(target, { recursive: true, force: true });
+  fs.cpSync(skill, target, { recursive: true, filter: (src) => !skip.has(path.basename(src)) });
+  console.log(`${exists ? "Updated" : "Installed"} no-fi ${version} in ${shown}`);
+  return 0;
+}
+
+function check(files) {
+  const script = path.join(skill, "scripts", "check_wireframe.mjs");
+  return spawnSync(process.execPath, [script, ...files], { stdio: "inherit" }).status ?? 1;
+}
+
+function main(args) {
+  if (args.includes("-h") || args.includes("--help")) {
+    console.log(usage);
+    return 0;
+  }
+  if (args.includes("-v") || args.includes("--version")) {
+    console.log(version);
+    return 0;
+  }
+  if (args[0] === "check") return check(args.slice(1));
+
+  const flags = new Set(args);
+  const unknown = args.filter((arg) => !["--project", "--force"].includes(arg));
+  if (unknown.length) {
+    console.error(`Unknown argument: ${unknown[0]}\n\n${usage}`);
+    return 2;
+  }
+  return install(flags);
+}
+
+process.exit(main(process.argv.slice(2)));

package/no-fi/SKILL.md

@@ -0,0 +1,178 @@
+---
+name: no-fi
+description: Draw low-fidelity UI wireframes and charts as plain text, so people can discuss layout, content, and flow without being distracted by visual design. Use when the user asks for a wireframe, layout sketch, screen flow, dashboard, or to "talk through" a screen before any visuals exist. Output is text only, in a code block, with no emoji, color, or images.
+---
+
+# no-fi
+
+Draw screens as monospaced text. The goal is to make the conversation about structure, content, and flow, not color, type, or polish.
+
+## 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.
+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.
+5. **Describe, don't decorate.** No colors, fonts, or icons. If something needs a visual, name it in words in a note below the drawing.
+6. **Use the vocabulary.** Draw each element the way the tables below show it. Do not invent a symbol. If an element is missing, draw the closest one and say what it is in a note.
+7. **Validate.** Run the checker before showing the result:
+
+   ```sh
+   node no-fi/scripts/check_wireframe.mjs path/to/wireframe.txt
+   ```
+
+   Without Node, `python3 no-fi/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.
+
+## Draw it like the UI it stands for
+
+Each element should look like the component it represents, not a character that hints at it.
+
+- A one-line field is an **input**. A taller card with a `//` grip is a **textarea**. They are never interchangeable.
+- A bare `!` is not a component. Use an **alert** (a card with an icon) for messages and a **field error** under a field.
+- A **badge** is a pill, `( Paid )`. A **tag** is removable, `<Food x>`. A **button** has brackets, and the **primary** one has double brackets.
+- Open states are drawn open: a **select** with its **menu** below, an **accordion** with its content under it.
+- Floating things (**modal**, **toast**, **tooltip**) are cards drawn inside the screen they sit on.
+
+## Vocabulary
+
+<!-- vocabulary:start -->
+
+### Structure
+
+| Element | Draw as | Notes |
+| --- | --- | --- |
+| Screen | the outermost container, in double lines: `╔═╗ ║ ╚═╝`. One per wireframe. | Double lines mean the outer frame. |
+| Card | any box inside the screen, in single lines: `┌─┐ │ └─┘` | Single lines mean a nested box. Blank line between stacked cards. |
+| Heading | `SECTION NAME` in capitals, underlined with `═════` for a major section | Capitals. Underline with a double rule for a major section. |
+| Divider | `─────` across a screen, or `├─────┤` across a card | A rule between groups. |
+| Placeholder | `[image: description]` inside a card | Say what goes there. |
+| Skeleton | `xxxxxxxx  xxxxx` for content still loading | Content that has not arrived yet. |
+| Annotation | `<-- note` beside an element. A design note, not part of the UI. | Design notes live outside the UI. |
+
+### Fields
+
+| Element | Draw as | Notes |
+| --- | --- | --- |
+| Input | `[ value________ ]` on one line, label above | One line. Label above, value inside. |
+| Textarea | a card several lines tall with a `//` resize grip in the bottom-right | Taller than an input. The grip tells them apart. |
+| Search | `[? Search_____]` | A question mark marks it as search. |
+| Select | `[ Choose      v ]` | v marks the menu. |
+| Menu | a card directly under an open select, `>` marks the highlighted row | The open state of a select. |
+| Checkbox | `[x]` checked, `[ ]` unchecked | x means checked. |
+| Radio | `(*)` selected, `( )` unselected | Star means selected. |
+| Toggle | `[ON ]` / `[OFF]` | Always four characters wide. |
+| Slider | `[----o-------]` with the value beside it | o is the handle. |
+| Required | `Name *` | Star after the label. |
+| Field error | `(!) message` on the line directly under the field | Sits under the field it belongs to. |
+
+### Buttons
+
+| Element | Draw as | Notes |
+| --- | --- | --- |
+| Primary button | `[[ Save ]]`, last in a row | Double brackets. One per view. |
+| Button | `[ Cancel ]` | Single brackets. Secondary actions. |
+| Icon button | `[ + ]`, `[ ... ]`, `[ ? ]` | A symbol alone. Name it in a note. |
+| Disabled | `[- Continue -]`, dashes mark it as dimmed | Say why, in a tooltip or note. |
+
+### Feedback
+
+| Element | Draw as | Notes |
+| --- | --- | --- |
+| Alert | a full-width card with a status icon: `(!)` warning, `(i)` info, `(ok)` success, `(x)` error | Icon, message, optional action. |
+| Toast | a small card with an icon, a short message, and `x` to close | Brief. Always closes with x. |
+| Modal | a card inside the screen with a capitalized title, `x`, a divider, body, and actions | Sits inside the screen it covers. |
+| Tooltip | a small card under its element, with `^` pointing up at it | Caret points at the trigger. |
+| Badge | `( Paid )` status pill, `(3)` count | Pill for status, bare number for a count. |
+| Tag | `<Food x>` removable filter | x removes it. |
+| Avatar | `(AN)` initials in a circle | A person or account. |
+
+### Navigation
+
+| Element | Draw as | Notes |
+| --- | --- | --- |
+| Tabs | `[ Active ]  Other  More` | Active tab is bracketed. |
+| Breadcrumb | `Home > Cards > Visa` | Greater-than between levels. |
+| Pagination | `< 1 [2] 3 4 >` | Current page in brackets. |
+| Stepper | `*-----o-----o` with step names below | Star is reached, o is still ahead. |
+| Accordion | `v Open` with content below it, `> Closed` | v is open, > is closed. |
+| Link | `Label >` | Greater-than after the label. |
+
+### Data
+
+| Element | Draw as | Notes |
+| --- | --- | --- |
+| Table | a card with `┬ ┼ ┴` column dividers, header in capitals, `v` or `^` marks the sort | Sort arrow beside the sorted column. |
+| Delta | `^ +2.1%` up, `v -3.4%` down | Arrow and signed number. |
+| Progress | `[=======---] 70%`, `[ ▮▮▮▮▯▯▯▯ ] 50%`, or `[ ████▒▒▒▒ ] 50%` | Three styles. The fill matches the percent. |
+
+### Charts
+
+| Element | Draw as | Notes |
+| --- | --- | --- |
+| 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. |
+| 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. |
+| 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.
+- 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.
+
+## Layout
+
+- Sketch the frame first, then fill in content. Confirm the frame before adding detail.
+- Use one width per kind of screen so right edges line up across a set: 80 columns for a full screen, 49 for a form.
+- Right-align anything that sits at the right of a row (actions, totals, a toast), so every row ends on the same column.
+- Leave one blank line between stacked cards.
+- Put side-by-side cards on the same rows, with a 2-character gap between them.
+- Show hierarchy with capitals, rules, and nesting, not with size.
+
+## Output format
+
+1. The wireframe, in one fenced block.
+2. A short list of notes for anything the drawing cannot show: states, interactions, data sources.
+3. The checker result, if it was run.
+
+## Example
+
+```
+╔═════════════════════════════════════╗
+║ SIGN IN                             ║
+║ ═══════════════════════════════════ ║
+║                                     ║
+║ Email *                             ║
+║ [ ana@acme.co____________________ ] ║
+║                                     ║
+║ Password *                          ║
+║ [ ************___________________ ] ║
+║ (!) Wrong email or password         ║
+║                                     ║
+║ [ ] Remember me                     ║
+║                                     ║
+║ Forgot password >     [[ Sign in ]] ║
+╚═════════════════════════════════════╝
+```
+
+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
+```

package/no-fi/examples/activity-patterns.txt

@@ -0,0 +1,31 @@
+╔══════════════════════════════════════════════════════════════════════════════╗
+║ ACTIVITY PATTERNS                                                            ║
+║ ════════════════════════════════════════════════════════════════════════════ ║
+║                                                                              ║
+║ Average spend per weekday  (one row is $25)                                  ║
+║                     ███  ▄▄▄                                                 ║
+║                ▂▂▂  ███  ███                                                 ║
+║      ▆▆▆       ███  ███  ███  ▁▁▁                                            ║
+║ ▄▄▄  ███       ███  ███  ███  ███                                            ║
+║ ███  ███  ███  ███  ███  ███  ███                                            ║
+║ ███  ███  ███  ███  ███  ███  ███                                            ║
+║ ───  ───  ───  ───  ───  ───  ───                                            ║
+║ Mon  Tue  Wed  Thu  Fri  Sat  Sun                                            ║
+║                                                                              ║
+║ Transactions by hour (2-hour bins)                                           ║
+║       00  04  08  12  16  20                                                 ║
+║ Mon         ░░░░▒▒▒▒▒▒░░░░                                                   ║
+║ Tue         ░░░░▒▒▓▓▒▒░░░░                                                   ║
+║ Wed         ░░░░▒▒▒▒▒▒░░░░                                                   ║
+║ Thu         ░░░░▓▓▓▓▓▓▒▒░░                                                   ║
+║ Fri       ░░░░▒▒████▓▓▓▓░░   <-- lunch peak                                  ║
+║ Sat         ░░▒▒▒▒▒▒▓▓▓▓▒▒▒▒                                                 ║
+║ Sun           ░░░░▒▒▒▒▒▒░░░░                                                 ║
+║                                                                              ║
+║ Low ░ ▒ ▓ █ High                                                             ║
+║                                                                              ║
+║ Trends, last 30 days                                                         ║
+║ Food      ▃▂▃▄▆█▇▅▄▃▂▂      $640   v -2.0%                                   ║
+║ Housing   ▅▅▅▅▅▅▅▅▅▅▅▆    $1,200   ^ +1.2%                                   ║
+║ Travel    ▁▁▂▃▅█▇▆▄▂▁▂      $310   ^ +8.5%                                   ║
+╚══════════════════════════════════════════════════════════════════════════════╝

package/no-fi/examples/card-details.txt

@@ -0,0 +1,36 @@
+╔══════════════════════════════════════════════════════════════════════════════╗
+║ Home > Cards > Visa ****4821                                                 ║
+║                                                                              ║
+║ CARD CONTROLS                                                        [ ... ] ║
+║ ════════════════════════════════════════════════════════════════════════════ ║
+║                                                                              ║
+║ ┌──────────────────────────────────────┐  ┌────────────────────────────────┐ ║
+║ │                                      │  │ Freeze card              [OFF] │ ║
+║ │    [image: card front]               │  │ Tap to pay               [ON ] │ ║
+║ │                                      │  │                                │ ║
+║ │                                      │  │ [ Freeze ] <-- asks first      │ ║
+║ └──────────────────────────────────────┘  └────────────────────────────────┘ ║
+║                                                                              ║
+║ v Limits                                                                     ║
+║     Daily spend  [-------o----]  $500                                        ║
+║ > Billing address                                                            ║
+║                                                                              ║
+║ RECENT                                                                       ║
+║ xxxxxxxx   xxxxxxxxxxxx        xxxxx                                         ║
+║ xxxxxxxx   xxxxxxxx             xxxxx                                        ║
+║                                                                              ║
+║ ──────────────────────────────────────────────────────────────────────────── ║
+║                                                                              ║
+║                ┌────────────────────────────────────────────┐                ║
+║                │ FREEZE THIS CARD?                        x │                ║
+║                ├────────────────────────────────────────────┤                ║
+║                │ Purchases and withdrawals will be declined │                ║
+║                │ until you unfreeze it.                     │                ║
+║                │                                            │                ║
+║                │            [ Cancel ]  [[ Freeze ]]        │                ║
+║                └────────────────────────────────────────────┘                ║
+║                                                                              ║
+║                                                 ┌──────────────────────────┐ ║
+║                                                 │ (ok) Card frozen       x │ ║
+║                                                 └──────────────────────────┘ ║
+╚══════════════════════════════════════════════════════════════════════════════╝

package/no-fi/examples/fintech-dashboard.txt

@@ -0,0 +1,42 @@
+╔══════════════════════════════════════════════════════════════════════════════╗
+║                                                                              ║
+║ ┌──────────────────────────────────────────────────────────────────────────┐ ║
+║ │ ACME BANK    [ Overview ]  Send  Cards  Settings  [ + ]  Inbox (3)  (AN) │ ║
+║ └──────────────────────────────────────────────────────────────────────────┘ ║
+║                                                                              ║
+║ ┌──────────────────────────────────────────────────────────────────────────┐ ║
+║ │ Good morning, Ana                                       Account ****4821 │ ║
+║ └──────────────────────────────────────────────────────────────────────────┘ ║
+║                                                                              ║
+║ ┌──────────────────────┐  ┌──────────────────────┐  ┌──────────────────────┐ ║
+║ │ BALANCE              │  │ SPENT THIS MONTH     │  │ SAVED                │ ║
+║ │                      │  │                      │  │                      │ ║
+║ │ $12,480.00           │  │ $2,315.40            │  │ $860.00              │ ║
+║ │ ^ +2.1% this month   │  │ v -3.4% this month   │  │ of $1,000 goal       │ ║
+║ │ ▂▃▂▄▅▄▆▇▆█▇█         │  │ [======----] 62%     │  │ [=========-] 86%     │ ║
+║ └──────────────────────┘  └──────────────────────┘  └──────────────────────┘ ║
+║                                                                              ║
+║ ┌───────────────────────────────────┐  ┌───────────────────────────────────┐ ║
+║ │ RECENT ACTIVITY                   │  │ SPENDING BY CATEGORY              │ ║
+║ │                                   │  │ (one █ is $100)                   │ ║
+║ │ Today  Cafe Nero          -$4.50  │  │ Food     ██████▍           $640   │ ║
+║ │ Today  Salary (Acme)     +$3,200  │  │ Housing  ████████████    $1,200   │ ║
+║ │ Mon    Netflix           -$15.99  │  │ Travel   ███▏              $310   │ ║
+║ │ Sun    Grocer Co         -$82.10  │  │ Fun      █▋                $165   │ ║
+║ │                                   │  │                                   │ ║
+║ │ [ See all transactions ]          │  │ [ View report ]                   │ ║
+║ └───────────────────────────────────┘  └───────────────────────────────────┘ ║
+║                                                                              ║
+║ ┌──────────────────────────────────────────────────────────────────────────┐ ║
+║ │ UPCOMING BILLS                                                           │ ║
+║ │                                                                          │ ║
+║ │ Mar 28  Electric          $74.00     [ Pay ]                             │ ║
+║ │ Mar 30  Mobile            $32.00     [ Pay ]                             │ ║
+║ │ Apr 01  Rent           $1,200.00     [ Pay ]                             │ ║
+║ └──────────────────────────────────────────────────────────────────────────┘ ║
+║                                                                              ║
+║ ┌──────────────────────────────────────────────────────────────────────────┐ ║
+║ │ (!) 1 transfer needs approval: Jo Kim, $250.00              [[ Review ]] │ ║
+║ └──────────────────────────────────────────────────────────────────────────┘ ║
+║                                                                              ║
+╚══════════════════════════════════════════════════════════════════════════════╝

package/no-fi/examples/send-money-form.txt

@@ -0,0 +1,31 @@
+╔═══════════════════════════════════════════════╗
+║ SEND MONEY                        Step 1 of 3 ║
+║ ═════════════════════════════════════════════ ║
+║                                               ║
+║ *---------o---------o                         ║
+║ Details   Review    Done                      ║
+║                                               ║
+║ To *                                          ║
+║ [ Jo Kim__________________________ ]          ║
+║                                               ║
+║ Amount *                                      ║
+║ [ $900.00_________________________ ]          ║
+║ (!) Over your $500 daily limit                ║
+║                                               ║
+║ Note (optional)                               ║
+║ ┌───────────────────────────────────────────┐ ║
+║ │ Add a note for Jo...                      │ ║
+║ │                                           │ ║
+║ │                                    //     │ ║
+║ └───────────────────────────────────────────┘ ║
+║                                               ║
+║ ┌───────────────────────────────────────────┐ ║
+║ │ (i) Transfers over $200 need approval.    │ ║
+║ └───────────────────────────────────────────┘ ║
+║                                               ║
+║ [ Cancel ]                     [- Continue -] ║
+║                                       ^       ║
+║                ┌────────────────────────────┐ ║
+║                │ Fix the amount to continue │ ║
+║                └────────────────────────────┘ ║
+╚═══════════════════════════════════════════════╝

package/no-fi/examples/settings-notifications.txt

@@ -0,0 +1,29 @@
+╔═══════════════════════════════════════════════╗
+║ NOTIFICATIONS                                 ║
+║ ═════════════════════════════════════════════ ║
+║                                               ║
+║ Email alerts                            [ON ] ║
+║ Push alerts                             [OFF] ║
+║                                               ║
+║ Notify me about                               ║
+║ [x] Large transactions                        ║
+║ [x] Failed payments                           ║
+║ [ ] Marketing                                 ║
+║                                               ║
+║ Alert me above                                ║
+║ [-----o------]  $200                          ║
+║                                               ║
+║ v Delivery                                    ║
+║     (*) Instantly      ( ) Daily digest       ║
+║     Quiet hours  [ 22:00 v ]  to  [ 07:00 v ] ║
+║ > Advanced                                    ║
+║                                               ║
+║ Storage used                                  ║
+║ [ █████████████▒▒▒▒▒▒▒ ] 65%                  ║
+║                                               ║
+║ ┌───────────────────────────────────────────┐ ║
+║ │ (i) Changes apply to all devices.         │ ║
+║ └───────────────────────────────────────────┘ ║
+║                                               ║
+║ [- Reset -]                        [[ Save ]] ║
+╚═══════════════════════════════════════════════╝

package/no-fi/examples/spending-report.txt

@@ -0,0 +1,31 @@
+╔══════════════════════════════════════════════════════════════════════════════╗
+║ SPENDING REPORT                                           [ Last 30 days v ] ║
+║ ════════════════════════════════════════════════════════════════════════════ ║
+║ [ Spending ]  Income  Savings                                                ║
+║                                                                              ║
+║ $2,315.40   v -3.4% vs April                                                 ║
+║                                                                              ║
+║ Weekly spend                                                                 ║
+║ $450 │                                                                       ║
+║      │             *               *                                         ║
+║      │                                     *                                 ║
+║ $225 │     *               *           *                                     ║
+║      │ *               *       *                                             ║
+║      │         *                                                             ║
+║   $0 │                                                                       ║
+║      └────────────────────────────────────────                               ║
+║       Mar 1       Mar 10      Mar 19      Mar 28                             ║
+║                                                                              ║
+║ Top merchants   (one █ is $100)                                              ║
+║ Rent Co      ████████████   $1,200                                           ║
+║ Grocer Co    ████▏            $410                                           ║
+║ Cafe Nero    █▊               $180                                           ║
+║ Electric Co  ▊                 $74                                           ║
+║                                                                              ║
+║ By category                                                                  ║
+║ [FFFFFFHHHHHHHHTTOOOO]                                                       ║
+║ F Food 30%   H Housing 40%   T Travel 10%   O Other 20%                      ║
+║                                                                              ║
+║ Budget used                                                                  ║
+║ [ ▮▮▮▮▮▮▮▮▮▮▮▮▯▯▯▯▯▯▯▯ ] 62%                                                 ║
+╚══════════════════════════════════════════════════════════════════════════════╝