@morya-ui/setup 0.2.7 → 0.2.9

package/README.md

@@ -9,7 +9,7 @@ Docs (zh/en):
 - [Agent Skill](https://morya-space.github.io/morya-ui/docs/agent-skill) — `morya-ui-pages` behavior
 - [Quick start](https://morya-space.github.io/morya-ui/docs/quick-start) — install and first component
 
-Installs the UI library, copies Agent skill / Cursor rules / design docs from `design-kit`, merges Cursor MCP for [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp), injects `import 'morya-ui/styles.css'`, and writes `src/styles/morya-app-shell.css` with its entry import.
+Installs the UI library, copies Agent skills / Cursor rules / design docs from `design-kit`, merges Cursor MCP for [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp), and injects `import 'morya-ui/styles.css'`.
 
 ## Usage
 
@@ -19,6 +19,8 @@ In your app project root:
 npx @morya-ui/setup
 ```
 
+On a TTY, `full` / `ai` will prompt for optional Agent skills (required `morya-ui-pages` is always included).
+
 Other common commands:
 
 ```bash
@@ -27,6 +29,11 @@ npx @morya-ui/setup ai
 
 # Library + styles only
 npx @morya-ui/setup app
+
+# Non-interactive skill selection
+npx @morya-ui/setup ai --yes
+npx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design
+npx @morya-ui/setup ai --skills=all
 ```
 
 ### Options
@@ -35,20 +42,26 @@ npx @morya-ui/setup app
 | --- | --- |
 | `--cwd <dir>` | Target project root (default: current directory) |
 | `--pm pnpm\|yarn\|npm` | Package manager (default: detect from lockfile, else `pnpm`) |
+| `--skills <list>` | Comma-separated skill ids, or `all` (skips the prompt) |
+| `--yes` / `-y` | Use default skills without prompting |
 | `--force` | Overwrite existing template files and the `morya-ui` MCP entry |
 | `--dry-run` | Print actions without writing or installing |
 | `--skip-install` | Do not install `morya-ui` |
-| `--skip-template` | Do not copy AI skill / rules / docs / tokens |
+| `--skip-template` | Do not copy AI skill / rules / docs |
 | `--skip-mcp` | Do not write `.cursor/mcp.json` |
-| `--skip-styles` | Do not inject `styles.css` / write app-shell CSS |
+| `--skip-styles` | Do not inject `styles.css` |
 | `--skip-scripts` | Do not add `check:colors` to `package.json` |
 | `-h`, `--help` | Show help |
 
-Example: MCP only:
+### Skills
 
-```bash
-npx @morya-ui/setup ai --skip-template --skip-scripts
-```
+| Id | Default | Role |
+| --- | --- | --- |
+| `morya-ui-pages` | required | Page generation with `M*` + golden layouts |
+| `frontend-design` | optional | Express / brand visual taste |
+| `fixing-accessibility` | optional | A11y audit and targeted fixes |
+
+Catalog: [`catalog/skills.json`](./catalog/skills.json).
 
 ### Conflict policy
 
@@ -61,15 +74,10 @@ npx @morya-ui/setup ai --skip-template --skip-scripts
 
 From the package `template/` (synced from repo `design-kit/`):
 
-- `DESIGN.md`
-- `.agents/skills/morya-ui-pages/`
+- `DESIGN.md` — core design contract (principles, tokens, bans)
+- `.agents/skills/<selected>/` — at least `morya-ui-pages`
 - `.cursor/rules/`
-- `docs/` (component index, golden pages, feedback guide)
-- `design-tokens/`
 - `scripts/check-raw-colors.mjs`
-- `src/examples/`
-
-`morya-app-shell.css` is written by the CLI (not copied from the template tree).
 
 ### MCP (Cursor)
 
@@ -86,29 +94,4 @@ Writes / merges:
 }
 ```
 
-Restart Cursor (or reload MCP) after setup.
-
-Other clients can use the same stdio command; this CLI only writes `.cursor/mcp.json`.
-
-### Styles
-
-Looks for `src/main.ts` / `.js` / `.tsx` / `.jsx`, root `main.*`, `src/app.ts` / `.js`, or the module script in `index.html`. If none match, add manually:
-
-```ts
-import 'morya-ui/styles.css'
-import './styles/morya-app-shell.css'
-```
-
-The CLI does **not** call `app.use(MoryaUI)` or edit `App.vue`.
-
-## Local development (this monorepo)
-
-```bash
-pnpm setup:sync-template   # refresh packages/setup/template from design-kit
-pnpm setup:build
-node packages/setup/bin/morya-ui-setup.js --cwd /path/to/app --dry-run
-```
-
-## License
-
-MIT
+Restart Cursor (or reload MCP) after install.

package/catalog/skills.json

@@ -0,0 +1,28 @@
+{
+  "skills": [
+    {
+      "id": "morya-ui-pages",
+      "name": "Morya UI Pages",
+      "description": "Build admin and product pages with M* components, golden layouts, and tokens.",
+      "required": true,
+      "default": true,
+      "path": ".agents/skills/morya-ui-pages"
+    },
+    {
+      "id": "frontend-design",
+      "name": "Frontend Design",
+      "description": "Distinctive visual direction for Express / brand surfaces (taste only; still remediate with M*).",
+      "required": false,
+      "default": false,
+      "path": ".agents/skills/frontend-design"
+    },
+    {
+      "id": "fixing-accessibility",
+      "name": "Fixing Accessibility",
+      "description": "Audit and fix names, keyboard, focus, forms, and WCAG basics.",
+      "required": false,
+      "default": false,
+      "path": ".agents/skills/fixing-accessibility"
+    }
+  ]
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@morya-ui/setup",
   "type": "module",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "One-shot setup for morya-ui: install the library, Cursor MCP, Agent skills, and design config.",
   "license": "MIT",
   "homepage": "https://github.com/morya-space/morya-ui/tree/main/packages/setup#readme",
@@ -22,6 +22,7 @@
   "files": [
     "README.md",
     "bin",
+    "catalog",
     "src",
     "template"
   ],

package/src/cli.mjs

@@ -6,7 +6,13 @@ import { readJson } from './fs-utils.mjs'
 import { installMoryaUi } from './install.mjs'
 import { mergeMcpConfig } from './mcp.mjs'
 import { ensureCheckColorsScript } from './package-json.mjs'
-import { ensureShellStyles, ensureStylesImport } from './styles.mjs'
+import {
+  buildAiInclude,
+  loadSkillsCatalog,
+  parseSkillsFlag,
+  resolveSkillSelection,
+} from './skills.mjs'
+import { ensureStylesImport } from './styles.mjs'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 const PKG_ROOT = resolve(__dirname, '..')
@@ -14,17 +20,6 @@ const TEMPLATE_ROOT = join(PKG_ROOT, 'template')
 
 const MODES = new Set(['app', 'ai', 'full'])
 
-/** AI pack paths under template/ (excludes runtime src/styles — owned by app mode). */
-const AI_TEMPLATE_INCLUDE = [
-  'DESIGN.md',
-  '.agents/skills/morya-ui-pages',
-  '.cursor/rules',
-  'docs',
-  'design-tokens',
-  'scripts/check-raw-colors.mjs',
-  'src/examples',
-]
-
 /** Mode → default skips (user --skip-* can only add more skips). */
 const MODE_DEFAULTS = {
   full: {},
@@ -41,33 +36,43 @@ const SKIP_FLAGS = {
 }
 
 export function printHelp() {
+  const { skills } = loadSkillsCatalog()
+  const skillList = skills.map((s) => {
+    const tag = s.required ? 'required' : s.default ? 'default' : 'optional'
+    return `    ${s.id.padEnd(24)} (${tag}) ${s.description}`
+  }).join('\n')
+
   console.log(`Usage: morya-ui-setup [command] [options]
 
 Commands:
   (default) / full  Install morya-ui, AI template, MCP, styles, check:colors
-  app               Install morya-ui and inject styles / app-shell CSS
-  ai                Copy Agent skill / rules / DESIGN / docs / tokens / examples,
+  app               Install morya-ui and inject styles.css
+  ai                Copy Agent skills / rules / DESIGN,
                     merge Cursor MCP, add check:colors
 
 Default command:
   - install morya-ui
-  - copy DESIGN.md, Agent skill, Cursor rules, docs, tokens, examples
+  - copy DESIGN.md, selected Agent skills, Cursor rules
   - merge .cursor/mcp.json for @morya-ui/mcp
   - inject import 'morya-ui/styles.css' into the app entry when found
-  - write src/styles/morya-app-shell.css and inject its import
   - add check:colors script when missing
 
 Options:
   --cwd <dir>       Target project root (default: process.cwd())
   --pm <name>       Package manager: pnpm | yarn | npm (auto-detect by lockfile)
+  --skills <list>   Comma-separated skill ids, or "all" (skips interactive prompt)
+  --yes             Use default skills without prompting (CI / non-interactive)
   --force           Overwrite existing template files and MCP server entry
   --dry-run         Print actions without writing or installing
   --skip-install    Skip dependency install
   --skip-template   Skip copying AI template files
   --skip-mcp        Skip writing .cursor/mcp.json
-  --skip-styles     Skip injecting styles.css / app-shell CSS
+  --skip-styles     Skip injecting styles.css
   --skip-scripts    Skip adding check:colors to package.json
   -h, --help        Show this help
+
+Skills:
+${skillList}
 `)
 }
 
@@ -79,6 +84,8 @@ export function parseArgs(argv) {
     mode: 'full',
     cwd: process.cwd(),
     pm: undefined,
+    skills: undefined,
+    yes: false,
     force: false,
     dryRun: false,
     skipInstall: false,
@@ -107,6 +114,10 @@ export function parseArgs(argv) {
       options.dryRun = true
       continue
     }
+    if (arg === '--yes' || arg === '-y') {
+      options.yes = true
+      continue
+    }
     if (SKIP_FLAGS[arg]) {
       options[SKIP_FLAGS[arg]] = true
       continue
@@ -131,6 +142,16 @@ export function parseArgs(argv) {
       options.pm = arg.slice('--pm='.length)
       continue
     }
+    if (arg === '--skills') {
+      const value = argv[++i]
+      if (!value) throw new Error('--skills requires a comma-separated list or "all"')
+      options.skills = value
+      continue
+    }
+    if (arg.startsWith('--skills=')) {
+      options.skills = arg.slice('--skills='.length)
+      continue
+    }
     throw new Error(`Unknown argument: ${arg}`)
   }
 
@@ -180,6 +201,8 @@ export async function runSetup(options) {
     skipStyles,
     skipScripts,
     pm,
+    skills: skillsFlag,
+    yes,
   } = options
 
   console.log(`@morya-ui/setup [${mode}] → ${cwd}${dryRun ? ' (dry-run)' : ''}`)
@@ -192,6 +215,24 @@ export async function runSetup(options) {
     console.log('')
   }
 
+  const catalog = loadSkillsCatalog()
+  let selectedSkills = []
+  let aiInclude
+
+  const needsTemplate = !skipTemplate && (mode === 'ai' || mode === 'full')
+  if (needsTemplate) {
+    if (skillsFlag != null) {
+      selectedSkills = parseSkillsFlag(skillsFlag, catalog.skills)
+    } else {
+      selectedSkills = await resolveSkillSelection(catalog.skills, {
+        skipPrompt: yes || dryRun,
+      })
+    }
+    aiInclude = buildAiInclude(selectedSkills, catalog.skills)
+    console.log(`Skills: ${selectedSkills.join(', ')}`)
+    console.log('')
+  }
+
   const install = installMoryaUi(cwd, { pm, dryRun, skipInstall })
 
   const template = skipTemplate
@@ -199,7 +240,7 @@ export async function runSetup(options) {
     : copyTemplate(TEMPLATE_ROOT, cwd, {
         force,
         dryRun,
-        include: mode === 'ai' || mode === 'full' ? AI_TEMPLATE_INCLUDE : undefined,
+        include: aiInclude,
       })
 
   const mcp = skipMcp
@@ -210,10 +251,6 @@ export async function runSetup(options) {
     ? { action: 'skipped', reason: 'skip-styles' }
     : ensureStylesImport(cwd, { dryRun })
 
-  const shell = skipStyles
-    ? { fileAction: 'skipped', importAction: 'skipped', reason: 'skip-styles' }
-    : ensureShellStyles(cwd, { dryRun, force })
-
   const scripts = skipScripts
     ? { action: 'skipped-flag' }
     : ensureCheckColorsScript(cwd, { force, dryRun })
@@ -231,6 +268,7 @@ export async function runSetup(options) {
     console.log(
       `Template: ${template.copied.length} copied, ${template.forced.length} overwritten, ${template.skipped.length} skipped`,
     )
+    if (selectedSkills.length) console.log(`  skills: ${selectedSkills.join(', ')}`)
     if (template.skipped.length && template.skipped.length <= 8) {
       for (const file of template.skipped) console.log(`  skip ${file}`)
     } else if (template.skipped.length > 8) {
@@ -256,17 +294,6 @@ export async function runSetup(options) {
     console.log("  import 'morya-ui/styles.css'")
   }
 
-  if (shell.reason === 'skip-styles') {
-    console.log('Shell CSS: skipped (--skip-styles or ai mode)')
-  } else {
-    console.log(
-      `Shell CSS: file ${shell.fileAction}`
-        + (shell.path ? ` (${rel(cwd, shell.path)})` : '')
-        + `, import ${shell.importAction}`
-        + (shell.entry ? ` (${rel(cwd, shell.entry)})` : ''),
-    )
-  }
-
   if (scripts.action === 'skipped-flag') {
     console.log('Scripts: skipped (--skip-scripts or app mode)')
   } else {
@@ -276,18 +303,18 @@ export async function runSetup(options) {
   console.log('')
   console.log('Next:')
   if (mode === 'app') {
-    console.log('  1. Ensure styles.css + morya-app-shell.css imports are in your app entry.')
+    console.log('  1. Ensure the styles.css import is in your app entry.')
     console.log('  2. Optional AI pack: npx @morya-ui/setup ai')
   } else if (mode === 'ai') {
     console.log('  1. Restart Cursor (or reload MCP) so morya-ui MCP tools appear.')
     console.log('  2. Have the agent read DESIGN.md before generating pages.')
     console.log('  3. Optional: pnpm check:colors')
   } else {
-    console.log('  1. Ensure styles.css + morya-app-shell.css imports are in your app entry.')
+    console.log('  1. Ensure the styles.css import is in your app entry.')
     console.log('  2. Restart Cursor (or reload MCP) so morya-ui MCP tools appear.')
     console.log('  3. Have the agent read DESIGN.md before generating pages.')
     console.log('  4. Optional: pnpm check:colors')
   }
 
-  return { mode, install, template, mcp, styles, shell, scripts }
+  return { mode, install, template, mcp, styles, scripts, skills: selectedSkills }
 }

package/src/skills.mjs

@@ -0,0 +1,154 @@
+import { createInterface } from 'node:readline'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { readJson } from './fs-utils.mjs'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const CATALOG_PATH = join(__dirname, '..', 'catalog', 'skills.json')
+
+/**
+ * @typedef {{
+ *   id: string
+ *   name: string
+ *   description: string
+ *   required?: boolean
+ *   default?: boolean
+ *   path: string
+ * }} SkillEntry
+ */
+
+/**
+ * @returns {{ skills: SkillEntry[] }}
+ */
+export function loadSkillsCatalog() {
+  return readJson(CATALOG_PATH)
+}
+
+/**
+ * @param {SkillEntry[]} skills
+ */
+export function defaultSkillIds(skills) {
+  return skills.filter((s) => s.required || s.default).map((s) => s.id)
+}
+
+/**
+ * @param {string | undefined} raw
+ * @param {SkillEntry[]} skills
+ * @returns {string[]}
+ */
+export function parseSkillsFlag(raw, skills) {
+  if (raw == null || raw === '') return defaultSkillIds(skills)
+  const known = new Map(skills.map((s) => [s.id, s]))
+  if (raw.trim() === 'all') return skills.map((s) => s.id)
+
+  const ids = raw
+    .split(',')
+    .map((part) => part.trim())
+    .filter(Boolean)
+
+  if (ids.length === 0) return defaultSkillIds(skills)
+
+  const missing = ids.filter((id) => !known.has(id))
+  if (missing.length) {
+    throw new Error(
+      `Unknown skill id(s): ${missing.join(', ')}. Available: ${skills.map((s) => s.id).join(', ')}, or all`,
+    )
+  }
+
+  const selected = new Set(ids)
+  for (const skill of skills) {
+    if (skill.required) selected.add(skill.id)
+  }
+  return skills.map((s) => s.id).filter((id) => selected.has(id))
+}
+
+/**
+ * @param {string[]} skillIds
+ * @param {SkillEntry[]} skills
+ * @returns {string[]}
+ */
+export function skillPathsForIds(skillIds, skills) {
+  const byId = new Map(skills.map((s) => [s.id, s]))
+  return skillIds.map((id) => {
+    const entry = byId.get(id)
+    if (!entry) throw new Error(`Unknown skill id: ${id}`)
+    return entry.path
+  })
+}
+
+/**
+ * Build template include prefixes for the AI pack.
+ * @param {string[]} skillIds
+ * @param {SkillEntry[]} skills
+ */
+export function buildAiInclude(skillIds, skills) {
+  return [
+    'DESIGN.md',
+    ...skillPathsForIds(skillIds, skills),
+    '.cursor/rules',
+    'scripts/check-raw-colors.mjs',
+  ]
+}
+
+/**
+ * Prompt for optional skills when stdin is a TTY.
+ * Required skills are always included.
+ * @param {SkillEntry[]} skills
+ * @param {{ skipPrompt?: boolean }} [options]
+ * @returns {Promise<string[]>}
+ */
+export async function resolveSkillSelection(skills, { skipPrompt = false } = {}) {
+  const required = skills.filter((s) => s.required).map((s) => s.id)
+  const optional = skills.filter((s) => !s.required)
+
+  if (skipPrompt || optional.length === 0 || !process.stdin.isTTY) {
+    return defaultSkillIds(skills)
+  }
+
+  console.log('Select optional Agent skills (in addition to required):')
+  optional.forEach((skill, index) => {
+    const mark = skill.default ? 'x' : ' '
+    console.log(`  ${index + 1}. [${mark}] ${skill.id} — ${skill.description}`)
+  })
+  console.log('')
+  console.log('Enter comma-separated numbers or ids (empty = defaults only).')
+  console.log(`Required: ${required.join(', ') || '(none)'}`)
+
+  const answer = await question('> ')
+  const trimmed = answer.trim()
+  if (!trimmed) return defaultSkillIds(skills)
+
+  const selected = new Set(required)
+  const tokens = trimmed.split(/[\s,]+/).filter(Boolean)
+  for (const token of tokens) {
+    const asIndex = Number(token)
+    if (Number.isInteger(asIndex) && asIndex >= 1 && asIndex <= optional.length) {
+      selected.add(optional[asIndex - 1].id)
+      continue
+    }
+    if (token === 'all') {
+      for (const skill of optional) selected.add(skill.id)
+      continue
+    }
+    if (!skills.some((s) => s.id === token)) {
+      throw new Error(`Unknown skill selection: ${token}`)
+    }
+    selected.add(token)
+  }
+
+  return skills.map((s) => s.id).filter((id) => selected.has(id))
+}
+
+/**
+ * @param {string} prompt
+ * @returns {Promise<string>}
+ */
+function question(prompt) {
+  const rl = createInterface({ input: process.stdin, output: process.stdout })
+  return new Promise((resolve) => {
+    rl.question(prompt, (answer) => {
+      rl.close()
+      resolve(answer)
+    })
+  })
+}

package/src/styles.mjs

@@ -1,10 +1,8 @@
-import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs'
-import { dirname, join, relative, resolve } from 'node:path'
+import { existsSync, readFileSync, writeFileSync } from 'node:fs'
+import { join, resolve } from 'node:path'
 
 const STYLE_IMPORT = "import 'morya-ui/styles.css'"
 const STYLE_MARKER = 'morya-ui/styles.css'
-const SHELL_MARKER = 'morya-app-shell.css'
-const SHELL_REL = 'src/styles/morya-app-shell.css'
 
 const CANDIDATES = [
   'src/main.ts',
@@ -17,14 +15,6 @@ const CANDIDATES = [
   'src/app.js',
 ]
 
-const SHELL_CSS = `html,
-body,
-#app {
-  height: 100%;
-  margin: 0;
-}
-`
-
 /**
  * @param {string} cwd
  * @returns {string | null} absolute path
@@ -100,16 +90,6 @@ export function injectStyleImport(source) {
   return injectImportLine(source, STYLE_IMPORT, STYLE_MARKER)
 }
 
-/**
- * @param {string} entryFile absolute
- * @param {string} shellFile absolute
- */
-export function shellImportLine(entryFile, shellFile) {
-  let rel = relative(dirname(entryFile), shellFile).replace(/\\/g, '/')
-  if (!rel.startsWith('.')) rel = `./${rel}`
-  return `import '${rel}'`
-}
-
 /**
  * @returns {{
  *   action: 'injected' | 'skipped' | 'missing-entry',
@@ -137,68 +117,3 @@ export function ensureStylesImport(cwd, { dryRun = false } = {}) {
 
   return { action: 'injected', path: entry, dryRun }
 }
-
-/**
- * Write morya-app-shell.css (height chain) and inject its import into the entry.
- * @returns {{
- *   fileAction: 'written' | 'skipped' | 'dry-run',
- *   importAction: 'injected' | 'skipped' | 'missing-entry',
- *   path?: string,
- *   entry?: string,
- *   reason?: string,
- *   dryRun?: boolean
- * }}
- */
-export function ensureShellStyles(cwd, { dryRun = false, force = false } = {}) {
-  const shellFile = join(cwd, SHELL_REL)
-  const entry = findEntryFile(cwd)
-
-  let fileAction = 'skipped'
-  if (!existsSync(shellFile) || force) {
-    if (dryRun) {
-      fileAction = 'dry-run'
-    }
-    else {
-      mkdirSync(dirname(shellFile), { recursive: true })
-      writeFileSync(shellFile, SHELL_CSS, 'utf8')
-      fileAction = 'written'
-    }
-  }
-
-  if (!entry) {
-    return {
-      fileAction,
-      importAction: 'missing-entry',
-      path: shellFile,
-      reason: 'no-entry-found',
-      dryRun,
-    }
-  }
-
-  const importLine = shellImportLine(entry, shellFile)
-  const original = readFileSync(entry, 'utf8')
-  const { source, changed, reason } = injectImportLine(original, importLine, SHELL_MARKER)
-
-  if (!changed) {
-    return {
-      fileAction,
-      importAction: 'skipped',
-      path: shellFile,
-      entry,
-      reason: reason || 'already-present',
-      dryRun,
-    }
-  }
-
-  if (!dryRun) {
-    writeFileSync(entry, source, 'utf8')
-  }
-
-  return {
-    fileAction,
-    importAction: 'injected',
-    path: shellFile,
-    entry,
-    dryRun,
-  }
-}