@xscriptor/skill-devx 1.0.0 → 1.1.0

package/README.md

@@ -1,6 +1,6 @@
 <h1 align="center">@xscriptor/skill-devx</h1>
 
-<p>Development workflows skill for the DevX platform. Contains code structure conventions, platform mapping, design token system, and project organization guidelines.</p>
+<p>Design and structure skill for the DevX UI (the <code>dev.xscriptor.com</code> resources pages). Documents the visual system, design tokens, typography, layout, motion, accessibility and code organization conventions.</p>
 
 <h2>Installation</h2>
 
@@ -11,30 +11,37 @@ npx @xscriptor/skill-devx
 npx @xscriptor/skill-devx --anthropic
 
 # Preview what will be installed
-npx @xscriptor/skill-devx --dry-run</code></pre>
+npx @xscriptor/skill-devx --dry-run
+
+# Use a local checkout of the skills repo (or XSCRIPTOR_SRC / XSCRIPTOR_SKILLS_DIR)
+npx @xscriptor/skill-devx --src /path/to/xscriptor-ai</code></pre>
 
 <h2>Usage</h2>
 
-<p>Once installed, the skill is loaded automatically when working on DevX projects. Invoke it manually with <code>/devx</code> in Claude Code, or use <code>@devx</code> in OpenCode.</p>
+<p>Once installed, the skill loads automatically when working on DevX pages. Invoke it manually with <code>/devx</code> in Claude Code or <code>@devx</code> in OpenCode.</p>
+
+<p>This package ships only the installer. The skill content (<code>SKILL.md</code> plus its <code>references/</code>) is fetched from <a href="https://github.com/xscriptor-ai/skills">xscriptor-ai/skills</a> at install time, so it always matches the current source of truth.</p>
 
 <p>The skill covers:</p>
 <ul>
-  <li><strong>Architecture</strong> — modular platform design, packages, apps separation</li>
-  <li><strong>Code structure</strong> — module conventions, barrel exports, internal directories</li>
-  <li><strong>Platform mapping</strong> — web, mobile, API conventions per platform</li>
-  <li><strong>Design tokens</strong> — color, spacing, typography, elevation system</li>
-  <li><strong>Layout system</strong> — responsive grid, breakpoints, container patterns</li>
+  <li><strong>Design system</strong> — visual language, tokens, typography and elevation</li>
+  <li><strong>Layout</strong> — responsive grid, breakpoints and container patterns</li>
+  <li><strong>Motion</strong> — transitions and interaction feedback</li>
+  <li><strong>Accessibility</strong> — contrast, focus and semantics</li>
+  <li><strong>Code structure</strong> — module conventions, barrel exports and internal directories</li>
+  <li><strong>Platform mapping</strong> — web, mobile and API conventions</li>
 </ul>
 
 <h2>Resources</h2>
 
 <ul>
-  <li><a href="https://github.com/xscriptor/ai">github.com/xscriptor/ai</a></li>
+  <li><a href="https://github.com/xscriptor-ai/skills">github.com/xscriptor-ai/skills</a></li>
+  <li><a href="https://github.com/xscriptor-ai/packages">github.com/xscriptor-ai/packages</a></li>
   <li><a href="https://dev.xscriptor.com/en/resources/ai/">dev.xscriptor.com/en/resources/ai/</a></li>
 </ul>
 
 <hr>
 
 <p><strong>License:</strong> <a href="./LICENSE">MIT</a><br>
-<strong>Report issues:</strong> <a href="https://github.com/xscriptor/ai/issues">github.com/xscriptor/ai/issues</a><br>
-<strong>Changelog:</strong> <a href="https://github.com/xscriptor/ai/releases">github.com/xscriptor/ai/releases</a></p>
+<strong>Report issues:</strong> <a href="https://github.com/xscriptor-ai/packages/issues">github.com/xscriptor-ai/packages/issues</a><br>
+<strong>Changelog:</strong> <a href="https://github.com/xscriptor-ai/packages/releases">github.com/xscriptor-ai/packages/releases</a></p>

