jig-ui 0.4.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -72
- package/dist/index.js +675 -243
- package/package.json +1 -1
- package/rules/00-anti-patterns.md +43 -7
- package/rules/01-modes.md +8 -7
- package/rules/02-tokens.md +215 -13
- package/rules/03-patterns.md +71 -4
- package/templates/COMMAND.md.tmpl +56 -10
- package/templates/command-metadata.json +2 -2
- package/tokens/brand.default.css +50 -2
- package/tokens/mode.editorial.css +44 -2
- package/tokens/mode.operator.css +16 -1
- package/tokens/mode.product.css +24 -2
package/README.md
CHANGED
|
@@ -116,13 +116,14 @@ overwrites a config or brand file you have edited.
|
|
|
116
116
|
| `init [--yes]` | Sets the project up: CSS system, brand colour, token files, `jig.config.json`, wired imports, baseline check. The only command that writes into your repo. |
|
|
117
117
|
| `check [--all] [--ci] [--json]` | Runs the rules a machine can decide. Reports findings by rule id. |
|
|
118
118
|
| `update` | Refreshes an install to a newer version, leaving alone any file you have edited. |
|
|
119
|
-
| `explain <rule-id
|
|
119
|
+
| `explain <rule-id \| word> [--list]` | Given an id, prints a rule in full — what it forbids, what to do instead, the version it arrived in, and who checks it. Also resolves the `P-` pattern and `M-` mode specs, which no rule index contains. Given a **word**, searches every title and body and lists what matches, so you can find a rule you cannot name. `--list` prints every id, or one section's. |
|
|
120
120
|
|
|
121
121
|
Flags worth knowing:
|
|
122
122
|
|
|
123
123
|
| Flag | Effect |
|
|
124
124
|
| --- | --- |
|
|
125
125
|
| `check --all` | Scan the whole repo instead of just changed files. Use on a first run. |
|
|
126
|
+
| `explain --list` | Every rule id and title. Add a section letter (`explain G --list`) for one section. |
|
|
126
127
|
| `check --ci` | Mechanical bucket only — deterministic, and exits non-zero on any error. |
|
|
127
128
|
| `check --json` | Machine-readable findings, for tooling or for reading every finding when the terminal output elides repeats. |
|
|
128
129
|
| `init --yes` | Non-interactive; accept every derived default. |
|
|
@@ -144,6 +145,7 @@ on the result — the CLI reports, the agent applies the judgment half.
|
|
|
144
145
|
| `/jig init` | `jig init` — then states the mode it chose and what it wired |
|
|
145
146
|
| `/jig check` | `jig check` — then applies the 97 judgment rules and reports both halves |
|
|
146
147
|
| `/jig explain C-19` | `jig explain C-19` — prints the rule as-is, without paraphrasing it |
|
|
148
|
+
| `/jig explain contrast` | `jig explain contrast` — every rule matching a word, when you do not have an id |
|
|
147
149
|
| `/jig install --agent cursor` | `jig install --agent cursor` |
|
|
148
150
|
| `/jig update` | `jig update` |
|
|
149
151
|
|
|
@@ -179,32 +181,6 @@ any UI, takes the mode from `jig.config.json`, loads the pattern section for
|
|
|
179
181
|
whatever it is building, consumes tokens by name, and cites any rule it
|
|
180
182
|
deliberately breaks.
|
|
181
183
|
|
|
182
|
-
### Slash commands
|
|
183
|
-
|
|
184
|
-
`install` also writes a `/jig` command, so the CLI is reachable without leaving
|
|
185
|
-
your session:
|
|
186
|
-
|
|
187
|
-
```
|
|
188
|
-
/jig init /jig check --all /jig update
|
|
189
|
-
```
|
|
190
|
-
|
|
191
|
-
It runs the CLI and then does the part the CLI cannot — for `/jig check` that
|
|
192
|
-
means applying the 97 judgment rules to the same files and merging both halves
|
|
193
|
-
into one report keyed by rule id.
|
|
194
|
-
|
|
195
|
-
| Harness | Command file |
|
|
196
|
-
| --- | --- |
|
|
197
|
-
| Claude Code | `.claude/commands/jig.md` |
|
|
198
|
-
| Cursor | `.cursor/commands/jig.md` |
|
|
199
|
-
| opencode | `.opencode/command/jig.md` |
|
|
200
|
-
| Gemini CLI | `.gemini/commands/jig.toml` |
|
|
201
|
-
| Codex | — run the CLI directly; see below |
|
|
202
|
-
| Generic | — no harness to register with |
|
|
203
|
-
|
|
204
|
-
Codex's custom prompts are not written: `codex exec` does not expand them, so a
|
|
205
|
-
command file could sit there and never fire. Codex users run
|
|
206
|
-
`npx jig-ui@latest check` directly — the skill in `AGENTS.md` is unaffected.
|
|
207
|
-
|
|
208
184
|
**You still prompt normally.** Ask for a settings page, a data table, an empty
|
|
209
185
|
state — whatever you were going to ask for. What you no longer have to say is
|
|
210
186
|
*how*: "use the design tokens", "handle the loading state", "don't invent a
|
|
@@ -275,6 +251,19 @@ contrast below the floor (`C-19`), removed focus rings (`E-29`), gradient text
|
|
|
275
251
|
(`A-02`), backdrop blur (`A-04`), pure black and white (`C-18`), and the
|
|
276
252
|
violet-band hue check (`A-01`, which asks rather than fails).
|
|
277
253
|
|
|
254
|
+
**It also reads the token layer itself.** `.jig/tokens/*.css` is not application
|
|
255
|
+
code, so no detector scans it — but it is where a mistake costs most, since every
|
|
256
|
+
call site inherits it. `check` reads back what is declared there and holds it to
|
|
257
|
+
the floors the token layer claims: 4.5:1 for text roles, 3:1 for interface
|
|
258
|
+
strokes, **in both light and dark**, plus `--text-prose` at 18px and
|
|
259
|
+
`--size-touch-target` at 48px. Only floors, never density: `--size-control` at
|
|
260
|
+
28px is a deliberate `operator` choice, and reporting it would teach you to
|
|
261
|
+
ignore the ones that matter.
|
|
262
|
+
|
|
263
|
+
This is what makes a hand-written or agent-written token layer safe to have.
|
|
264
|
+
`init` validates a colour once, when it writes it; without this, anything edited
|
|
265
|
+
afterwards was never looked at again.
|
|
266
|
+
|
|
278
267
|
Two deliberate limits. A bare `p-4` is **not** a finding — it resolves through a
|
|
279
268
|
scale, which is what a scale is for, and the scale is your project's decision.
|
|
280
269
|
And a colour outside the framework's default palette is not resolved rather than
|
|
@@ -301,21 +290,21 @@ treatment.
|
|
|
301
290
|
|
|
302
291
|
## Files
|
|
303
292
|
|
|
304
|
-
| File | Contents |
|
|
305
|
-
| --- | --- |
|
|
306
|
-
| `rules/00-anti-patterns.md` | 87 universal rules with corrections |
|
|
307
|
-
| `rules/01-modes.md` | `editorial` / `product` / `operator` profiles |
|
|
308
|
-
| `rules/02-tokens.md` | Token contract, naming, consumption |
|
|
309
|
-
| `rules/03-patterns.md` | Component anatomy and behaviour |
|
|
310
|
-
| `rules/04-principles.md` | Five frames + seven tiebreakers |
|
|
311
|
-
| `rules/05-copy.md` | Interface text rules |
|
|
312
|
-
| `.jig/tokens/brand.*.css` | Identity. One per project. |
|
|
313
|
-
| `.jig/tokens/mode.*.css` | Density, scale, rhythm, motion |
|
|
293
|
+
| File | Contents |
|
|
294
|
+
| --- | --- |
|
|
295
|
+
| `rules/00-anti-patterns.md` | 87 universal rules with corrections |
|
|
296
|
+
| `rules/01-modes.md` | `editorial` / `product` / `operator` profiles |
|
|
297
|
+
| `rules/02-tokens.md` | Token contract, naming, consumption |
|
|
298
|
+
| `rules/03-patterns.md` | Component anatomy and behaviour |
|
|
299
|
+
| `rules/04-principles.md` | Five frames + seven tiebreakers |
|
|
300
|
+
| `rules/05-copy.md` | Interface text rules |
|
|
301
|
+
| `.jig/tokens/brand.*.css` | Identity. One per project. |
|
|
302
|
+
| `.jig/tokens/mode.*.css` | Density, scale, rhythm, motion |
|
|
314
303
|
|
|
315
304
|
`rules/*` and `rules.index.json` live beside your installed skill file, not
|
|
316
305
|
in the project — see above.
|
|
317
306
|
|
|
318
|
-
|
|
307
|
+
Which of these an agent loads, and when, is `AGENTS.md`.
|
|
319
308
|
|
|
320
309
|
## Per-project declaration
|
|
321
310
|
|
|
@@ -324,12 +313,32 @@ Drop this in the project root so mode selection does not require asking on every
|
|
|
324
313
|
```jsonc
|
|
325
314
|
// jig.config.json
|
|
326
315
|
{
|
|
327
|
-
|
|
316
|
+
// Where the token layer lives. `init` writes the brand file here and puts
|
|
317
|
+
// the mode files beside it. Omit it and you get `.jig/tokens/`.
|
|
318
|
+
"brand": "src/styles/jig/brand.acme.css",
|
|
319
|
+
|
|
320
|
+
// One entry per surface. This outranks an agent's own reading of the
|
|
321
|
+
// project, so it is worth getting right before `init` runs.
|
|
328
322
|
"surfaces": [
|
|
329
323
|
{ "match": "/", "mode": "editorial" },
|
|
330
324
|
{ "match": "/app/**", "mode": "product" },
|
|
331
325
|
{ "match": "/admin/**", "mode": "operator" }
|
|
332
|
-
]
|
|
326
|
+
],
|
|
327
|
+
|
|
328
|
+
// Files that render OUTSIDE the cascade, where a literal is the only thing
|
|
329
|
+
// that works: an OG card serialised into an SVG `foreignObject` carries no
|
|
330
|
+
// stylesheet, and a PDF drawn by a React renderer never sees CSS.
|
|
331
|
+
//
|
|
332
|
+
// Prefer an exact path. An exemption is a claim about ONE file's rendering
|
|
333
|
+
// context, and that is usually literally true of one file. Reach for a glob
|
|
334
|
+
// only where the directory exists to hold them — `src/cv/pdf/**` is a fact
|
|
335
|
+
// about that tree; `**/*-card.tsx` is a naming coincidence that would also
|
|
336
|
+
// excuse every real card component you have.
|
|
337
|
+
//
|
|
338
|
+
// `check` names the pattern and its match count on every run, and says so
|
|
339
|
+
// when one is excusing enough files to look like a mistake. Nothing is ever
|
|
340
|
+
// exempt by default: this list is the only source.
|
|
341
|
+
"exempt": ["src/components/og-card.tsx", "src/cv/pdf/**"]
|
|
333
342
|
}
|
|
334
343
|
```
|
|
335
344
|
|
|
@@ -344,36 +353,7 @@ Without this file, follow the selection procedure in `rules/01-modes.md`: infer,
|
|
|
344
353
|
|
|
345
354
|
Then `var(--color-text-strong)`, `var(--spacing-card)`, `var(--text-body)` in any framework. For Tailwind v4, wrap both imports in `@theme` to generate utilities. See `rules/02-tokens.md`.
|
|
346
355
|
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
The system is only worth its context cost if it changes output. Test it rather than assuming.
|
|
350
|
-
|
|
351
|
-
1. Pick a task with known failure modes — a form with validation, or a data table with an empty state.
|
|
352
|
-
2. Run it twice: once with the system loaded, once without.
|
|
353
|
-
3. Diff the output against the self-check in `00`.
|
|
354
|
-
|
|
355
|
-
A rule that does not change the output is either already the model's default (delete it) or too vague to act on (make it specific). Both are fixes to this system, not to the prompt.
|
|
356
|
-
|
|
357
|
-
Re-run after any significant edit to `00` or `03`.
|
|
358
|
-
|
|
359
|
-
## Changing a rule
|
|
360
|
-
|
|
361
|
-
- Values change in the token files, never at the call site.
|
|
362
|
-
- Rules change in `00`–`03`, never by exception in a project.
|
|
363
|
-
- A rule that needs an exception in two projects is wrong; fix the rule.
|
|
364
|
-
- Anything mode-dependent belongs in a mode profile, not in `00`.
|
|
365
|
-
- A new pattern earns a place in `03` after being built three times.
|
|
366
|
-
|
|
367
|
-
## Sources
|
|
368
|
-
|
|
369
|
-
Written from general UI and accessibility practice, plus the constraints specific to agent-generated output — which is where most of the structure comes from: the anti-patterns-first ordering, the mode split, the brand × mode token architecture, and the decidability test applied to every rule.
|
|
370
|
-
|
|
371
|
-
**The numeric defaults are being reconciled.** Type scale, spacing steps, control sizes
|
|
372
|
-
and motion durations started as internally consistent guesses and are being checked, row by
|
|
373
|
-
row, against an external reference on interface design. `RECONCILE.md` tracks the status of
|
|
374
|
-
each: adopted, deliberately kept different, or still open. The accessibility floors are
|
|
375
|
-
outside that process — contrast ratios and target sizes come from WCAG 2.1 AA and are not
|
|
376
|
-
adjustable.
|
|
356
|
+
---
|
|
377
357
|
|
|
378
|
-
|
|
379
|
-
`
|
|
358
|
+
Working on Jig itself rather than with it: `AGENTS.md` for how an agent should
|
|
359
|
+
change the rules, `RECONCILE.md` for where each numeric default came from.
|