@thedecipherist/claude-packs 0.0.0-stage → 1.0.0

package/packs/tui/checks/tui-gates-on-tty.json

@@ -0,0 +1,25 @@
+{
+  "id": "tui-gates-on-tty",
+  "why": "A TUI started on a non-TTY stdout (CI, a pipe, a log) writes escape codes into the log and reads stdin that never answers. Gate on isTTY and a minimum size, fall back to plain output.",
+  "rule": ".claude/rules/tui-resize-and-screen.md",
+  "concepts": [
+    "tui-entry"
+  ],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/test/**"
+  ],
+  "code": false,
+  "mode": "needs",
+  "pattern": "\\?1049h|setRawMode\\s*\\(\\s*true\\s*\\)|\\brender\\s*\\(\\s*<",
+  "needs": [
+    "\\bisTTY\\b"
+  ],
+  "bad": "process.stdout.write('\\x1B[?1049h');\nrender(<App />);",
+  "good": "if (!process.stdin.isTTY || !process.stdout.isTTY) return printPlain(report);\nprocess.stdout.write('\\x1B[?1049h');\nrender(<App />);"
+}

package/packs/tui/checks/tui-no-ris-reset.json

@@ -0,0 +1,22 @@
+{
+  "id": "tui-no-ris-reset",
+  "why": "\\x1Bc (RIS) resets the whole terminal: colours, font, cursor settings, and behaves differently per emulator. Clear with \\x1B[2J\\x1B[H.",
+  "rule": ".claude/rules/tui-resize-and-screen.md",
+  "concepts": [
+    "tui",
+    "tui-entry"
+  ],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/test/**"
+  ],
+  "code": false,
+  "pattern": "\\\\x1[bB]c(?![0-9A-Za-z])|\\\\u001[bB]c(?![0-9A-Za-z])|\\\\033c(?![0-9A-Za-z])",
+  "bad": "process.stdout.write('\\x1Bc');",
+  "good": "process.stdout.write('\\x1B[2J\\x1B[H');"
+}

package/packs/tui/checks/tui-resize-listener-removed.json

@@ -0,0 +1,26 @@
+{
+  "id": "tui-resize-listener-removed",
+  "why": "A resize listener that is never removed keeps rendering into a terminal the TUI has left, over the shell prompt. Every process.stdout.on('resize') has its off() on exit.",
+  "rule": ".claude/rules/tui-resize-and-screen.md",
+  "concepts": [
+    "tui",
+    "tui-entry"
+  ],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/test/**"
+  ],
+  "code": false,
+  "mode": "needs",
+  "pattern": "process\\.stdout\\.on\\s*\\(\\s*['\\\"]resize['\\\"]",
+  "needs": [
+    "process\\.stdout\\.(?:off|removeListener)\\s*\\(\\s*['\\\"]resize['\\\"]"
+  ],
+  "bad": "process.stdout.on('resize', onResize);",
+  "good": "process.stdout.on('resize', onResize);\nconst exit = () => { process.stdout.off('resize', onResize); };"
+}

package/packs/tui/checks/tui-width-is-state.json

@@ -0,0 +1,33 @@
+{
+  "id": "tui-width-is-state",
+  "why": "A value computed from process.stdout.columns at render time keeps its old width after a resize until the next keypress. In a React/Ink component the width is state updated by the resize handler.",
+  "rule": ".claude/rules/tui-resize-and-screen.md",
+  "globs": [
+    "**/*.tsx"
+  ],
+  "concepts": [
+    "tui"
+  ],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/test/**",
+    "**/bin/**",
+    "**/cli.tsx",
+    "**/index.tsx",
+    "**/main.tsx"
+  ],
+  "code": false,
+  "mode": "needs",
+  "pattern": "process\\.stdout\\.columns",
+  "needs": [
+    "\\buseState\\s*\\(",
+    "['\\\"]resize['\\\"]"
+  ],
+  "bad": "const divider = '\\u2500'.repeat(process.stdout.columns ?? 80);",
+  "good": "const [termWidth, setTermWidth] = useState(process.stdout.columns ?? 80);\nuseEffect(() => { const on = () => setTermWidth(process.stdout.columns ?? 80); process.stdout.on('resize', on); return () => { process.stdout.off('resize', on); }; }, []);"
+}

