create-lumen 1.0.0 → 1.1.0

package/README.md

@@ -1,33 +1,12 @@
 # create-lumen
 
-Scaffold a React + Vite project with your choice of **feature-based** or **component-based** architecture.
+A scaffolder that generates production-ready React + Vite projects (feature-based or component-based).
 
-```bash
-npm create lumen
-```
-
-## What it does
-
-Creates a production-ready React + Vite project with:
+Note: this repository is the CLI scaffolder itself, not a generated app. Generated projects live in the target folder you create.
 
-- **Architecture choice** — feature-based (domain-driven) or component-based (grouped by type)
-- **TypeScript or JavaScript**
-- **CSS framework** — Tailwind CSS, Bootstrap, or vanilla CSS
-- **State management** — Zustand, Redux Toolkit, or none
-- **React Router** — client-side routing (optional)
-- **Testing** — Vitest or Jest (optional)
-- **Linter** — ESLint (default) or Oxlint
-- **Icon library** — Lucide React, Huge Icons, or none
-- **Axios** — pre-configured HTTP client (optional)
-- **README + LICENSE** — auto-generated (MIT)
-- **Git init** — auto-initialize a git repo
-- **Path alias** — `@/` imports configured out of the box
+## Quick usage
 
-Your choices are cached and used as defaults next time.
-
-## Quick start
-
-### From npm (recommended)
+From npm (recommended):
 
 ```bash
 npm create lumen my-app
@@ -35,81 +14,145 @@ cd my-app
 npm run dev
 ```
 
-### From this repo
+Non-interactive Quick Setup (TypeScript + Tailwind + Feature-based + Router + ESLint + Prettier + Vitest), no prompts:
+
+```bash
+npm create lumen my-app -y
+```
+
+Run the scaffolder locally (development / testing the generator):
 
 ```bash
-git clone https://github.com/Its-JrDev/create-lumen.git
-cd create-lumen
+node bin/cli.js           # run interactively
 npm install
-npm link
-npx create-lumen my-app
-cd my-app
-npm run dev
+npm link                 # install globally for testing
+create-lumen my-app      # after npm link
 ```
 
-### Quick setup defaults
+## Features
+
+- Architecture choice: feature-based or component-based
+- TypeScript or JavaScript output
+- CSS frameworks: Tailwind, Bootstrap, or none
+- Optional state management: Zustand or Redux Toolkit
+- Optional router (React Router)
+- Optional testing: Vitest or Jest
+- Linting: ESLint (default) or Oxlint
+- Code formatter: Prettier or Oxfmt (chosen after the linter; `eslint-config-prettier` is auto-wired for the ESLint + Prettier combo)
+- Optional Axios setup and icon libraries
+- Auto `git init`, generated `README` (with a project description reflecting the chosen tooling) and `LICENSE`
+- `.env.example` scaffolded, and the generated `.gitignore` excludes env files (`.env`, `.env.*`) while keeping `.env.example`
+- `@/` path alias configured (`tsconfig`/`jsconfig` + Vite)
 
-TypeScript · Tailwind CSS · Feature-based · Router · ESLint · Vitest
+Your selected options are cached and offered as defaults on subsequent runs.
 
-## Architecture
+## Developing the scaffolder
 
-### Feature-based
+- Entry point: `bin/cli.js` → `src/main.js` (ESM-only)
+- Templates: `templates/` (architectures + conditional overlays)
+- Injector copies architecture, then overlays conditionals based on choices
+- Config cache: `~/.lumen-config.json` stores previous choices
+- This tool uses Node >= 18 and `execa` for subprocesses
 
-Organized by domain. Each feature is self-contained:
+Run locally (interactive):
 
+```bash
+node bin/cli.js
 ```
-src/
-├── app/              # App root
-├── features/
-│   └── home/
-│       ├── pages/
-│       ├── components/
-│       └── services/
-├── layouts/
-├── pages/
-├── routes/
-├── store/
-├── hooks/
-└── utils/
+
+Install globally for testing:
+
+```bash
+npm link
+create-lumen my-app
 ```
 
-Scaffold new features instantly:
+## Testing the scaffolder
+
+The CLI repo has no app-level test suite, but `npm test` runs the unit tests under `tests/unit/` plus the offline smoke tests under `tests/smoke/`, and two harnesses in `tests/e2e/` and `tests/smoke/` drive the real generator against generated scaffolds. See `docs/tests/README.md` (and `harness.md`) for details, scope, and what they verify.
 
 ```bash
-npm run create:feature auth
+npm test                                    # unit (tests/unit/) + offline smoke (tests/smoke/generate.test.mjs)
+node --import ./register.js tests/smoke/install.mjs  # real-install smoke (Quick Setup default; needs network)
+node --import ./register.js tests/e2e/exhaustive.mjs # full option matrix (~11,664 combos, local-only; ~13 min). Use LIMIT=n.
 ```
 
