npm - jig-ui - Versions diffs - 0.13.0 → 0.14.0 - Mend

jig-ui 0.13.0 → 0.14.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.

Files changed (10) hide show

package/CHANGELOG.md +63 -0
package/README.md +221 -5
package/dist/index.js +449 -57
package/package.json +2 -2
package/rules/00-anti-patterns.md +101 -0
package/rules/01-modes.md +1 -1
package/rules/03-patterns.md +34 -0
package/rules.index.json +105 -0
package/templates/COMMAND.md.tmpl +242 -14
package/templates/command-metadata.json +5 -0

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "jig-ui",
-  "version": "0.13.0",
-  "description": "A design system for coding agents. 115 numbered UI rules, brand x mode design tokens, and an installer for Claude Code, Codex, Cursor and opencode.",
+  "version": "0.14.0",
+  "description": "A design system for coding agents. 130 numbered UI rules, brand x mode design tokens, and an installer for Claude Code, Codex, Cursor and opencode.",
   "license": "Apache-2.0",
   "type": "module",
   "bin": {

package/rules/00-anti-patterns.md CHANGED Viewed

@@ -574,6 +574,107 @@ Load `05-copy.md` whenever writing or reviewing a user-facing string.
 ---
+## J. Search and sharing
+What a stranger meets **before** the page: the search result, the link preview in
+a message, the card a colleague pastes into a channel. Nobody reads `<head>`, so
+it is the surface that drifts, and it is the one that is read first.
+**Which pages this section applies to is decided by mode, not by taste.**
+`editorial` is first-visit content and is indexable. `product` and `operator` are
+what somebody reaches after signing in, and are not: an admin screen in a search
+result is an invitation, and a login page in one invites credential stuffing. A
+spec overrides the default per page — a CV shared by link, a thank-you page, a
+not-found page — and says why.
+### J-120 Metadata that no longer matches the page
+❌ A title or description still carrying positioning the page dropped, changed in a later commit "when there is time"
+✅ Change the metadata **in the same change as the copy**. A page's title, description and preview text are copy, written by whoever wrote the headline, reviewed the same way.
+This is the whole reason the section exists. A copy pass reads pages; nobody reads `<head>`. One site rewrote every visible page and served the old positioning to search for a day — including a metaphor whose explanation had been deleted the day before, so the stranger who met it had nowhere left to resolve it. The comment above that line already said "metadata is copy, when the positioning moves this moves with it". It had caught the problem once before and did not catch it again, because a comment is not a check.
+### J-121 An indexable page with no title or description of its own
+❌ A route inheriting the site-wide title, or carrying none, so the result page shows a truncated URL or an excerpt of the navigation
+✅ Every indexable page has its own `<title>` and meta description. The home page owns the site default; nothing else inherits it silently.
+A missing description does not leave the slot empty. The search engine writes one, from whatever text it finds first, which is usually the navigation.
+### J-122 Metadata past its budget
+❌ A 78-character title, a 210-character description, both eyeballed
+✅ Title ≤ 60 characters, description ≤ 155, measured. Past the budget the end is cut, and the cut lands mid-sentence.
+The budget is not a style preference; it is the width of the box someone else renders. Write the important half first, so a cut costs the least.
+### J-123 A page that must not be indexed and does not say so
+❌ An admin screen, a sign-in page, an internal tool with no robots directive, kept out of search by nothing but obscurity
+✅ `noindex` on the page itself, from its own metadata. In `product` and `operator` this is the default and its absence is the defect.
+`robots.txt` is not this. It is public, advisory, and read by strangers as a list of interesting places: naming `/admin` there tells everyone where it is. A path is safe to name only when something else protects it — a session guard, an authenticating API — and never because the file asked politely.
+### J-124 A sitemap that contradicts the page
+❌ A route listed in the sitemap whose own metadata says `noindex`; a sitemap entry for a page that does not exist
+✅ One answer per route. The sitemap lists what is indexable, and nothing else.
+Contradicting yourself in two files tells a crawler you do not know which is true, and it will decide for you.
+### J-125 Invented facts in metadata
+❌ `lastModified: new Date()` in a sitemap; a `datePublished` filled in because the field existed; an author, rating or price nobody supplied
+✅ Emit a field only where a real value exists in the content. Leave it out otherwise.
+A date that is today's on every request is false on every request, and repeated daily it teaches the crawler to disbelieve the field. Structured data is a claim about facts, and a wrong one is worse than a missing one.
+### J-126 Structured data retyped instead of read
+❌ A name, email or description written as a literal in JSON-LD beside the same value in the content model
+✅ Build it from the same source the page renders from. One value, one place.
+A second copy of the positioning is a second thing to keep in step by hand, which is `J-120` again wearing a different hat.
+### J-127 A list served as a fact when it is empty
+❌ A sitemap that renders with no entries because a content read failed, asserting the site has nothing
+✅ Concatenate the static routes unconditionally, and let a failed read yield the stale list rather than an empty one. When a list is genuinely empty, prove it before shipping.
+An empty sitemap is not a missing sitemap. It is a positive claim, and the crawler believes it.
+---
+## K. Safety at the interface
+**This is not a security review, and nothing here should be read as one.** Jig
+sees interfaces. It knows nothing about your sessions, your rate limits, your
+CORS origins, your secrets or your dependencies, and a clean run says nothing
+about any of them. What it can see is the handful of things an interface does to
+itself — the ones that ship because nobody looks at the markup with this question
+in mind.
+### K-128 A new-tab link that hands over the page it left
+❌ `target="_blank"` with no `rel`
+✅ `rel="noopener"` on every `target="_blank"`, `noreferrer` too when the destination has no business knowing where the reader came from.
+The opened page gets a handle on the window that opened it and can navigate it somewhere else. The reader comes back to a tab that looks like yours and is not. Modern browsers imply `noopener` for `_blank`, which is the argument for writing it rather than against: the ones that do not are the ones being attacked.
+### K-129 User content written as markup
+❌ `dangerouslySetInnerHTML`, `v-html`, `innerHTML =`, `{@html}` carrying anything a person typed
+✅ Render it as text. Where formatting is genuinely required, sanitise on the way in with a library that is maintained, and keep the allowed set to what the feature needs.
+The name of the React prop is a warning someone wrote on purpose. A comment, a display name, a product description: each is a place a script arrives and runs with your origin's privileges.
+### K-130 Credential fields that fight the password manager
+❌ `autocomplete="off"` on a password, a `paste` handler that blocks pasting, a one-time-code field with no `autocomplete`
+✅ `autocomplete="current-password"`, `"new-password"`, `"one-time-code"`, and nothing preventing paste.
+Blocking the manager does not stop an attacker; it stops the reader using a long unique password, so they type a short one they can remember and reuse it everywhere. The interface decides which of those two happens.
+### K-131 A frame with no sandbox, a script from anywhere
+❌ `<iframe src="https://third-party">` with no `sandbox`; a `<script src>` pointing at an origin nobody chose, on a page that takes payments or credentials
+✅ `sandbox` with only the capabilities the embed needs, and `allow` narrowed the same way. Third-party script on a sensitive page is a decision, recorded with a reason (`DECISIONS.md`), not a default.
+An embedded frame runs somebody else's code inside your page, and a script tag hands them the same origin your session lives in. Both are sometimes right; neither is ever automatic.
+### K-132 A secret rendered as plain text
+❌ An API key, a recovery code or a token printed into the page, sitting in the DOM for anything that reads it
+✅ Show it once, deliberately, behind an action the reader takes, with a copy control and a clear statement that it will not be shown again.
+Anything on the screen is in the DOM, in the accessibility tree, in a screenshot, and often in a session recording nobody remembered was running.
+### K-133 An error that describes the system
+❌ A stack trace, a database error, a file path or a framework name shown to whoever hit the page
+✅ Say what happened in the reader's terms and what to do next (`05-copy.md`). Keep the detail in the log, where it is useful and not public.
+An error is copy, and the audience is the person reading it. Naming the stack tells a stranger which list of known problems to work through.
+### K-134 Inline handlers on a page with a content policy
+❌ `onclick="…"` in markup, a `<script>` with no nonce, on a site that sets a Content-Security-Policy
+✅ Bind behaviour in script (`E-33` asks for a real control anyway), and let the policy's nonce cover the one bootstrap the framework emits.
+This is where a security decision made in configuration lands on whoever writes the markup: under a strict policy the inline handler simply does not run, and the page fails in the browser rather than in a check.
+---
 ## L-04 · Self-check before finishing
 Run this against what you produced. Any "no" is a defect to fix, not a note to mention.

package/rules/01-modes.md CHANGED Viewed

@@ -190,7 +190,7 @@ Attempting to vary these by mode is a category error:
 - **Accessibility floors.** Contrast, focus indication, target size, semantic markup. Identical in all three. `operator` being dense does not license a 24px tap target or a 3:1 body contrast.
 - **Brand identity.** Palette, typeface, logo, voice.
 - **State completeness.** Every mode renders loading, empty, error and disabled.
-- **The anti-pattern file.** All 97 rules in it apply everywhere.
+- **The anti-pattern file.** All 112 rules in it apply everywhere.
 ---

package/rules/03-patterns.md CHANGED Viewed

@@ -524,6 +524,40 @@ Blur the design, zoom out, or step back. You should still be able to tell what t
 **When nothing can render it, use the analogue:** if all type were one size and one colour, would the layout still communicate its order? If the hierarchy depends entirely on type styling, it is too weak. The analogue is a fallback, not an equal — a reading of the source is not a look at the page.
+### Step 6 — Decide how it collapses
+A spec writes a composition per size. This step is what happens **between** them:
+the same content, arranged for less room. Six rules, and the first is the one
+everything else follows from.
+1. **Reduce the count, never the size.** Four columns become two, then one; each
+   column keeps its own minimum width. Three columns at a third of the width are
+   still three columns, and that is the failure `D-111` names — a shrunken
+   desktop rather than a composition. The same applies to a row of controls: it
+   wraps, stacks or moves behind one control, and it does not get smaller.
+2. **Order survives.** What is read first at the widest size is read first at the
+   narrowest. Collapsing rearranges space, not meaning, and the markup order is
+   the reading order at every width (`H-119`).
+3. **Distinction survives.** If one item was emphasised — a recommended plan, a
+   current step — it is still distinguishable after the collapse. Emphasis
+   carried by position alone disappears the moment everything is in one column,
+   so it needs structure too (`E-91`).
+4. **Type comes from the scale, not from breakpoints.** The heading tokens are
+   fluid: they track the viewport between a floor and a ceiling with no media
+   query at all. A hand-written ladder of sizes per breakpoint reintroduces the
+   jumps the scale exists to remove, and goes stale the moment the scale changes.
+5. **Content that is genuinely wider scrolls inside itself.** A code block, a
+   wide table, a long identifier: its own container scrolls with a visible edge
+   (`E-62`), keeps its type size, and the page never scrolls sideways (`D-115`).
+   `editorial` allows no scrolling region on mobile at all (`M-01`).
+6. **Each transition happens where the content needs it.** The width at which
+   three columns stop fitting is a property of the columns, not of a device. Set
+   it from the content, and expect the numbers to differ per component.
+A collapse that satisfies all six looks like the same page with less room. One
+that fails them looks like a different, worse page that happens to share its
+content.
 ---
 ## L-02 · Building modularly

package/rules.index.json CHANGED Viewed

@@ -807,5 +807,110 @@
     "severity": "warning",
     "since": "0.13.0",
     "detector": "semantic-element"
+  },
+  {
+    "id": "J-120",
+    "bucket": "judgment",
+    "severity": "error",
+    "since": "0.14.0",
+    "pass": "code"
+  },
+  {
+    "id": "J-121",
+    "bucket": "mechanical",
+    "severity": "error",
+    "since": "0.14.0",
+    "detector": "metadata"
+  },
+  {
+    "id": "J-122",
+    "bucket": "mechanical",
+    "severity": "warning",
+    "since": "0.14.0",
+    "detector": "metadata"
+  },
+  {
+    "id": "J-123",
+    "bucket": "mechanical",
+    "severity": "error",
+    "since": "0.14.0",
+    "detector": "metadata"
+  },
+  {
+    "id": "J-124",
+    "bucket": "judgment",
+    "severity": "error",
+    "since": "0.14.0",
+    "pass": "code"
+  },
+  {
+    "id": "J-125",
+    "bucket": "mechanical",
+    "severity": "warning",
+    "since": "0.14.0",
+    "detector": "metadata"
+  },
+  {
+    "id": "J-126",
+    "bucket": "judgment",
+    "severity": "note",
+    "since": "0.14.0",
+    "pass": "code"
+  },
+  {
+    "id": "J-127",
+    "bucket": "judgment",
+    "severity": "note",
+    "since": "0.14.0",
+    "pass": "code"
+  },
+  {
+    "id": "K-128",
+    "bucket": "mechanical",
+    "severity": "error",
+    "since": "0.14.0",
+    "detector": "interface-safety"
+  },
+  {
+    "id": "K-129",
+    "bucket": "mechanical",
+    "severity": "warning",
+    "since": "0.14.0",
+    "detector": "interface-safety"
+  },
+  {
+    "id": "K-130",
+    "bucket": "mechanical",
+    "severity": "warning",
+    "since": "0.14.0",
+    "detector": "interface-safety"
+  },
+  {
+    "id": "K-131",
+    "bucket": "mechanical",
+    "severity": "warning",
+    "since": "0.14.0",
+    "detector": "interface-safety"
+  },
+  {
+    "id": "K-132",
+    "bucket": "judgment",
+    "severity": "note",
+    "since": "0.14.0",
+    "pass": "code"
+  },
+  {
+    "id": "K-133",
+    "bucket": "judgment",
+    "severity": "warning",
+    "since": "0.14.0",
+    "pass": "code"
+  },
+  {
+    "id": "K-134",
+    "bucket": "judgment",
+    "severity": "note",
+    "since": "0.14.0",
+    "pass": "code"
   }
 ]