package/packs/tui/pack.json

@@ -0,0 +1,44 @@
+{
+  "name": "tui",
+  "version": "1.0.0",
+  "description": "Terminal UIs (Ink + React or raw-mode Node): alternate screen, resize ordering, width as state, raw mode restored on every exit.",
+  "type": "stock",
+  "author": "claude-packs",
+  "license": "MIT",
+  "homepage": "https://github.com/TheDecipherist/claude-packs",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TheDecipherist/claude-packs.git",
+    "directory": "packs/tui"
+  },
+  "keywords": [
+    "terminal",
+    "tui"
+  ],
+  "engines": {
+    "claude-packs": ">=0.19.0"
+  },
+  "folders": {},
+  "concepts": {
+    "tui": [
+      "**/tui/**",
+      "**/*tui*",
+      "**/*.tui.*",
+      "**/ui/**/*.tsx",
+      "**/cli/**/*.tsx",
+      "**/ui/browse*",
+      "**/ui/screen*",
+      "**/screens/**"
+    ],
+    "tui-entry": [
+      "**/bin/**",
+      "**/cli.ts",
+      "**/cli.tsx",
+      "**/index.tsx",
+      "**/main.tsx",
+      "**/tui/index.*"
+    ]
+  },
+  "skillsIn": null,
+  "hooks": {}
+}

package/packs/tui/rules/tui-resize-and-screen.md

@@ -0,0 +1,25 @@
+---
+# concepts: tui, tui-entry
+paths:
+  - "placeholder"
+---
+
+# A TUI owns the alternate screen, clears before the framework draws, and treats size as state
+
+Every resize bug is one root cause: the renderer diffs its previous output and repositions the cursor, it does not clear and redraw. On resize, content it no longer owns stays visible, the cursor lands somewhere unknown, and a taller terminal re-reveals old scrollback lines.
+
+<constraints>
+Always do:
+- **Alternate screen from the entry point**: `process.stdout.write('\x1B[?1049h\x1B[?25l')` before the first render; restore with `'\x1B[?25h\x1B[?1049l'` in a `process.once('exit', …)` handler registered **before** rendering, so the terminal comes back even on a crash (`tui-entry-restores-terminal`).
+- **Clear handler registered in the entry point before `render()`**: `process.stdout.on('resize', () => process.stdout.write('\x1B[2J\x1B[H'))`. Node fires resize listeners in registration order; Ink registers its own inside `render()`, so a clear registered in a `useEffect` runs after Ink has drawn and blanks the screen until the next keypress.
+- **Width is state**: `const [cols, setCols] = useState(process.stdout.columns ?? 80)` in the root component, updated by a resize handler that does nothing else. A divider computed once from `process.stdout.columns` keeps its old width until the next keypress (`tui-width-is-state`).
+- Correct resize order, one job each: 1 entry-point clear, 2 the framework's layout, 3 the state update that re-renders width-dependent lines.
+- Raw-mode TUIs (no framework): gate on `process.stdin.isTTY && process.stdout.isTTY` and a minimum size, fall back to plain output otherwise; `setRawMode(true)` is paired with a restore of the previous raw state; one idempotent `exit()` (an `exited` flag) that removes the resize and data listeners, restores raw mode, shows the cursor and leaves the alternate screen; SIGINT routes through the same `exit()`.
+- Remove every `resize`/`data` listener on exit (`process.stdout.off`, `process.stdin.off`).
+
+Never do:
+- `\x1Bc` (RIS, reset to initial state): it resets colours, font and cursor settings and differs per emulator (`tui-no-ris-reset`). `\x1B[2J\x1B[H` only.
+- Escape codes written from a component's render path; they fight the framework's output buffer. Effects and the entry point only.
+- Resize logic split across several handlers that each clear, draw or set state.
+- A TUI on a non-TTY stdout (CI, a pipe): the escape codes become garbage in the log.
+</constraints>