-### Component-based
+## Project structure (generated app examples)
 
-Organized by type. Components grouped by their role:
+Feature-based (example):
 
 ```
 src/
-├── components/
-│   ├── common/       # Shared, reusable
-│   ├── form/         # Form elements
-│   └── layout/       # Layout primitives
-├── pages/
-├── layouts/
-├── routes/
-├── store/
-├── hooks/
-└── utils/
+├── app
+│   ├── App.tsx
+│   ├── providers
+│   │   └── ThemeProvider.tsx
+│   └── router.tsx
+├── components
+│   └── ui
+├── config
+│   └── constants.ts
+├── features
+│   └── logout
+│       ├── components
+│       ├── interfaces
+│       ├── layouts
+│       ├── pages
+│       ├── services
+│       └── store
+├── hooks
+│   ├── index.ts
+│   └── useLocalStorage.ts
+├── index.css
+├── lib
+├── main.tsx
+├── stores
+├── styles
+│   └── globals.css
+├── test
+│   └── setup.ts
+├── types
+└── utils
 ```
 
-## Path alias
+Component-based (example):
 
-All projects use the `@/` path alias:
-
-```tsx
-import { Button } from "@/components/common/Button";
-import { useAuth } from "@/hooks/useAuth";
 ```
+src/
+├── App.tsx
+├── components
+│   ├── common
+│   ├── form
+│   └── layout
+├── config
+│   ├── constants.ts
+│   └── routes.ts
+├── context
+├── hooks
+├── index.css
+├── layouts
+├── main.tsx
+├── pages
+├── routes
+├── services
+├── store
+├── styles
+├── test
+└── utils
+```
+
+## Roadmap
+
+See `docs/ROADMAP.md` for planned features and upcoming releases.
 
 ## Requirements
 
 - Node.js >= 18
 
+## Acknowledgements
+
+This project is based on [create-vrtw](https://github.com/Avijit07x/create-vrtw) by [@Avijit07x](https://github.com/Avijit07x). Thank you for the original work that inspired this scaffolder.
+
 ## License
 
 MIT

package/bin/cli.js

@@ -1,17 +1,23 @@
 #!/usr/bin/env node
 
-import { main } from "../src/main.js";
 import chalk from "chalk";
+import "../register.js";
+
+const args = process.argv.slice(2);
+const quickSetup = args.includes("-y");
+const projectName = args.find((a) => !a.startsWith("-"));
 
 console.log(
   chalk.bold.cyan("\n  ✦ LUMEN") +
-    chalk.gray(" v1.0.0") +
+    chalk.gray(" v1.1.0") +
     chalk.gray(
       "\n  Scaffold a React + Vite project with architecture choice\n"
     )
 );
 
-main().catch((e) => {
+const { main } = await import("@/main.js");
+
+main({ quickSetup, projectName }).catch((e) => {
   console.error(chalk.red("\nError:"), e.message || e);
   process.exit(1);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-lumen",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Scaffold a React + Vite project with architecture choice: feature-based or component-based.",
   "type": "module",
   "bin": {
@@ -14,7 +14,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "node --import ./register.js --test \"tests/unit/*.test.mjs\" \"tests/smoke/*.test.mjs\""
   },
   "keywords": [
     "scaffold",

package/src/aliases.js

@@ -0,0 +1,7 @@
+export function getPathAliases() {
+  return { "@/*": ["./src/*"] };
+}
+
+export function getViteAliases() {
+  return [{ find: "@", replacement: "path.resolve(__dirname, \"src\")" }];
+}

package/src/cleanup.js

@@ -1,4 +1,4 @@
-import { deleteIfExists } from "./utils/fs.js";
+import { deleteIfExists } from "@/utils/fs.js";
 
 export async function cleanupBoilerplate(projectPath) {
   await deleteIfExists(`${projectPath}/public`);

package/src/configure.js

@@ -1,20 +1,21 @@
 import { promises as fsp } from "fs";
 import path from "path";
-import { readFileContent } from "./utils/fs.js";
+import { readFileContent } from "@/utils/fs.js";
+import { getPathAliases, getViteAliases } from "@/aliases.js";
 
 export async function configureProject(projectPath, language, cssFramework) {
   const ext = language === "ts" ? "ts" : "js";
 
-  // Set up tsconfig/jsconfig with @/* paths
+  // Set up tsconfig/jsconfig with the @/* path alias
   if (language === "ts") {
     await configureTsconfig(projectPath);
   } else {
     await configureJsconfig(projectPath);
   }
 
-  // Add tsconfigPaths: true to vite.config for non-tailwind setups
+  // Add path aliases to vite.config for non-tailwind setups
   if (cssFramework !== "tailwind") {
-    await addTsconfigPathsToViteConfig(projectPath, ext);
+    await addPathAliasesToViteConfig(projectPath, ext);
   }
 
   // Add scripts to package.json
@@ -22,6 +23,7 @@ export async function configureProject(projectPath, language, cssFramework) {
 }
 
 async function configureTsconfig(projectPath) {
+  const paths = getPathAliases();
   // Create/update tsconfig.app.json with paths
   const tsconfigAppPath = path.join(projectPath, "tsconfig.app.json");
   try {
@@ -30,9 +32,7 @@ async function configureTsconfig(projectPath) {
 
     if (!config.compilerOptions) config.compilerOptions = {};
     config.compilerOptions.baseUrl = ".";
-    config.compilerOptions.paths = {
-      "@/*": ["./src/*"],
-    };
+    config.compilerOptions.paths = paths;
 
     await fsp.writeFile(
       tsconfigAppPath,
@@ -59,9 +59,7 @@ async function configureTsconfig(projectPath) {
         noUnusedParameters: true,
         noFallthroughCasesInSwitch: true,
         baseUrl: ".",
-        paths: {
-          "@/*": ["./src/*"],
-        },
+        paths,
       },
       include: ["src"],
     };
@@ -90,16 +88,14 @@ async function configureJsconfig(projectPath) {
   const config = {
     compilerOptions: {
       baseUrl: ".",
-      paths: {
-        "@/*": ["./src/*"],
-      },
+      paths: getPathAliases(),
     },
     include: ["src"],
   };
   await fsp.writeFile(jsconfigPath, JSON.stringify(config, null, 2) + "\n", "utf8");
 }
 
-async function addTsconfigPathsToViteConfig(projectPath, ext) {
+async function addPathAliasesToViteConfig(projectPath, ext) {
   const viteConfigPath = path.join(projectPath, `vite.config.${ext}`);
   try {
     let content = await readFileContent(viteConfigPath);
@@ -124,15 +120,21 @@ async function addTsconfigPathsToViteConfig(projectPath, ext) {
 
     let result = lines.join("\n");
 
+    const aliasArray = getViteAliases()
+      .map(
+        (a) =>
+          `{ find: "${a.find}", replacement: ${a.replacement} }`
+      )
+      .join(",\n              ");
+
+    const resolveBlock = `resolve: {\n    tsconfigPaths: true,\n    alias: [\n              ${aliasArray}\n    ],\n  }`;
+
     if (result.includes("resolve:")) {
-      result = result.replace(
-        /resolve:\s*\{/,
-        'resolve: {\n    tsconfigPaths: true,\n    alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }],'
-      );
+      result = result.replace(/resolve:\s*\{/, resolveBlock);
     } else {
       result = result.replace(
         /defineConfig\(\{/,
-        'defineConfig({\n  resolve: {\n    tsconfigPaths: true,\n    alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }],\n  },'
+        `defineConfig({\n  ${resolveBlock},`
       );
     }
 

package/src/confirm-empty-folder.js

@@ -1,7 +1,7 @@
 import { isCancel, select } from "@clack/prompts";
 import { access, mkdir, readdir, rm } from "fs/promises";
 import path from "path";
-import { onCancel } from "./prompts.js";
+import { onCancel } from "@/prompts.js";
 
 export async function confirmEmptyFolder(projectName) {
   const cwd = process.cwd();

package/src/css.js

@@ -1,7 +1,7 @@
 import fs from "fs";
 import { promises as fsp } from "fs";
 import path from "path";
-import { deleteIfExists } from "./utils/fs.js";
+import { deleteIfExists } from "@/utils/fs.js";
 
 export async function setupCssFramework({
   projectPath,

package/src/dependencies.js

@@ -55,8 +55,8 @@ export async function installAllDeps(responses, pkg, cwd) {
     deps.push("@hugeicons/react", "@hugeicons/core-free-icons");
   }
 
-  // Axios
-  if (responses.axios) {
+  // API Client
+  if (responses.apiClient === "axios") {
     deps.push("axios");
   }
 
@@ -89,6 +89,16 @@ export async function installAllDeps(responses, pkg, cwd) {
     devDeps.push("oxlint");
   }
 
+  // Formatter
+  if (responses.formatter === "prettier") {
+    devDeps.push("prettier");
+    if (responses.linter === "eslint") {
+      devDeps.push("eslint-config-prettier");
+    }
+  } else if (responses.formatter === "oxfmt") {
+    devDeps.push("oxfmt");
+  }
+
   // Always re-install react + react-dom for consistency
   deps.push("react", "react-dom");
 

package/src/env.js

@@ -0,0 +1,27 @@
+import path from "path";
+import { promises as fsp } from "fs";
+
+const ENV_GITIGNORE = `
+# Environment variables
+.env
+.env.*
+!.env.example
+`;
+
+export async function copyEnvExample(projectPath, templatesDir) {
+  const src = path.join(templatesDir, ".env.example");
+  try {
+    await fsp.access(src);
+    await fsp.copyFile(src, path.join(projectPath, ".env.example"));
+  } catch {}
+
+  // Ensure the project gitignore excludes env files but keeps .env.example.
+  const gitignore = path.join(projectPath, ".gitignore");
+  try {
+    let content = await fsp.readFile(gitignore, "utf8");
+    if (!content.includes("!.env.example")) {
+      content = content.replace(/\s*$/, "\n") + ENV_GITIGNORE.trimEnd() + "\n";
+      await fsp.writeFile(gitignore, content, "utf8");
+    }
+  } catch {}
+}

package/src/injector.js

@@ -1,6 +1,6 @@
 import { promises as fsp } from "fs";
 import path from "path";
-import { copyDirRecursive, writeFileRecursive } from "./utils/fs.js";
+import { copyDirRecursive, writeFileRecursive } from "@/utils/fs.js";
 
 export async function injectArchitecture(projectPath, templatesDir, architecture, language) {
   const ext = language === "ts" ? "tsx" : "jsx";
@@ -43,6 +43,89 @@ export async function injectArchitecture(projectPath, templatesDir, architecture
   try { await fsp.rm(oppositeMain, { force: true }); } catch {}
 }
 
+export async function injectFormatter(projectPath, templatesDir, responses) {
+  if (!responses.formatter || responses.formatter === "none") return;
+
+  // Copy the formatter config file to the project root
+  const configFile =
+    responses.formatter === "prettier" ? ".prettierrc" : ".oxfmtrc.json";
+  const configSrc = path.join(
+    templatesDir,
+    "conditional",
+    "formatter",
+    responses.formatter,
+    configFile
+  );
+  try {
+    await fsp.access(configSrc);
+    await fsp.copyFile(configSrc, path.join(projectPath, configFile));
+  } catch {}
+
+  // Append format script(s) to package.json
+  const pkgPath = path.join(projectPath, "package.json");
+  try {
+    const content = await fsp.readFile(pkgPath, "utf8");
+    const pkg = JSON.parse(content);
+    if (!pkg.scripts) pkg.scripts = {};
+    if (responses.formatter === "prettier") {
+      pkg.scripts.format = "prettier --write .";
+      pkg.scripts["format:check"] = "prettier --check .";
+    } else if (responses.formatter === "oxfmt") {
+      pkg.scripts.format = "oxfmt .";
+    }
+    await fsp.writeFile(pkgPath, JSON.stringify(pkg, null, 2) + "\n", "utf8");
+  } catch {}
+
+  // Wire eslint-config-prettier only for the eslint + prettier combination
+  if (responses.linter === "eslint" && responses.formatter === "prettier") {
+    await wireEslintPrettier(projectPath, responses.language);
+  }
+}
+
+async function wireEslintPrettier(projectPath, language) {
+  const ext = language === "ts" ? "ts" : "js";
+  const eslintConfigPath = path.join(projectPath, `eslint.config.${ext}`);
+  try {
+    let content = await fsp.readFile(eslintConfigPath, "utf8");
+
+    // Avoid double-injection on re-runs
+    if (content.includes("eslint-config-prettier")) return;
+
+    // Add the import after the last import line
+    const lines = content.split("\n");
+    let lastImportIdx = -1;
+    for (let i = 0; i < lines.length; i++) {
+      if (lines[i].startsWith("import ")) lastImportIdx = i;
+    }
+    lines.splice(
+      lastImportIdx + 1,
+      0,
+      'import prettier from "eslint-config-prettier";'
+    );
+
+    let result = lines.join("\n");
+
+    // Append ...prettier as the LAST element of the eslint config.
+    // The JS template exports an array (`export default [...]`); the TS
+    // template uses a function call (`export default tseslint.config(...)`).
+    const pushLast = (_, head, tail) =>
+      head.replace(/,\s*$/, "") + ",\n  ...prettier," + tail;
+    if (result.includes("tseslint.config(")) {
+      result = result.replace(
+        /(export default tseslint\.config\([\s\S]*?)(\n\s*\);)/,
+        pushLast
+      );
+    } else {
+      result = result.replace(
+        /(export default \[[\s\S]*?)(\n\s*\];)/,
+        pushLast
+      );
+    }
+
+    await fsp.writeFile(eslintConfigPath, result, "utf8");
+  } catch {}
+}
+
 export async function injectConditionals(projectPath, templatesDir, responses, architecture, language) {
   const ext = language === "ts" ? "tsx" : "jsx";
 
@@ -84,14 +167,21 @@ export async function injectConditionals(projectPath, templatesDir, responses, a
     );
   }
 
-  // 4. Axios
-  if (responses.axios) {
+  // 4. API Client
+  if (responses.apiClient === "axios") {
     await injectOverlay(
       projectPath,
       templatesDir,
       `conditional/axios/${architecture}`,
       language
     );
+  } else if (responses.apiClient === "fetch") {
+    await injectOverlay(
+      projectPath,
+      templatesDir,
+      `conditional/fetch/${architecture}`,
+      language
+    );
   }
 
   // 5. Testing
@@ -149,6 +239,16 @@ async function injectTesting(projectPath, templatesDir, framework, language, arc
     await writeFileRecursive(setupDest, await fsp.readFile(setupSrc, "utf8"));
   } catch {}
 
+  // Jest keeps its setup at the template root (jest.setup.ts/js), referenced by
+  // jest.config as <rootDir>/jest.setup.ts — copy it to the project root.
+  if (framework === "jest") {
+    const jestSetupSrc = path.join(testingDir, `jest.setup.${configExt}`);
+    try {
+      await fsp.access(jestSetupSrc);
+      await fsp.copyFile(jestSetupSrc, path.join(projectPath, `jest.setup.${configExt}`));
+    } catch {}
+  }
+
   // Copy test file
   const testExt = language === "ts" ? "tsx" : "jsx";
   const testSrc = path.join(testingDir, `src/__tests__/App.test.${testExt}`);

package/src/main.js

@@ -3,28 +3,30 @@ import chalk from "chalk";
 import path from "path";
 import { fileURLToPath } from "url";
 
-import { confirmEmptyFolder } from "./confirm-empty-folder.js";
-import { cleanupBoilerplate } from "./cleanup.js";
-import { configureProject } from "./configure.js";
-import { setupCssFramework } from "./css.js";
-import { injectArchitecture, injectConditionals } from "./injector.js";
-import { getPkgManager } from "./utils/pkg-manager.js";
-import { handleDevServer } from "./utils/dev-server.js";
-import { getUserInputs, onCancel } from "./prompts.js";
-import { runBaseInstall, runGitInit, runViteCreate } from "./scaffold.js";
-import { installAllDeps } from "./dependencies.js";
-import { generateReadme } from "./readme.js";
+import { confirmEmptyFolder } from "@/confirm-empty-folder.js";
+import { copyEnvExample } from "@/env.js";
+import { cleanupBoilerplate } from "@/cleanup.js";
+import { configureProject } from "@/configure.js";
+import { setupCssFramework } from "@/css.js";
+import { injectArchitecture, injectConditionals, injectFormatter } from "@/injector.js";
+import { getPkgManager } from "@/utils/pkg-manager.js";
+import { handleDevServer } from "@/utils/dev-server.js";
+import { getUserInputs, onCancel } from "@/prompts.js";
+import { runBaseInstall, runGitInit, runViteCreate } from "@/scaffold.js";
+import { installAllDeps } from "@/dependencies.js";
+import { generateReadme } from "@/readme.js";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const TEMPLATES_DIR = path.join(__dirname, "../templates");
 const CURRENT_DIR = process.cwd();
 
-export async function main() {
+export async function main(options = {}) {
+  const { quickSetup = false, projectName: nameArg } = options;
   const pkg = getPkgManager();
 
   // 1. Project name
-  const cliArg = process.argv[2];
+  const cliArg = nameArg || process.argv[2];
   let projectName;
 
   if (cliArg && cliArg.trim()) {
@@ -45,7 +47,7 @@ export async function main() {
   await confirmEmptyFolder(projectName);
 
   // 3. Collect user preferences
-  const responses = await getUserInputs(projectName);
+  const responses = await getUserInputs(projectName, { quickSetup });
 
   const projectPath = path.resolve(CURRENT_DIR, projectName);
 
@@ -119,6 +121,17 @@ export async function main() {
     throw err;
   }
 
+  // 8.5 Inject formatter (config file + scripts + eslint-config-prettier wiring)
+  const fmtSpin = spinner();
+  fmtSpin.start("Configuring code formatter...");
+  try {
+    await injectFormatter(projectPath, TEMPLATES_DIR, responses);
+    fmtSpin.stop(chalk.green("Formatter configured."));
+  } catch (err) {
+    fmtSpin.stop(chalk.red("Failed to configure formatter."));
+    throw err;
+  }
+
   // 9. Install all additional dependencies in one batch
   const extrasSpin = spinner();
   extrasSpin.start("Installing additional dependencies...");
@@ -172,6 +185,9 @@ export async function main() {
   // 12. Cleanup boilerplate
   await cleanupBoilerplate(projectPath);
 
+  // 12.5 Copy .env.example into the project
+  await copyEnvExample(projectPath, TEMPLATES_DIR);
+
   // 13. Generate README.md + LICENSE (if requested)
   if (responses.readme) {
     const readmeSpin = spinner();

package/src/prompts.js

@@ -1,6 +1,6 @@
 import { cancel, confirm, isCancel, note, select, text } from "@clack/prompts";
 import chalk from "chalk";
-import { configExists, loadConfig, saveConfig } from "./config-cache.js";
+import { configExists, loadConfig, saveConfig } from "@/config-cache.js";
 
 export function onCancel() {
   console.log(chalk.gray("\n\nOperation cancelled.\n"));
@@ -40,17 +40,39 @@ function formatConfig(responses) {
     `• ${chalk.bold("Router:")} ${responses.router ? chalk.green("Yes") : chalk.red("No")}`,
     `• ${chalk.bold("State:")} ${chalk.blue(state)}`,
     `• ${chalk.bold("Icons:")} ${chalk.blue(responses.iconLibrary === "none" ? "None" : responses.iconLibrary === "lucide" ? "Lucide" : "Huge")}`,
-    `• ${chalk.bold("Axios:")} ${responses.axios ? chalk.green("Yes") : chalk.red("No")}`,
+    `• ${chalk.bold("API Client:")} ${responses.apiClient === "axios" ? chalk.green("Axios") : responses.apiClient === "fetch" ? chalk.yellow("Fetch") : chalk.red("None")}`,
     `• ${chalk.bold("Linter:")} ${responses.linter === "oxlint" ? chalk.green("Oxlint") : responses.linter === "eslint" ? chalk.yellow("ESLint") : chalk.red("None")}`,
+    `• ${chalk.bold("Formatter:")} ${responses.formatter === "oxfmt" ? chalk.green("Oxfmt") : responses.formatter === "prettier" ? chalk.yellow("Prettier") : chalk.red("None")}`,
     `• ${chalk.bold("Git:")} ${responses.gitInit ? chalk.green("Yes") : chalk.red("No")}`,
     `• ${chalk.bold("README:")} ${responses.readme ? chalk.green("Yes") : chalk.red("No")}`,
   ].join("\n");
 }
 
-export async function getUserInputs(projectName) {
+export async function getUserInputs(projectName, { quickSetup = false } = {}) {
   let oldConfig = {};
   let useOldConfig = false;
 
+  // Non-interactive quick setup: apply defaults without prompting.
+  if (quickSetup) {
+    const responses = {
+      projectName,
+      architecture: "feature-based",
+      language: "ts",
+      cssFramework: "tailwind",
+      testing: "vitest",
+      router: true,
+      stateManagement: "none",
+      iconLibrary: "none",
+      apiClient: "none",
+      linter: "eslint",
+      formatter: "prettier",
+      gitInit: true,
+      readme: true,
+    };
+    await saveConfig(responses);
+    return responses;
+  }
+
   if (await configExists()) {
     oldConfig = await loadConfig();
     oldConfig.projectName = projectName;
@@ -73,19 +95,25 @@ export async function getUserInputs(projectName) {
     useOldConfig = useExisting;
 
     if (useOldConfig) {
+      if (oldConfig.apiClient === undefined) {
+        oldConfig.apiClient = oldConfig.axios ? "axios" : "none";
+      }
+      if (oldConfig.formatter === undefined) {
+        oldConfig.formatter = "none";
+      }
       return { ...oldConfig, projectName };
     }
   }
 
   // Quick Setup
-  const quickSetup = await confirm({
+  const quickSetupChoice = await confirm({
     message:
       "Quick Setup? (TypeScript + Tailwind + Feature-based + Router + ESLint + Vitest)",
     initialValue: true,
   });
-  if (isCancel(quickSetup)) onCancel();
+  if (isCancel(quickSetupChoice)) onCancel();
 
-  if (quickSetup) {
+  if (quickSetupChoice) {
     const responses = {
       projectName,
       architecture: "feature-based",
@@ -95,9 +123,10 @@ export async function getUserInputs(projectName) {
       router: true,
       stateManagement: "none",
       iconLibrary: "none",
-      axios: false,
+      apiClient: "none",
       linter: "eslint",
-      gitInit: false,
+      formatter: "prettier",
+      gitInit: true,
       readme: true,
     };
     await saveConfig(responses);
@@ -183,11 +212,16 @@ export async function getUserInputs(projectName) {
   });
   if (isCancel(iconLibrary)) onCancel();
 
-  const axios = await confirm({
-    message: "Would you like to install Axios?",
-    initialValue: false,
+  const apiClient = await select({
+    message: "Which API client do you want to use?",
+    options: [
+      { label: "None", value: "none" },
+      { label: "Axios", value: "axios" },
+      { label: "Fetch (native)", value: "fetch" },
+    ],
+    initialValue: "none",
   });
-  if (isCancel(axios)) onCancel();
+  if (isCancel(apiClient)) onCancel();
 
   const gitInit = await confirm({
     message: "Would you like to initialize a Git repository?",
@@ -206,6 +240,27 @@ export async function getUserInputs(projectName) {
   });
   if (isCancel(linter)) onCancel();
 
+  let formatter = "none";
+  if (linter !== "none") {
+    const formatterOptions =
+      linter === "eslint"
+        ? [
+            { label: "None", value: "none" },
+            { label: "Prettier", value: "prettier" },
+          ]
+        : [
+            { label: "None", value: "none" },
+            { label: "Oxfmt (Recommended)", value: "oxfmt" },
+            { label: "Prettier", value: "prettier" },
+          ];
+    formatter = await select({
+      message: "Which formatter do you want to use?",
+      options: formatterOptions,
+      initialValue: linter === "eslint" ? "prettier" : "oxfmt",
+    });
+    if (isCancel(formatter)) onCancel();
+  }
+
   const readme = await confirm({
     message: "Would you like to generate a README.md and LICENSE?",
     initialValue: true,
@@ -221,8 +276,9 @@ export async function getUserInputs(projectName) {
     router,
     stateManagement,
     iconLibrary,
-    axios,
+    apiClient,
     linter,
+    formatter,
     gitInit,
     readme,
   };

package/src/readme.js

@@ -1,4 +1,4 @@
-import { writeFileRecursive } from "./utils/fs.js";
+import { writeFileRecursive } from "@/utils/fs.js";
 import path from "path";
 
 function buildBuiltWith(responses) {
@@ -30,8 +30,10 @@ function buildBuiltWith(responses) {
     items.push("[Huge Icons](https://hugeicons.com/)");
   }
 
-  if (responses.axios) {
+  if (responses.apiClient === "axios") {
     items.push("[Axios](https://axios-http.com/)");
+  } else if (responses.apiClient === "fetch") {
+    items.push("Fetch API");
   }
 
   if (responses.testing === "vitest") {
@@ -46,6 +48,12 @@ function buildBuiltWith(responses) {
     items.push("[Oxlint](https://oxc.rs/)");
   }
 
+  if (responses.formatter === "prettier") {
+    items.push("[Prettier](https://prettier.io/)");
+  } else if (responses.formatter === "oxfmt") {
+    items.push("[Oxfmt](https://oxc.rs/)");
+  }
+
   return items.map((item) => `- ${item}`).join("\n");
 }
 
@@ -67,6 +75,10 @@ function buildScripts(responses) {
     rows.push("| `npm run lint` | Run Oxlint |");
   }
 
+  if (responses.formatter === "prettier" || responses.formatter === "oxfmt") {
+    rows.push("| `npm run format` | Format code |");
+  }
+
   return rows.join("\n");
 }
 
@@ -123,14 +135,26 @@ SOFTWARE.
 `;
 }
 
+function buildDescription(projectName, responses) {
+  const tools = [];
+  if (responses.linter === "eslint") tools.push("ESLint");
+  else if (responses.linter === "oxlint") tools.push("Oxlint");
+  if (responses.formatter === "prettier") tools.push("Prettier");
+  else if (responses.formatter === "oxfmt") tools.push("Oxfmt");
+
+  let suffix = "";
+  if (tools.length > 0) {
+    suffix = `\n\nThis project is set up with ${tools.join(" + ")} for code quality.`;
+  }
+  return `# ${projectName}\n\nA React + Vite application built with ${responses.architecture}.${suffix}`;
+}
+
 function buildReadme(projectName, responses) {
   const builtWith = buildBuiltWith(responses);
   const scripts = buildScripts(responses);
   const structure = buildProjectStructure(responses.architecture);
 
-  return `# ${projectName}
-
-<!-- TODO: Add a short description of your project -->
+  return `${buildDescription(projectName, responses)}
 
 ## Built With
 

package/src/scaffold.js

@@ -1,6 +1,6 @@
 import path from "path";
 import { execa } from "execa";
-import { isYarnV1 } from "./utils/yarn-v1.js";
+import { isYarnV1 } from "@/utils/yarn-v1.js";
 
 export async function runViteCreate(projectPath, projectName, pkg, language) {
   const useYarn = pkg === "yarn";

package/templates/.env.example

@@ -0,0 +1,4 @@
+# Copy this file to `.env.local` (or `.env`) and fill in your values.
+# See https://vitejs.dev/guide/env-and-mode for how env vars are exposed.
+
+VITE_API_URL=https://api.example.com

package/templates/conditional/fetch/component-based/src/services/api.jsx

@@ -0,0 +1,27 @@
+import { API_BASE_URL } from "@/config/constants";
+
+const apiClient = async (endpoint, options = {}) => {
+  const token = localStorage.getItem("access_token");
+
+  const headers = {
+    "Content-Type": "application/json",
+    ...options.headers,
+  };
+
+  if (token) {
+    headers["Authorization"] = `Bearer ${token}`;
+  }
+
+  const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+    ...options,
+    headers,
+  });
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+
+  return response.json();
+};
+
+export default apiClient;

package/templates/conditional/fetch/component-based/src/services/api.ts

@@ -0,0 +1,27 @@
+import { API_BASE_URL } from "@/config/constants";
+
+const apiClient = async (endpoint: string, options: RequestInit = {}) => {
+  const token = localStorage.getItem("access_token");
+
+  const headers: HeadersInit = {
+    "Content-Type": "application/json",
+    ...options.headers,
+  };
+
+  if (token) {
+    headers["Authorization"] = `Bearer ${token}`;
+  }
+
+  const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+    ...options,
+    headers,
+  });
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+
+  return response.json();
+};
+
+export default apiClient;

