@inglorious/create-app 1.4.2 → 1.5.0

package/README.md

@@ -25,16 +25,18 @@ The CLI will guide you through the setup process, asking for a project name and
 
 For the JavaScript and TypeScript Vite templates, the CLI then asks about the app's features:
 
-| Question                  | Flag                                                 | Adds                                                                                                  |
-| ------------------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
-| Use Inglorious UI?        | `--ui` / `--no-ui`                                   | `@inglorious/ui`, its base styles and an app bar                                                      |
-| Which theme?              | `--theme=inglorious\|material\|bootstrap`            | The theme's stylesheet and class                                                                      |
-| Is it a mobile app?       | `--mobile` / `--no-mobile`                           | Capacitor for Android and iOS; with Inglorious UI, a bottom tab bar and safe-area spacing             |
-| Add routing?              | `--routing` / `--no-routing`                         | The Router, a home and an about page, and navigation between them                                     |
-| Animate page transitions? | `--transitions` / `--no-transitions`                 | View transitions between pages (with routing and Inglorious UI)                                       |
-| Which icon packs?         | `--icons=material,fontawesome,lucide` / `--no-icons` | Iconify icon sets, drawn by Inglorious UI's `Icon` (with Inglorious UI)                               |
-| Translate the app?        | `--i18n` / `--no-i18n`, `--languages=en,it`          | `@inglorious/i18n`, a catalogue per language and a language picker; the first language is the default |
-| Enable PWA support?       | `--pwa` / `--no-pwa`                                 | `vite-plugin-pwa`, a manifest, icons and service worker registration                                  |
+| Question                  | Flag                                                 | Adds                                                                                                       |
+| ------------------------- | ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
+| Use Inglorious UI?        | `--ui` / `--no-ui`                                   | `@inglorious/ui`, its base styles and an app bar                                                           |
+| Which theme?              | `--theme=inglorious\|material\|bootstrap`            | The theme's stylesheet and class                                                                           |
+| Is it a mobile app?       | `--mobile` / `--no-mobile`                           | Capacitor for Android and iOS; with Inglorious UI, a bottom tab bar and safe-area spacing                  |
+| Add routing?              | `--routing` / `--no-routing`                         | The Router, a home and an about page, and navigation between them                                          |
+| Animate page transitions? | `--transitions` / `--no-transitions`                 | View transitions between pages (with routing and Inglorious UI)                                            |
+| Which icon packs?         | `--icons=material,fontawesome,lucide` / `--no-icons` | Iconify icon sets, drawn by Inglorious UI's `Icon` (with Inglorious UI)                                    |
+| Translate the app?        | `--i18n` / `--no-i18n`, `--languages=en,it`          | `@inglorious/i18n`, a catalogue per language and a language picker; the first language is the default      |
+| Enable PWA support?       | `--pwa` / `--no-pwa`                                 | `vite-plugin-pwa`, a manifest, icons, and a service worker that keeps installed apps on the latest version |
+
+Every template except `minimal` then asks whether to add agent skills (`--skills` / `--no-skills`). Saying yes runs the [skills CLI](https://skills.sh) in the new project. It asks which coding agents to install for, and installs the [Inglorious Forge skills](https://github.com/IngloriousCoderz/forge-skills) that match your choices: `forge`, `forge-best-practices`, `store`, `web` and `web-best-practices` always, plus `ssx`, `vite-plugin-jsx` or `vite-plugin-vue`, `ui` and `ui-best-practices`, and `i18n` when the project uses them. If the install fails, the CLI prints the command to retry it.
 
 The app is generated in the syntax you chose: lit-html, JSX or Vue. Every question answered on the command line is skipped, so a project can be created without any prompt:
 
@@ -45,7 +47,7 @@ The app is generated in the syntax you chose: lit-html, JSX or Vue. Every questi
 | Select a rendering syntax   | `--syntax=lit-html\|jsx\|vue`                |
 
 ```bash
-npm create @inglorious/app@latest -- my-app --template=ts --syntax=jsx --ui --theme=material --routing --transitions --icons=material --languages=en,it --no-mobile --no-pwa
+npm create @inglorious/app@latest -- my-app --template=ts --syntax=jsx --ui --theme=material --routing --transitions --icons=material --languages=en,it --no-mobile --no-pwa --skills
 ```
 
 ## Templates

package/bin/index.js

@@ -21,6 +21,7 @@ import { copyDir } from "./lib/file.js"
 import { addMobileSupport } from "./lib/mobile.js"
 import { addPwaSupport } from "./lib/pwa.js"
 import { askAppFeatures } from "./lib/questions.js"
+import { installSkills, skillsCommand, skillsFor } from "./lib/skills.js"
 
 async function main() {
   const __dirname = path.dirname(fileURLToPath(import.meta.url))
@@ -107,6 +108,29 @@ async function main() {
     )
   }
 
+  let withSkills = false
+
+  if (baseTemplate !== "minimal") {
+    const { addSkills } = await prompts(
+      {
+        type: cliOptions.skills === null ? "confirm" : null,
+        name: "addSkills",
+        message: "Add agent skills for coding agents? (Claude Code, Codex...)",
+        initial: true,
+      },
+      { onCancel },
+    )
+
+    if (canceled) {
+      console.log("Operation canceled.")
+      return
+    }
+
+    withSkills = cliOptions.skills ?? addSkills
+  } else if (cliOptions.skills) {
+    console.warn("Agent skills are not available for the minimal template.")
+  }
+
   const spinner = ora(`Creating project "${projectName}"...`).start()
 
   try {
@@ -179,6 +203,16 @@ async function main() {
     fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, INDENTATION) + EOL)
 
     spinner.succeed(`Created ${projectName} at ${targetDir}`)
+
+    if (withSkills) {
+      const skills = skillsFor({ baseTemplate, renderer, ...features })
+      if (!installSkills(targetDir, skills)) {
+        console.warn(`\nCould not add the agent skills. To retry, run:`)
+        console.warn(`  cd ${projectName}`)
+        console.warn(`  ${skillsCommand(skills)}`)
+      }
+    }
+
     console.log(`\nNext steps:`)
     console.log(`  cd ${projectName}`)
     console.log(`  pnpm install`)

package/bin/lib/cli.js

@@ -12,6 +12,7 @@ export function parseCliOptions(args) {
     icons: readListFlag(args, "icons"),
     i18n: readBooleanFlag(args, "i18n"),
     languages: readListFlag(args, "languages"),
+    skills: readBooleanFlag(args, "skills"),
   }
 }
 

