super-ux 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -4,6 +4,30 @@ All notable changes to this project are documented in this file. The format
 follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versions
 follow [SemVer](https://semver.org/spec/v2.0.0.html).
 
+## [0.5.0] - 2026-07-19
+
+### Changed
+
+- Installer menu is now a real multi-select: arrow keys / j k to move, space
+  or number to toggle, `a` selects all three targets at once, enter installs
+  the whole selection in one run (own questions asked up front, the external
+  skills-CLI picker runs last). Non-TTY stdin gets a text fallback
+  (`1,3` / `all` / `q`). Zero dependencies (stdlib raw-mode).
+
+## [0.4.0] - 2026-07-19
+
+### Added
+
+- Interactive installer menu: bare `npx super-ux` now offers (1) skills for
+  any of 70+ agents via the `skills` CLI picker, (2) Cursor rules into a
+  project, (3) the Claude Code plugin user-globally (runs the `claude plugin`
+  CLI when available). Flag paths (`--cursor [dir] [--force]`) unchanged.
+
+### Fixed
+
+- Prompt handling with piped stdin (persistent line buffer instead of
+  sequential `rl.question`, which dropped pre-buffered answers).
+
 ## [0.3.0] - 2026-07-19
 
 ### Added

package/README.md

@@ -60,13 +60,39 @@ Then in your project: `/ux`. That's it — it installs the hard rule, seeds
 `docs/ux/`, builds the scenario base if empty, and on every later run just
 reports status and the next action.
 
+### Any agent via the skills CLI (70+ agents)
+
+```sh
+npx skills add ssheleg/super-ux            # both skills, current project
+npx skills add ssheleg/super-ux -g         # user-global
+npx skills add ssheleg/super-ux --skill ux-audit   # one skill
+```
+
+[vercel-labs/skills](https://github.com/vercel-labs/skills) discovers the
+skills through this repo's marketplace manifest and installs them for Claude
+Code, Cursor, Codex, OpenCode and others. Note: this installs the two skills
+only — the `/ux` commands and the Cursor always-on hard rule come with the
+methods below.
+
+### Interactive (pick agent + scope)
+
+```sh
+npx super-ux
+```
+
+Multi-select menu (space to toggle, `a` = everything at once, enter to
+install): skills for any of 70+ agents (delegates to the `skills` CLI picker
+— choose agents and global/project there), Cursor rules into a project, and
+the Claude Code plugin user-globally — any combination in one run.
+
 ### Cursor
 
 ```sh
-npx github:ssheleg/super-ux --cursor /path/to/your/project
+npx super-ux --cursor /path/to/your/project
 ```
 
-(or clone and run `./install.sh --cursor <dir>` — same behavior.) Copies the
+(also works: `npx github:ssheleg/super-ux --cursor <dir>` straight from the
+repo, or clone and run `./install.sh --cursor <dir>` — same behavior.) Copies the
 three rules into `.cursor/rules/` and seeds `docs/ux/scenarios.md`. An
 existing scenario base is never overwritten; re-run with `--force` to update
 rules after a new release.
@@ -100,7 +126,7 @@ is semver; bump `marketplace.json` + `plugin.json` + `CHANGELOG.md` together
 чек-листом для регулярных аудитов кода (`/ux-audit`) с вердиктами
 PASS/PARTIAL/FAIL/BLOCKED и доказательствами `file:line`. Установка: в
 Claude Code — `/plugin marketplace add ssheleg/super-ux`, в Cursor —
-`npx github:ssheleg/super-ux --cursor <проект>`. Дальше одна команда — `/ux`: сама ставит
+`npx super-ux --cursor <проект>`. Дальше одна команда — `/ux`: сама ставит
 правило и базу, а при повторных запусках показывает статус и следующий шаг.
 
 ## License

package/bin/super-ux.js

@@ -1,33 +1,46 @@
 #!/usr/bin/env node
 /*
  * super-ux installer CLI.
- * Cross-platform equivalent of install.sh: copies Cursor rules into a target
- * project and seeds the docs/ux skeleton. Claude Code needs no installer —
- * see usage.
+ *
+ * No arguments: interactive multi-select menu (arrow keys + space, `a` for
+ * all) covering: skills for any agent via the `skills` CLI picker, Cursor
+ * rules into a project, Claude Code plugin user-globally. Non-TTY stdin gets
+ * a text fallback ("1,3" / "all"). Flags keep the non-interactive paths:
+ * --cursor [dir] [--force].
  */
 'use strict';
 
 const fs = require('fs');
 const path = require('path');
+const readline = require('readline');
+const { spawnSync } = require('child_process');
 
 const ROOT = path.resolve(__dirname, '..');
+const REPO = 'ssheleg/super-ux';
+
+const MENU_ITEMS = [
+  { key: 'skills', label: 'Skills for any AI agent (Claude Code, Codex, Cursor, 70+ — opens agent picker)' },
+  { key: 'cursor', label: 'Cursor rules (always-on hard rule + docs/ux skeleton) into a project' },
+  { key: 'claude', label: 'Claude Code plugin (skills + /ux commands, user-global)' },
+];
 
 function usage() {
   console.log(`super-ux installer
 
 Usage:
-  npx github:ssheleg/super-ux --cursor [project-dir] [--force]
-  npx super-ux --cursor [project-dir] [--force]        (once published to npm)
-
-Copies cursor/rules/*.mdc into <project-dir>/.cursor/rules/ (default:
-current directory) and seeds docs/ux/scenarios.md from templates/ if absent.
-An existing scenario base is NEVER overwritten. Existing rule files are
-skipped unless --force is given.
-
-Claude Code (no installer needed):
-  /plugin marketplace add ssheleg/super-ux
-  /plugin install super-ux@super-ux
-  Then in your project: /ux`);
+  npx super-ux                                  interactive menu (multi-select)
+  npx super-ux --cursor [project-dir] [--force] Cursor rules, non-interactive
+  npx super-ux --help
+
+Menu items (select any combination, 'a' = all):
+  1. Skills for any AI agent (Claude Code, Codex, Cursor, 70+) — delegates to
+     'npx skills add ${REPO}' with its agent/global/project picker.
+  2. Cursor rules: cursor/rules/*.mdc -> <project>/.cursor/rules/ plus the
+     docs/ux skeleton. Existing scenario base is NEVER overwritten; existing
+     rule files are skipped unless --force.
+  3. Claude Code plugin (skills + /ux commands, user-global) — runs
+     'claude plugin marketplace add ${REPO}' + 'claude plugin install' when
+     the claude CLI is available, otherwise prints the /plugin commands.`);
 }
 
 function fail(message) {
@@ -73,12 +86,213 @@ function installCursor(target, force) {
   console.log(`done: ${installed} installed, ${skipped} skipped`);
 }
 
+function run(cmd, args) {
+  const result = spawnSync(cmd, args, { stdio: 'inherit' });
+  if (result.error && result.error.code === 'ENOENT') return 'missing';
+  return result.status === 0 ? 'ok' : 'failed';
+}
+
+function installSkillsCli() {
+  console.log(`\n--- Skills for any agent: delegating to the skills CLI picker ---`);
+  const status = run('npx', ['--yes', 'skills', 'add', REPO]);
+  if (status !== 'ok') console.error(`warning: 'npx skills add ${REPO}' ${status}`);
+}
+
+function installClaudePlugin() {
+  console.log(`\n--- Claude Code plugin ---`);
+  const probe = spawnSync('claude', ['--version'], { stdio: 'ignore' });
+  if (probe.error && probe.error.code === 'ENOENT') {
+    console.log(`claude CLI not found. Run inside Claude Code instead:
+  /plugin marketplace add ${REPO}
+  /plugin install super-ux@super-ux`);
+    return;
+  }
+  if (run('claude', ['plugin', 'marketplace', 'add', REPO]) !== 'ok') {
+    console.log('(marketplace may already be added — continuing)');
+  }
+  if (run('claude', ['plugin', 'install', 'super-ux@super-ux']) === 'ok') {
+    console.log('Claude Code plugin installed (scope: user). Restart sessions to pick it up; then run /ux in any project.');
+  } else {
+    console.error('warning: claude plugin install failed — see output above');
+  }
+}
+
+function makePrompter() {
+  // A persistent 'line' listener with a buffer: with piped stdin, lines that
+  // arrive between two questions are kept instead of being lost.
+  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+  const buffered = [];
+  let pending = null;
+  let closed = false;
+  rl.on('line', (line) => {
+    if (pending) {
+      const resolve = pending;
+      pending = null;
+      resolve(line);
+    } else {
+      buffered.push(line);
+    }
+  });
+  rl.on('close', () => {
+    closed = true;
+    if (pending) {
+      const resolve = pending;
+      pending = null;
+      resolve('');
+    }
+  });
+  return {
+    ask(question) {
+      process.stdout.write(question);
+      if (buffered.length > 0) return Promise.resolve(buffered.shift());
+      if (closed) return Promise.resolve('');
+      return new Promise((resolve) => {
+        pending = resolve;
+      });
+    },
+    close() {
+      rl.close();
+    },
+  };
+}
+
+function parseSelection(input, count) {
+  const value = input.trim().toLowerCase();
+  if (value === '' || value === 'q' || value === 'quit') return [];
+  if (value === 'a' || value === 'all' || value === '*') {
+    return Array.from({ length: count }, (_, i) => i);
+  }
+  const picked = new Set();
+  for (const part of value.split(/[\s,]+/)) {
+    if (part === '') continue;
+    const n = Number(part);
+    if (!Number.isInteger(n) || n < 1 || n > count) return null;
+    picked.add(n - 1);
+  }
+  return [...picked].sort();
+}
+
+function selectInteractive(items) {
+  // Raw-mode checkbox list: up/down or j/k move, space or 1..9 toggle,
+  // a = toggle all, enter = confirm, q/esc/ctrl+c = quit.
+  return new Promise((resolve) => {
+    const selected = new Set();
+    let cursor = 0;
+    let rendered = false;
+
+    const line = (i) =>
+      `${i === cursor ? '❯' : ' '} ${selected.has(i) ? '◉' : '◯'} ${i + 1}) ${items[i].label}`;
+
+    const render = () => {
+      if (rendered) process.stdout.write(`\x1b[${items.length + 1}A`);
+      for (let i = 0; i < items.length; i += 1) {
+        process.stdout.write(`\x1b[2K${line(i)}\n`);
+      }
+      process.stdout.write(
+        '\x1b[2K  ↑/↓ move · space/number toggle · a all · enter confirm · q quit\n'
+      );
+      rendered = true;
+    };
+
+    const finish = (result) => {
+      process.stdin.setRawMode(false);
+      process.stdin.pause();
+      process.stdin.removeListener('keypress', onKeypress);
+      resolve(result);
+    };
+
+    const onKeypress = (str, key) => {
+      const name = key && key.name;
+      if ((key && key.ctrl && name === 'c') || name === 'escape' || str === 'q') {
+        finish([]);
+        return;
+      }
+      if (name === 'up' || str === 'k') cursor = (cursor - 1 + items.length) % items.length;
+      else if (name === 'down' || str === 'j') cursor = (cursor + 1) % items.length;
+      else if (name === 'space') {
+        if (selected.has(cursor)) selected.delete(cursor);
+        else selected.add(cursor);
+      } else if (str === 'a') {
+        if (selected.size === items.length) selected.clear();
+        else for (let i = 0; i < items.length; i += 1) selected.add(i);
+      } else if (str && /^[1-9]$/.test(str) && Number(str) <= items.length) {
+        const idx = Number(str) - 1;
+        if (selected.has(idx)) selected.delete(idx);
+        else selected.add(idx);
+        cursor = idx;
+      } else if (name === 'return') {
+        finish([...selected].sort());
+        return;
+      }
+      render();
+    };
+
+    readline.emitKeypressEvents(process.stdin);
+    process.stdin.setRawMode(true);
+    process.stdin.resume();
+    process.stdin.on('keypress', onKeypress);
+    render();
+  });
+}
+
+async function selectFallback(items, prompter) {
+  for (let i = 0; i < items.length; i += 1) {
+    console.log(`  ${i + 1}) ${items[i].label}`);
+  }
+  const answer = await prompter.ask(`Select [e.g. 1,3 | all | q]: `);
+  const picked = parseSelection(answer, items.length);
+  if (picked === null) fail(`invalid selection '${answer.trim()}'`);
+  return picked;
+}
+
+async function menu() {
+  console.log('super-ux — scenario-driven UI development. Select what to install:\n');
+  const interactive = Boolean(process.stdin.isTTY && process.stdout.isTTY);
+
+  // ONE prompter for the whole flow: with piped stdin, all pending lines are
+  // buffered by its persistent listener; a second prompter would lose them.
+  let prompter = null;
+  let picked;
+  if (interactive) {
+    picked = await selectInteractive(MENU_ITEMS);
+  } else {
+    prompter = makePrompter();
+    picked = await selectFallback(MENU_ITEMS, prompter);
+  }
+
+  if (picked.length === 0) {
+    if (prompter) prompter.close();
+    console.log('Nothing selected.');
+    return;
+  }
+
+  const keys = picked.map((i) => MENU_ITEMS[i].key);
+
+  // Gather all our own questions BEFORE running anything, so they don't
+  // interleave with the external skills-CLI picker.
+  let cursorDir = null;
+  if (keys.includes('cursor')) {
+    if (!prompter) prompter = makePrompter();
+    const dir = (await prompter.ask('Cursor rules — project directory [.]: ')).trim() || '.';
+    cursorDir = path.resolve(dir);
+  }
+  if (prompter) prompter.close();
+
+  if (keys.includes('cursor')) installCursor(cursorDir, false);
+  if (keys.includes('claude')) installClaudePlugin();
+  if (keys.includes('skills')) installSkillsCli();
+}
+
 function main() {
   const args = process.argv.slice(2);
-  if (args.length === 0 || args[0] === '--help' || args[0] === '-h') {
+  if (args[0] === '--help' || args[0] === '-h') {
     usage();
     return;
   }
+  if (args.length === 0) {
+    menu();
+    return;
+  }
   if (args[0] !== '--cursor') {
     console.error(`error: unknown mode '${args[0]}'`);
     usage();

package/package.json

@@ -1,13 +1,33 @@
 {
   "name": "super-ux",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Scenario-driven UI development for AI agents (Claude Code + Cursor): scenario base, scenario-first hard rule, evidence-backed UX audits. This package is the installer CLI.",
-  "bin": { "super-ux": "bin/super-ux.js" },
-  "files": ["bin", "cursor", "templates", "README.md", "LICENSE", "CHANGELOG.md"],
+  "bin": {
+    "super-ux": "bin/super-ux.js"
+  },
+  "files": [
+    "bin",
+    "cursor",
+    "templates",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
   "repository": "github:ssheleg/super-ux",
   "homepage": "https://github.com/ssheleg/super-ux",
   "license": "MIT",
   "author": "ssheleg",
-  "engines": { "node": ">=16" },
-  "keywords": ["ux", "scenarios", "audit", "ui", "user-flows", "scenario-driven", "claude-code", "cursor"]
+  "engines": {
+    "node": ">=16"
+  },
+  "keywords": [
+    "ux",
+    "scenarios",
+    "audit",
+    "ui",
+    "user-flows",
+    "scenario-driven",
+    "claude-code",
+    "cursor"
+  ]
 }