package/templates/conditional/fetch/component-based/src/services/index.js

@@ -0,0 +1 @@
+export { default as apiClient } from "./api";

package/templates/conditional/fetch/component-based/src/services/index.ts

@@ -0,0 +1 @@
+export { default as apiClient } from "./api";

package/templates/conditional/fetch/feature-based/src/lib/api.jsx

@@ -0,0 +1,27 @@
+import { API_BASE_URL } from "@/config/constants";
+
+const apiClient = async (endpoint, options = {}) => {
+  const token = localStorage.getItem("access_token");
+
+  const headers = {
+    "Content-Type": "application/json",
+    ...options.headers,
+  };
+
+  if (token) {
+    headers["Authorization"] = `Bearer ${token}`;
+  }
+
+  const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+    ...options,
+    headers,
+  });
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+
+  return response.json();
+};
+
+export default apiClient;

package/templates/conditional/fetch/feature-based/src/lib/api.ts

@@ -0,0 +1,27 @@
+import { API_BASE_URL } from "@/config/constants";
+
+const apiClient = async (endpoint: string, options: RequestInit = {}) => {
+  const token = localStorage.getItem("access_token");
+
+  const headers: HeadersInit = {
+    "Content-Type": "application/json",
+    ...options.headers,
+  };
+
+  if (token) {
+    headers["Authorization"] = `Bearer ${token}`;
+  }
+
+  const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+    ...options,
+    headers,
+  });
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+
+  return response.json();
+};
+
+export default apiClient;

package/templates/conditional/fetch/feature-based/src/lib/index.js

@@ -0,0 +1 @@
+export { default as apiClient } from "./api";

package/templates/conditional/fetch/feature-based/src/lib/index.ts

@@ -0,0 +1 @@
+export { default as apiClient } from "./api";

package/templates/conditional/formatter/oxfmt/.oxfmtrc.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "printWidth": 80,
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "all"
+}

package/templates/conditional/formatter/prettier/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80
+}

package/templates/conditional/testing/jest/jest.config.js

@@ -2,7 +2,7 @@
 module.exports = {
   testEnvironment: "jsdom",
   roots: ["<rootDir>/src"],
-  setupFilesAfterSetup: ["<rootDir>/jest.setup.js"],
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/src/$1",
   },

package/templates/conditional/testing/jest/jest.config.ts

@@ -3,7 +3,7 @@ module.exports = {
   preset: "ts-jest",
   testEnvironment: "jsdom",
   roots: ["<rootDir>/src"],
-  setupFilesAfterSetup: ["<rootDir>/jest.setup.ts"],
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/src/$1",
   },