package/bin/install.js

@@ -1,25 +1,102 @@
 #!/usr/bin/env node
 // @xscriptor/skill-devx - Install the DevX development skill.
-// Usage: npx @xscriptor/skill-devx [--opencode|--anthropic|--dry-run]
-import { existsSync, mkdirSync, copyFileSync, readdirSync, statSync } from "fs";
+// Usage: npx @xscriptor/skill-devx [--opencode|--anthropic|--dry-run] [--src DIR]
+import {
+  existsSync, mkdirSync, copyFileSync, readdirSync, statSync,
+  writeFileSync, mkdtempSync, rmSync,
+} from "fs";
+import { execFileSync } from "child_process";
 import { join, dirname } from "path";
+import { tmpdir } from "os";
 import { fileURLToPath } from "url";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
-const PKG_DIR = join(__dirname, "..");
-const REPO_DIR = join(PKG_DIR, "..", "..");
+const SKILL_NAME = "devx";
+// Location of this skill inside the xscriptor-ai/skills repository.
+const SKILL_REL = join("web-fullstack", "devtools", "devx");
+const REF = process.env.XSCRIPTOR_REF || "main";
+const SKILLS_REPO = "xscriptor-ai/skills";
+const AGENTS_REPO = "xscriptor-ai/agents";
 
 function dstPath(target) {
   const home = process.env.HOME || process.env.USERPROFILE || "";
-  if (target === "anthropic") return join(home, ".claude", "skills", "devx");
+  if (target === "anthropic") return join(home, ".claude", "skills", SKILL_NAME);
   const xdg = process.env.XDG_CONFIG_HOME || join(home, ".config");
-  return join(xdg, "opencode", "skills", "devx");
+  return join(xdg, "opencode", "skills", SKILL_NAME);
 }
 