package/packs/tui/skills/build-tui/SKILL.md

@@ -0,0 +1,21 @@
+---
+name: build-tui
+description: Use when building or changing an interactive terminal UI (Ink + React, or raw-mode Node with @clack/prompts), or when a TUI shows ghost or repeated content, a blank screen after resize, a divider stuck at the old width, or a terminal left in a broken state after exit.
+---
+
+# build-tui
+
+One thing: scaffold or repair a TUI's entry point and root so the `tui-resize-and-screen` rule holds, then prove it with a resize.
+
+<constraints>
+Always do:
+1. Entry point, in this order: TTY and size gate (fallback to plain output when `!isTTY` or under 60×12) → enter alternate screen and hide the cursor → `process.once('exit', restore)` → `process.stdout.on('resize', clear)` → `render()` (Ink) or the raw-mode loop → on exit: `off` every listener, restore raw mode, show cursor, leave the alternate screen. One idempotent `exit()` used by the normal path and SIGINT.
+2. Root component (Ink): `termWidth` as state from `process.stdout.columns`, updated by a resize handler that only sets state; every width-dependent string derives from it.
+3. Raw mode (no framework): `setRawMode(true)` after saving `stdin.isRaw`; a single `data` handler mapping keys through a lookup table (`{ q: quit, j: down, k: up, … }`), never an if-chain; `render(state)` is the only function that writes to stdout.
+4. Prove it: run the TUI in a pty (`node-pty` or `script -q`), send a resize (`SIGWINCH` after changing `columns`/`rows`), and assert the frame has no repeated banner, no stale divider width, and that after quit the terminal is out of the alternate screen (`\x1B[?1049l` was written).
+5. Check versions with `latest-versions` (`ink`, `react`, `@clack/prompts`) before adding them.
+
+Never do:
+- Fix a resize bug by adding another clear somewhere; find which of the three handlers is out of order.
+- Ship without the `process.once('exit', …)` restore.
+</constraints>

package/packs/ui-craft/checks/ui-input-needs-autocomplete.json

