no-fi-skill 0.3.0 → 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,42 +106,47 @@ 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
 
-The checker ships with the skill, in Node and Python with the same output. `npx no-fi-skill check` runs it without installing anything.
+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
 ```
 
+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
 
-`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:
+`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
 python3 scripts/sync_vocabulary.py                 # rewrite the tables in SKILL.md
 node scripts/check_coverage.mjs                    # every element appears in an example
-node no-fi/scripts/check_wireframe.mjs no-fi/examples/*.txt
+node plugin/skills/no-fi/scripts/check_wireframe.mjs plugin/skills/no-fi/examples/*.txt
 ```
 
 `python3 scripts/check_coverage.py` gives the same coverage output without Node.
@@ -145,15 +154,17 @@ node no-fi/scripts/check_wireframe.mjs no-fi/examples/*.txt
 ## Repository layout
 
 ```
-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
+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.3.0",
+  "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

@@ -18,10 +18,10 @@ 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 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.