package/bin/lib/pwa.js

@@ -91,33 +91,37 @@ export function writePwaRegistration(targetDir) {
   fs.writeFileSync(pwaPath, createPwaRegistrationSource(extension))
 }
 
+// The worker waits for the SKIP_WAITING message `watchPwaUpdate` sends: on
+// its own, a new version would wait for every tab of the app to close, which
+// for a PWA installed on a phone is never.
 export function createPwaRegistrationSource(extension) {
-  if (extension === ".ts") {
-    return `// Only the framework-free helpers: "client" also loads React's and Preact's
-// typings, whose global JSX would replace Inglorious's.
-/// <reference types="vite-plugin-pwa/vanillajs" />
-import { isNative } from "@inglorious/web/mobile"
+  const registration = `import { isNative } from "@inglorious/web/mobile"
+import { watchPwaUpdate } from "@inglorious/web/pwa"
 import { registerSW } from "virtual:pwa-register"
 
 if (!isNative()) {
-  registerSW()
+  registerSW({
+    onRegisteredSW(url, registration) {
+      if (registration) watchPwaUpdate(registration)
+    },
+  })
 }
 `
-  }
 
-  return `import { isNative } from "@inglorious/web/mobile"
-import { registerSW } from "virtual:pwa-register"
+  if (extension === ".ts") {
+    return `// Only the framework-free helpers: "client" also loads React's and Preact's
+// typings, whose global JSX would replace Inglorious's.
+/// <reference types="vite-plugin-pwa/vanillajs" />
+${registration}`
+  }
 
-if (!isNative()) {
-  registerSW()
-}
-`
+  return registration
 }
 
 export function createVitePwaConfig(projectName) {
   return `VitePWA({
       injectRegister: false,
-      registerType: "autoUpdate",
+      registerType: "prompt",
       pwaAssets: {
         image: "public/logo.png",
         preset: "minimal-2023",

package/bin/lib/skills.js

@@ -0,0 +1,44 @@
+import { execSync } from "child_process"
+
+const SKILLS_REPOSITORY = "IngloriousCoderz/forge-skills"
+
+/**
+ * The agent skills for the packages a new project uses.
+ *
+ * @param {{ baseTemplate: string, renderer: string, ui: boolean, languages: string[] }} project
+ */
+export function skillsFor({ baseTemplate, renderer, ui, languages }) {
+  const skills = [
+    "forge",
+    "forge-best-practices",
+    "store",
+    "web",
+    "web-best-practices",
+  ]
+  if (baseTemplate.startsWith("ssx-")) skills.push("ssx")
+  if (renderer === "jsx") skills.push("vite-plugin-jsx")
+  if (renderer === "vue") skills.push("vite-plugin-vue")
+  if (ui) skills.push("ui", "ui-best-practices")
+  if (languages.length) skills.push("i18n")
+  return skills
+}
+
+/**
+ * Installs the skills into the project with the skills CLI, which asks which
+ * agents to install them for. Returns false when the install fails.
+ *
+ * @param {string} targetDir
+ * @param {string[]} skills
+ */
+export function installSkills(targetDir, skills) {
+  try {
+    execSync(skillsCommand(skills), { cwd: targetDir, stdio: "inherit" })
+    return true
+  } catch {
+    return false
+  }
+}
+
+export function skillsCommand(skills) {
+  return `pnpm dlx skills add ${SKILLS_REPOSITORY} --skill ${skills.join(" ")}`
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/create-app",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "A scaffolding tool to quickly create a new app with Inglorious Web.",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",