@@ -0,0 +1,23 @@
+{
+  "id": "ui-input-needs-autocomplete",
+  "why": "An email, password or phone field with no autocomplete makes everyone type it by hand.",
+  "rule": ".claude/rules/forms-never-fight.md",
+  "concepts": [
+    "ui-markup"
+  ],
+  "globs": [],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/*.spec.*"
+  ],
+  "pattern": "<input\\b(?![^>]*\\bautocomplete)[^>]*\\btype=[\"'{]*(?:email|password|tel)\\b",
+  "bad": "<input type=\"email\" name=\"email\" />\n",
+  "good": "<input type=\"email\" name=\"email\" autoComplete=\"email\" />\n",
+  "flags": "i",
+  "kind": "quality"
+}

package/packs/ui-craft/checks/ui-intl-for-dates.json

@@ -0,0 +1,21 @@
+{
+  "id": "ui-intl-for-dates",
+  "why": "A date built from its parts is wrong for most of the world. Use Intl.DateTimeFormat.",
+  "rule": ".claude/rules/dates-and-numbers.md",
+  "concepts": [
+    "ui-markup"
+  ],
+  "globs": [],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/*.spec.*"
+  ],
+  "pattern": "\\.getMonth\\(\\)\\s*\\+\\s*1\\b",
+  "bad": "const d = `${t.getMonth() + 1}/${t.getDate()}`;\n",
+  "good": "const d = new Intl.DateTimeFormat(locale).format(t);\n"
+}

package/packs/ui-craft/checks/ui-no-ai-palette.json

@@ -0,0 +1,22 @@
+{
+  "id": "ui-no-ai-palette",
+  "why": "Purple and violet gradients are the most recognizable tell of generated UI. Use the project's palette.",
+  "rule": ".claude/rules/no-generated-look.md",
+  "concepts": [
+    "ui-markup",
+    "ui-styles"
+  ],
+  "globs": [],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/*.spec.*"
+  ],
+  "pattern": "\\bfrom-(?:purple|violet|indigo|fuchsia)-\\d+\\b|linear-gradient\\([^)\\n]*\\b(?:purple|violet|indigo)\\b",
+  "bad": "<div className=\"bg-gradient-to-r from-purple-500 to-pink-500\" />\n",
+  "good": "<div className=\"bg-surface text-ink\" />\n"
+}

package/packs/ui-craft/checks/ui-no-animate-layout.json

@@ -0,0 +1,22 @@
+{
+  "id": "ui-no-animate-layout",
+  "why": "Animating width, height, top, left, margin or padding forces layout on every frame. Use transform and opacity.",
+  "rule": ".claude/rules/motion-is-rare.md",
+  "concepts": [
+    "ui-markup",
+    "ui-styles"
+  ],
+  "globs": [],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/*.spec.*"
+  ],
+  "pattern": "transition(?:-property)?:[^;\\n]*\\b(?:width|height|top|left|margin|padding)\\b",
+  "bad": ".bar { transition: width 0.3s; }\n",
+  "good": ".bar { transition: transform 0.3s; }\n"
+}

package/packs/ui-craft/checks/ui-no-assistant-palette.json

@@ -0,0 +1,23 @@
+{
+  "id": "ui-no-assistant-palette",
+  "why": "Cream with terracotta is the most recognisable generated look. Use the project's palette.",
+  "rule": ".claude/rules/no-generated-look.md",
+  "concepts": [
+    "ui-markup",
+    "ui-styles"
+  ],
+  "globs": [],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/*.spec.*"
+  ],
+  "pattern": "#(?:d97757|da7756|c15f3c|cc785c|bd5d3a|f0eee6|faf9f5|f5f4ed|eeece2|e8e6dc)\\b",
+  "bad": ".accent { color: #d97757; }\n",
+  "good": ".accent { color: var(--brand-blue); }\n",
+  "flags": "i"
+}

package/packs/ui-craft/checks/ui-no-bounce-easing.json

@@ -0,0 +1,22 @@
+{
+  "id": "ui-no-bounce-easing",
+  "why": "Bounce and elastic easing read dated. Real things decelerate smoothly.",
+  "rule": ".claude/rules/motion-is-rare.md",
+  "concepts": [
+    "ui-markup",
+    "ui-styles"
+  ],
+  "globs": [],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/*.spec.*"
+  ],
+  "pattern": "\\banimate-bounce\\b|cubic-bezier\\([^)\\n]*,\\s*(?:1\\.[1-9]|[2-9])\\d*[^)\\n]*\\)",
+  "bad": "transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n",
+  "good": "transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n"
+}

package/packs/ui-craft/checks/ui-no-custom-cursor.json

@@ -0,0 +1,22 @@
+{
+  "id": "ui-no-custom-cursor",
+  "why": "A custom cursor costs usability and reads as a gimmick. Use the cursor that names the action.",
+  "rule": ".claude/rules/pointer-feedback.md",
+  "concepts": [
+    "ui-markup",
+    "ui-styles"
+  ],
+  "globs": [],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/*.spec.*"
+  ],
+  "pattern": "cursor:\\s*url\\(",
+  "bad": ".hero { cursor: url(/dot.png), auto; }\n",
+  "good": ".hero { cursor: pointer; }\n"
+}

package/packs/ui-craft/checks/ui-no-emoji-as-ui.json

@@ -0,0 +1,22 @@
+{
+  "id": "ui-no-emoji-as-ui",
+  "why": "Emoji as icons or bullets read as generated. Use words, or one icon set.",
+  "rule": ".claude/rules/no-generated-look.md",
+  "concepts": [
+    "ui-markup"
+  ],
+  "globs": [],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/*.spec.*"
+  ],
+  "pattern": "[\\u{1F300}-\\u{1FAFF}\\u{2600}-\\u{27BF}]",
+  "bad": "<li>\ud83d\ude80 Fast</li>\n",
+  "good": "<li>Fast</li>\n",
+  "flags": "u"
+}

package/packs/ui-craft/checks/ui-no-empty-image.json

@@ -0,0 +1,21 @@
+{
+  "id": "ui-no-empty-image",
+  "why": "An image with no source ships as a broken box. No image is better.",
+  "rule": ".claude/rules/pictures-do-a-job.md",
+  "concepts": [
+    "ui-markup"
+  ],
+  "globs": [],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/*.spec.*"
+  ],
+  "pattern": "<img\\b[^>]*\\bsrc=[\"']{2}|<img\\b(?![^>]*\\bsrc\\b)[^>]*>",
+  "bad": "<img src=\"\" alt=\"x\" />\n",
+  "good": "<img src=\"/a.jpg\" alt=\"The stool\" width=\"320\" height=\"200\" />\n"
+}

package/packs/ui-craft/checks/ui-no-eyebrow.json

@@ -0,0 +1,21 @@
+{
+  "id": "ui-no-eyebrow",
+  "why": "A tiny tracked uppercase label above a heading is the template's signature. Put it in the heading, or drop it.",
+  "rule": ".claude/rules/no-generated-look.md",
+  "concepts": [
+    "ui-markup"
+  ],
+  "globs": [],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/*.spec.*"
+  ],
+  "pattern": "uppercase[^\"'\\n]*tracking-[^>\\n]*>[^<\\n]*</\\w+>\\s*<h[1-3]\\b",
+  "bad": "<p className=\"text-xs uppercase tracking-widest\">Docs</p>\n<h2>Title</h2>",
+  "good": "<h2 className=\"text-2xl\">What it does</h2>\n"
+}

package/packs/ui-craft/checks/ui-no-furniture-text.json

@@ -0,0 +1,22 @@
+{
+  "id": "ui-no-furniture-text",
+  "why": "Furniture text decorates a page with facts nobody asked for. A section heading can simply say Pricing.",
+  "rule": ".claude/rules/interface-copy.md",
+  "concepts": [
+    "ui-markup"
+  ],
+  "globs": [],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/*.spec.*"
+  ],
+  "pattern": "\\b(?:Field notes|Quietly trusted by|Scroll to explore|Available for work|Est\\.\\s*(?:19|20)\\d\\d)\\b",
+  "bad": "<p>Est. 2024</p>\n",
+  "good": "<p>Pricing</p>\n",
+  "flags": "i"
+}

package/packs/ui-craft/checks/ui-no-gradient-text.json

@@ -0,0 +1,22 @@
+{
+  "id": "ui-no-gradient-text",
+  "why": "Gradient text is decoration, not meaning, and fails contrast at its light end.",
+  "rule": ".claude/rules/no-generated-look.md",
+  "concepts": [
+    "ui-markup",
+    "ui-styles"
+  ],
+  "globs": [],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/*.spec.*"
+  ],
+  "pattern": "\\bbg-clip-text\\b|background-clip:\\s*text",
+  "bad": "<h1 className=\"bg-clip-text text-transparent\">Hello</h1>\n",
+  "good": "<h1 className=\"text-ink\">Hello</h1>\n"
+}

package/packs/ui-craft/checks/ui-no-index-numbering.json

@@ -0,0 +1,21 @@
+{
+  "id": "ui-no-index-numbering",
+  "why": "01, 02, 03 beside headings is costume, not order. Use position, or a real <ol>.",
+  "rule": ".claude/rules/no-generated-look.md",
+  "concepts": [
+    "ui-markup"
+  ],
+  "globs": [],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/*.spec.*"
+  ],
+  "pattern": ">\\s*0[1-9]\\s*</(?:span|div|p|small)>",
+  "bad": "<span>01</span><h3>Fast</h3>\n",
+  "good": "<ol><li>Fast</li></ol>\n<span>12</span>\n"
+}

package/packs/ui-craft/checks/ui-no-lorem.json

@@ -0,0 +1,22 @@
+{
+  "id": "ui-no-lorem",
+  "why": "Placeholder copy reached the source. Write real words, or sample ones listed for the owner.",
+  "rule": ".claude/rules/interface-copy.md",
+  "concepts": [
+    "ui-markup"
+  ],
+  "globs": [],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/*.spec.*"
+  ],
+  "pattern": "\\blorem ipsum\\b|\\bdolor sit amet\\b",
+  "bad": "<p>Lorem ipsum dolor sit amet</p>\n",
+  "good": "<p>Find an order in one search.</p>\n",
+  "flags": "i"
+}

package/packs/ui-craft/checks/ui-no-marketing-buzzword.json

@@ -0,0 +1,22 @@
+{
+  "id": "ui-no-marketing-buzzword",
+  "why": "Filler that fits any product says nothing about this one. Say what it does.",
+  "rule": ".claude/rules/interface-copy.md",
+  "concepts": [
+    "ui-markup"
+  ],
+  "globs": [],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/*.spec.*"
+  ],
+  "pattern": "\\b(?:world-class|enterprise-grade|next-generation|next-gen|cutting-edge|best-in-class|revolutionary|empowers?|supercharges?|streamlines?)\\b",
+  "bad": "<p>Empower your team with world-class tools.</p>\n",
+  "good": "<p>Find a customer's last order in one search.</p>\n",
+  "flags": "i"
+}

package/packs/ui-craft/checks/ui-no-paste-block.json

@@ -0,0 +1,21 @@
+{
+  "id": "ui-no-paste-block",
+  "why": "Blocking paste breaks password managers and punishes careful people.",
+  "rule": ".claude/rules/forms-never-fight.md",
+  "concepts": [
+    "ui-markup"
+  ],
+  "globs": [],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/*.spec.*"
+  ],
+  "pattern": "onPaste=\\{[^}\\n]*preventDefault|addEventListener\\(\\s*['\"]paste['\"][^\\n]*preventDefault",
+  "bad": "<input onPaste={(e) => e.preventDefault()} />\n",
+  "good": "<input name=\"code\" />\n"
+}

package/packs/ui-craft/checks/ui-no-placeholder-names.json

@@ -0,0 +1,21 @@
+{
+  "id": "ui-no-placeholder-names",
+  "why": "Placeholder people and companies say nobody looked at this. Use believable sample data, listed for the owner.",
+  "rule": ".claude/rules/data-tells-the-truth.md",
+  "concepts": [
+    "ui-markup"
+  ],
+  "globs": [],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/*.spec.*"
+  ],
+  "pattern": "\\b(?:John Doe|Jane Doe|Acme(?: Inc| Corp)?|User \\d+|Lorem Corp)\\b",
+  "bad": "<td>John Doe</td>\n",
+  "good": "<td>Mia Lund</td>\n"
+}

package/packs/ui-craft/checks/ui-no-scroll-hijack.json

@@ -0,0 +1,21 @@
+{
+  "id": "ui-no-scroll-hijack",
+  "why": "Capturing the wheel takes scrolling away from the person. Native scroll only.",
+  "rule": ".claude/rules/motion-is-rare.md",
+  "concepts": [
+    "ui-markup"
+  ],
+  "globs": [],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/*.spec.*"
+  ],
+  "pattern": "addEventListener\\(\\s*['\"](?:wheel|mousewheel|touchmove)['\"][^\\n]*preventDefault",
+  "bad": "window.addEventListener('wheel', (e) => { e.preventDefault(); move(e); }, { passive: false });\n",
+  "good": "window.addEventListener('scroll', onScroll, { passive: true });\n"
+}

package/packs/ui-craft/checks/ui-no-side-tab.json

@@ -0,0 +1,21 @@
+{
+  "id": "ui-no-side-tab",
+  "why": "A thick coloured border down one side of a card is the most recognizable generated-UI tell. Use a tone step, or nothing.",
+  "rule": ".claude/rules/no-generated-look.md",
+  "concepts": [
+    "ui-markup"
+  ],
+  "globs": [],
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    ".claude/**",
+    "**/.claude/**",
+    "**/*.test.*",
+    "**/*.spec.*"
+  ],
+  "pattern": "\\bborder-l-(?:[2-9]|\\[[2-9]px\\])\\s+border-(?!transparent)[\\w-]+",
+  "bad": "<div className=\"border-l-4 border-blue-500 p-4\" />\n",
+  "good": "<div className=\"bg-surface-2 p-4\" />\n"
+}