@morya-ui/setup 0.2.8 → 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), and injects `import 'morya-ui/styles.css'`.
+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` |
 | `--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,8 +74,8 @@ 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/`
 - `scripts/check-raw-colors.mjs`
 
@@ -81,28 +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'
-```
-
-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.8",
+  "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,6 +6,12 @@ import { readJson } from './fs-utils.mjs'
 import { installMoryaUi } from './install.mjs'
 import { mergeMcpConfig } from './mcp.mjs'
 import { ensureCheckColorsScript } from './package-json.mjs'
+import {
+  buildAiInclude,
+  loadSkillsCatalog,
+  parseSkillsFlag,
+  resolveSkillSelection,
+} from './skills.mjs'
 import { ensureStylesImport } from './styles.mjs'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
@@ -14,14 +20,6 @@ const TEMPLATE_ROOT = join(PKG_ROOT, 'template')
 
 const MODES = new Set(['app', 'ai', 'full'])
 
-/** AI pack paths under template/. */
-const AI_TEMPLATE_INCLUDE = [
-  'DESIGN.md',
-  '.agents/skills/morya-ui-pages',
-  '.cursor/rules',
-  'scripts/check-raw-colors.mjs',
-]
-
 /** Mode → default skips (user --skip-* can only add more skips). */
 const MODE_DEFAULTS = {
   full: {},
@@ -38,17 +36,23 @@ 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.css
-  ai                Copy Agent skill / rules / DESIGN,
+  ai                Copy Agent skills / rules / DESIGN,
                     merge Cursor MCP, add check:colors
 
 Default command:
   - install morya-ui
-  - copy DESIGN.md, Agent skill, Cursor rules
+  - 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
   - add check:colors script when missing
@@ -56,6 +60,8 @@ Default command:
 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
@@ -64,6 +70,9 @@ Options:
   --skip-styles     Skip injecting styles.css
   --skip-scripts    Skip adding check:colors to package.json
   -h, --help        Show this help
+
+Skills:
+${skillList}
 `)
 }
 
@@ -75,6 +84,8 @@ export function parseArgs(argv) {
     mode: 'full',
     cwd: process.cwd(),
     pm: undefined,
+    skills: undefined,
+    yes: false,
     force: false,
     dryRun: false,
     skipInstall: false,
@@ -103,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
@@ -127,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}`)
   }
 
@@ -176,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)' : ''}`)
@@ -188,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
@@ -195,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
@@ -223,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) {
@@ -270,5 +316,5 @@ export async function runSetup(options) {
     console.log('  4. Optional: pnpm check:colors')
   }
 
-  return { mode, install, template, mcp, styles, 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/template/.agents/skills/fixing-accessibility/SKILL.md

@@ -0,0 +1,138 @@
+---
+name: fixing-accessibility
+description: Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.
+---
+
+# fixing-accessibility
+
+> **morya-ui consumer note:** Prefer library defaults (`label`, `aria-label`, Esc-dismiss overlays). Do not replace `M*` widgets with custom ARIA hacks. When guidance conflicts with `DESIGN.md` or `morya-ui-pages`, **those win**.
+
+Fix accessibility issues.
+
+## how to use
+
+- `/fixing-accessibility`
+  Apply these constraints to any UI work in this conversation.
+
+- `/fixing-accessibility <file>`
+  Review the file against all rules below and report:
+  - violations (quote the exact line or snippet)
+  - why it matters (one short sentence)
+  - a concrete fix (code-level suggestion)
+
+Do not rewrite large parts of the UI. Prefer minimal, targeted fixes.
+
+## when to apply
+
+Reference these guidelines when:
+- adding or changing buttons, links, inputs, menus, dialogs, tabs, dropdowns
+- building forms, validation, error states, helper text
+- implementing keyboard shortcuts or custom interactions
+- working on focus states, focus trapping, or modal behavior
+- rendering icon-only controls
+- adding hover-only interactions or hidden content
+
+## rule categories by priority
+
+| priority | category | impact |
+|----------|----------|--------|
+| 1 | accessible names | critical |
+| 2 | keyboard access | critical |
+| 3 | focus and dialogs | critical |
+| 4 | semantics | high |
+| 5 | forms and errors | high |
+| 6 | announcements | medium-high |
+| 7 | contrast and states | medium |
+| 8 | media and motion | low-medium |
+| 9 | tool boundaries | critical |
+
+## quick reference
+
+### 1. accessible names (critical)
+
+- every interactive control must have an accessible name
+- icon-only buttons must have aria-label or aria-labelledby
+- every input, select, and textarea must be labeled
+- links must have meaningful text (no “click here”)
+- decorative icons must be aria-hidden
+
+### 2. keyboard access (critical)
+
+- do not use div or span as buttons without full keyboard support
+- all interactive elements must be reachable by Tab
+- focus must be visible for keyboard users
+- do not use tabindex greater than 0
+- Escape must close dialogs or overlays when applicable
+
+### 3. focus and dialogs (critical)
+
+- modals must trap focus while open
+- restore focus to the trigger on close
+- set initial focus inside dialogs
+- opening a dialog should not scroll the page unexpectedly
+
+### 4. semantics (high)
+
+- prefer native elements (button, a, input) over role-based hacks
+- if a role is used, required aria attributes must be present
+- lists must use ul or ol with li
+- do not skip heading levels
+- tables must use th for headers when applicable
+
+### 5. forms and errors (high)
+
+- errors must be linked to fields using aria-describedby
+- required fields must be announced
+- invalid fields must set aria-invalid
+- helper text must be associated with inputs
+- disabled submit actions must explain why
+
+### 6. announcements (medium-high)
+
+- critical form errors should use aria-live
+- loading states should use aria-busy or status text
+- toasts must not be the only way to convey critical information
+- expandable controls must use aria-expanded and aria-controls
+
+### 7. contrast and states (medium)
+
+- ensure sufficient contrast for text and icons
+- hover-only interactions must have keyboard equivalents
+- disabled states must not rely on color alone
+- do not remove focus outlines without a visible replacement
+
+### 8. media and motion (low-medium)
+
+- images must have correct alt text (meaningful or empty)
+- videos with speech should provide captions when relevant
+- respect prefers-reduced-motion for non-essential motion
+- avoid autoplaying media with sound
+
+### 9. tool boundaries (critical)
+
+- prefer minimal changes, do not refactor unrelated code
+- do not add aria when native semantics already solve the problem
+- do not migrate UI libraries unless requested
+
+## common fixes
+
+```html
+<!-- icon-only button: add aria-label -->
+<!-- before --> <button><svg>...</svg></button>
+<!-- after -->  <button aria-label="Close"><svg aria-hidden="true">...</svg></button>
+
+<!-- div as button: use native element -->
+<!-- before --> <div onclick="save()">Save</div>
+<!-- after -->  <button onclick="save()">Save</button>
+
+<!-- form error: link with aria-describedby -->
+<!-- before --> <input id="email" /> <span>Invalid email</span>
+<!-- after -->  <input id="email" aria-describedby="email-err" aria-invalid="true" /> <span id="email-err">Invalid email</span>
+```
+
+## review guidance
+
+- fix critical issues first (names, keyboard, focus, tool boundaries)
+- prefer native HTML before adding aria
+- quote the exact snippet, state the failure, propose a small fix
+- for complex widgets (menu, dialog, combobox), prefer established accessible primitives over custom behavior