-function srcPath() {
-  const p = join(PKG_DIR, "skills", "web", "dev", "devx");
-  const r = join(REPO_DIR, "skills", "web", "dev", "devx", "devx");
-  return existsSync(p) ? p : r;
+// Walk up from this file until we find the packages repo root (.git).
+function repoRoot() {
+  let dir = __dirname;
+  for (let i = 0; i < 8; i++) {
+    if (existsSync(join(dir, ".git"))) return dir;
+    const parent = dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  return dirname(dirname(__dirname));
+}
+
+function bases() {
+  const list = [];
+  const srcIndex = process.argv.indexOf("--src");
+  if (srcIndex >= 0 && process.argv[srcIndex + 1]) list.push(process.argv[srcIndex + 1]);
+  if (process.env.XSCRIPTOR_SRC) list.push(process.env.XSCRIPTOR_SRC);
+  if (process.env.XSCRIPTOR_SKILLS_DIR) list.push(process.env.XSCRIPTOR_SKILLS_DIR);
+  if (process.env.XSCRIPTOR_AGENTS_DIR) list.push(process.env.XSCRIPTOR_AGENTS_DIR);
+  const root = repoRoot();
+  list.push(root);                       // skills repo nested at repo root
+  list.push(join(root, ".."));           // sibling checkout: <workspace>/skills
+  list.push(join(root, "..", ".."));
+  list.push(process.cwd());
+  return list;
+}
+
+function localSource(target) {
+  for (const base of bases()) {
+    if (target === "anthropic") {
+      const found = [
+        join(base, "claude", "skills", SKILL_NAME),
+        join(base, "agents", "claude", "skills", SKILL_NAME),
+      ].find(existsSync);
+      if (found) return found;
+    } else {
+      const found = [
+        join(base, SKILL_REL),            // base is the skills repo itself
+        join(base, "skills", SKILL_REL),  // base is a workspace containing skills/
+      ].find(existsSync);
+      if (found) return found;
+    }
+  }
+  return undefined;
+}
+
+async function fetchRepo(repo) {
+  const url = `https://codeload.github.com/${repo}/tar.gz/refs/heads/${REF}`;
+  console.log(`  downloading ${repo}@${REF}`);
+  const res = await fetch(url, { redirect: "follow" });
+  if (!res.ok) throw new Error(`GET ${url} -> ${res.status}`);
+  const dir = mkdtempSync(join(tmpdir(), "xscriptor-skill-"));
+  const tgz = join(dir, "src.tgz");
+  writeFileSync(tgz, Buffer.from(await res.arrayBuffer()));
+  try {
+    execFileSync("tar", ["-xzf", tgz, "-C", dir, "--strip-components=1"], { stdio: "ignore" });
+  } catch {
+    rmSync(dir, { recursive: true, force: true });
+    mkdirSync(dir, { recursive: true });
+    execFileSync("git", ["clone", "--depth", "1", "--branch", REF, `https://github.com/${repo}.git`, dir], { stdio: "ignore" });
+  }
+  rmSync(tgz, { force: true });
+  return dir;
+}
+
+async function remoteSource(target) {
+  if (target === "anthropic") {
+    const dir = await fetchRepo(AGENTS_REPO);
+    return join(dir, "claude", "skills", SKILL_NAME);
+  }
+  const dir = await fetchRepo(SKILLS_REPO);
+  return join(dir, SKILL_REL);
 }
 
 function copyDir(s, d, dry) {
@@ -35,14 +112,21 @@ function copyDir(s, d, dry) {
   return c;
 }
 
-const args = process.argv.slice(2);
-const target = args.includes("--anthropic") ? "anthropic" : "opencode";
-const dryRun = args.includes("--dry-run");
-const src = srcPath();
-const dst = dstPath(target);
+async function main() {
+  const args = process.argv.slice(2);
+  const target = args.includes("--anthropic") ? "anthropic" : "opencode";
+  const dryRun = args.includes("--dry-run");
+  const dst = dstPath(target);
+  const src = localSource(target) || await remoteSource(target);
+
+  if (!existsSync(src)) throw new Error(`skill source not found: ${src}`);
 
-if (!existsSync(src)) { console.error("Skill source not found"); process.exit(1); }
+  console.log(`==> @xscriptor/skill-devx -> ${dst}\n`);
+  const c = copyDir(src, dst, dryRun);
+  console.log(dryRun ? `\n==> Would install ${c} files` : `\n==> ${c} files installed`);
+}
 
-console.log(`==> @xscriptor/skill-devx -> ${dst}\n`);
-const c = copyDir(src, dst, dryRun);
-console.log(dryRun ? `\n==> Would install ${c} files` : `\n==> ${c} files installed`);
+main().catch(err => {
+  console.error(`error: ${err.message}`);
+  process.exit(1);
+});

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@xscriptor/skill-devx",
-  "version": "1.0.0",
-  "description": "DevX development workflows skill for OpenCode and Claude Code. Code structure, platform mapping, and project conventions.",
-  "keywords": ["opencode", "claude-code", "skill", "devx", "development"],
-  "homepage": "https://github.com/xscriptor/ai",
+  "version": "1.1.0",
+  "description": "DevX UI skill for OpenCode and Claude Code. Design system, tokens, typography, layout, motion, accessibility and project conventions for the DevX resources pages.",
+  "keywords": ["opencode", "claude-code", "skill", "devx", "design-system"],
+  "homepage": "https://github.com/xscriptor-ai/packages",
+  "bugs": { "url": "https://github.com/xscriptor-ai/packages/issues" },
   "license": "MIT",
   "author": "xscriptor (https://xscriptor.com)",
-  "repository": { "type": "git", "url": "git+https://github.com/xscriptor/ai.git" },
+  "repository": { "type": "git", "url": "git+https://github.com/xscriptor-ai/packages.git", "directory": "packages/skills/web-fullstack/devtools/devx" },
   "bin": { "skill-devx": "./bin/install.js" },
   "type": "module",
   "files": ["bin/", "LICENSE", "README.md"],