create-modern-react 1.0.0

package/README.md

@@ -0,0 +1,113 @@
+# create-modern-react
+
+Create a modern React application with Vite, TypeScript, and your choice of modern libraries.
+
+## Quick Start
+
+```bash
+npx create-modern-react my-app
+cd my-app
+npm run dev
+```
+
+## Features
+
+🚀 **Modern Stack**: Vite + React 18 + TypeScript
+📦 **Interactive Setup**: Choose your preferred libraries
+🎨 **UI Libraries**: Ant Design, Material-UI, Chakra UI support
+🎯 **State Management**: Redux Toolkit, Zustand, Jotai options
+🛣️ **Routing**: React Router or Wouter
+🔧 **Development Tools**: ESLint, Prettier, Storybook, Testing
+🎨 **Styling**: Tailwind CSS, CSS Modules, Styled Components
+📱 **PWA Ready**: Optional Progressive Web App support
+
+## Usage
+
+### Basic Usage
+
+```bash
+npx create-modern-react my-project
+```
+
+### With Options
+
+```bash
+npx create-modern-react my-project --skip-install --skip-git
+```
+
+## Interactive Prompts
+
+The CLI will guide you through selecting:
+
+- **Project Name**: Your project directory name
+- **Package Manager**: npm, yarn, or pnpm
+- **UI Library**: Ant Design, Material-UI, Chakra UI, or none
+- **CSS Framework**: Tailwind CSS, CSS Modules, Styled Components, or plain CSS
+- **State Management**: Redux Toolkit, Zustand, Jotai, or React state only
+- **Data Fetching**: React Query, SWR, Apollo Client, or Fetch API
+- **Routing**: React Router, Wouter, or none
+- **Development Tools**: Storybook, ESLint/Prettier, Husky, Testing
+- **Icons**: Lucide React, React Icons, Heroicons, or none
+- **PWA**: Progressive Web App features
+- **Git**: Initialize Git repository
+
+## Template Combinations
+
+### Minimal Setup
+
+- Vite + React + TypeScript + Tailwind CSS
+
+### Enterprise Ready
+
+- Vite + React + TypeScript + Ant Design + Redux Toolkit + React Query + React Router
+
+### Modern Stack
+
+- Vite + React + TypeScript + Tailwind + Zustand + React Query + Wouter
+
+### Full Featured
+
+- All libraries with Storybook, testing, and PWA support
+
+## CLI Options
+
+- `--skip-install`: Skip automatic dependency installation
+- `--skip-git`: Skip Git repository initialization
+- `--template <name>`: Use a specific template (future feature)
+
+## Requirements
+
+- Node.js 16.0.0 or higher
+- npm, yarn, or pnpm
+
+## Generated Project Structure
+
+```
+my-app/
+├── public/
+├── src/
+│   ├── components/
+│   ├── hooks/
+│   ├── utils/
+│   ├── types/
+│   ├── styles/
+│   ├── App.tsx
+│   ├── main.tsx
+│   └── index.css
+├── package.json
+├── vite.config.ts
+├── tsconfig.json
+└── README.md
+```
+
+## Contributing
+
+1. Fork the repository
+2. Create your feature branch
+3. Commit your changes
+4. Push to the branch
+5. Create a Pull Request
+
+## License
+
+MIT © [Your Name]

package/bin/index.js

@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+
+const { program } = require("commander");
+const chalk = require("chalk");
+const { createProject } = require("../lib/prompts");
+
+program
+  .name("create-modern-react")
+  .description(
+    "Create a modern React application with Vite, TypeScript, and your choice of modern libraries",
+  )
+  .version("1.0.0")
+  .argument("[project-name]", "name of the project")
+  .option("-t, --template <template>", "use a specific template")
+  .option("--skip-install", "skip dependency installation")
+  .option("--skip-git", "skip git initialization")
+  .action(async (projectName, options) => {
+    console.log(chalk.blue.bold("\n🚀 Welcome to create-modern-react!\n"));
+
+    try {
+      await createProject(projectName, options);
+    } catch (error) {
+      console.error(chalk.red("❌ Error creating project:"), error.message);
+      process.exit(1);
+    }
+  });
+
+program.parse();

package/lib/install.js

@@ -0,0 +1,59 @@
+const { spawn } = require("child_process");
+const chalk = require("chalk");
+
+function runCommand(command, args, cwd) {
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, args, {
+      cwd,
+      stdio: "inherit",
+      shell: true,
+    });
+
+    child.on("close", (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(new Error(`Command failed with exit code ${code}`));
+      }
+    });
+
+    child.on("error", (error) => {
+      reject(error);
+    });
+  });
+}
+
+async function installDependencies(config) {
+  const { projectPath, packageManager } = config;
+
+  console.log(chalk.blue("\n📦 Installing dependencies..."));
+
+  try {
+    const installCommand =
+      packageManager === "yarn"
+        ? "yarn"
+        : packageManager === "pnpm"
+          ? "pnpm"
+          : "npm";
+    const installArgs =
+      packageManager === "npm"
+        ? ["install"]
+        : packageManager === "pnpm"
+          ? ["install"]
+          : [];
+
+    await runCommand(installCommand, installArgs, projectPath);
+
+    console.log(chalk.green("✅ Dependencies installed successfully!"));
+  } catch (error) {
+    console.error(
+      chalk.red("❌ Failed to install dependencies:"),
+      error.message,
+    );
+    console.log(chalk.yellow("You can install them manually by running:"));
+    console.log(chalk.gray(`  cd ${config.projectName}`));
+    console.log(chalk.gray(`  ${packageManager} install`));
+  }
+}
+
+module.exports = { installDependencies, runCommand };

package/lib/prompts.js

@@ -0,0 +1,235 @@
+const inquirer = require("inquirer");
+const chalk = require("chalk");
+const path = require("path");
+const fs = require("fs-extra");
+const { installDependencies } = require("./install");
+const { setupProject } = require("./setup");
+
+async function createProject(projectName, options) {
+  // Get project name if not provided
+  if (!projectName) {
+    const nameAnswer = await inquirer.prompt([
+      {
+        type: "input",
+        name: "projectName",
+        message: "What is the name of your project?",
+        validate: (input) => {
+          if (!input.trim()) return "Project name is required";
+          if (!/^[a-zA-Z0-9-_]+$/.test(input))
+            return "Project name can only contain letters, numbers, hyphens, and underscores";
+          return true;
+        },
+      },
+    ]);
+    projectName = nameAnswer.projectName;
+  }
+
+  const projectPath = path.resolve(process.cwd(), projectName);
+
+  // Check if directory exists
+  if (fs.existsSync(projectPath)) {
+    const overwriteAnswer = await inquirer.prompt([
+      {
+        type: "confirm",
+        name: "overwrite",
+        message: `Directory ${projectName} already exists. Do you want to overwrite it?`,
+        default: false,
+      },
+    ]);
+
+    if (!overwriteAnswer.overwrite) {
+      console.log(chalk.yellow("Operation cancelled."));
+      return;
+    }
+
+    await fs.remove(projectPath);
+  }
+
+  // Package Manager Selection
+  const packageManagerAnswer = await inquirer.prompt([
+    {
+      type: "list",
+      name: "packageManager",
+      message: "Which package manager would you like to use?",
+      choices: [
+        { name: "npm", value: "npm" },
+        { name: "yarn", value: "yarn" },
+        { name: "pnpm", value: "pnpm" },
+      ],
+    },
+  ]);
+
+  // UI Library Selection
+  const uiLibraryAnswer = await inquirer.prompt([
+    {
+      type: "list",
+      name: "uiLibrary",
+      message: "Do you want to include a UI component library?",
+      choices: [
+        { name: "Ant Design v5 (with theme customization)", value: "antd" },
+        { name: "Material-UI (MUI)", value: "mui" },
+        { name: "Chakra UI", value: "chakra" },
+        { name: "None (custom components only)", value: "none" },
+      ],
+    },
+  ]);
+
+  // CSS Framework Selection
+  const cssFrameworkAnswer = await inquirer.prompt([
+    {
+      type: "list",
+      name: "cssFramework",
+      message: "Which CSS framework would you like to use?",
+      choices: [
+        { name: "Tailwind CSS (with custom config)", value: "tailwind" },
+        { name: "CSS Modules", value: "css-modules" },
+        { name: "Styled Components", value: "styled-components" },
+        { name: "Plain CSS only", value: "plain" },
+      ],
+    },
+  ]);
+
+  // State Management Selection
+  const stateManagementAnswer = await inquirer.prompt([
+    {
+      type: "list",
+      name: "stateManagement",
+      message: "Do you need state management?",
+      choices: [
+        { name: "Redux Toolkit (with Redux Persist)", value: "redux-toolkit" },
+        { name: "Zustand", value: "zustand" },
+        { name: "Jotai", value: "jotai" },
+        { name: "React state only", value: "none" },
+      ],
+    },
+  ]);
+
+  // Data Fetching Selection
+  const dataFetchingAnswer = await inquirer.prompt([
+    {
+      type: "list",
+      name: "dataFetching",
+      message: "Do you want to include data fetching libraries?",
+      choices: [
+        { name: "React Query (TanStack Query)", value: "react-query" },
+        { name: "SWR", value: "swr" },
+        { name: "Apollo Client (for GraphQL)", value: "apollo" },
+        { name: "Fetch API only", value: "none" },
+      ],
+    },
+  ]);
+
+  // Routing Selection
+  const routingAnswer = await inquirer.prompt([
+    {
+      type: "list",
+      name: "routing",
+      message: "Do you need client-side routing?",
+      choices: [
+        { name: "React Router v6", value: "react-router" },
+        { name: "Wouter (lightweight)", value: "wouter" },
+        { name: "No routing", value: "none" },
+      ],
+    },
+  ]);
+
+  // Development Tools Selection
+  const devToolsAnswer = await inquirer.prompt([
+    {
+      type: "checkbox",
+      name: "devTools",
+      message: "Which development tools would you like?",
+      choices: [
+        { name: "Storybook (component development)", value: "storybook" },
+        {
+          name: "ESLint + Prettier (code quality)",
+          value: "eslint-prettier",
+          checked: true,
+        },
+        {
+          name: "Husky + lint-staged (git hooks)",
+          value: "husky",
+          checked: true,
+        },
+        { name: "Jest + Testing Library (testing)", value: "testing" },
+      ],
+    },
+  ]);
+
+  // Icons Selection
+  const iconsAnswer = await inquirer.prompt([
+    {
+      type: "list",
+      name: "icons",
+      message: "Do you want icon libraries?",
+      choices: [
+        { name: "Lucide React", value: "lucide" },
+        { name: "React Icons", value: "react-icons" },
+        { name: "Heroicons", value: "heroicons" },
+        { name: "No icon library", value: "none" },
+      ],
+    },
+  ]);
+
+  // PWA Selection
+  const pwaAnswer = await inquirer.prompt([
+    {
+      type: "confirm",
+      name: "pwa",
+      message: "Make it a PWA?",
+      default: false,
+    },
+  ]);
+
+  // Git Selection
+  const gitAnswer = await inquirer.prompt([
+    {
+      type: "confirm",
+      name: "git",
+      message: "Initialize Git repository?",
+      default: true,
+    },
+  ]);
+
+  const config = {
+    projectName,
+    projectPath,
+    packageManager: packageManagerAnswer.packageManager,
+    uiLibrary: uiLibraryAnswer.uiLibrary,
+    cssFramework: cssFrameworkAnswer.cssFramework,
+    stateManagement: stateManagementAnswer.stateManagement,
+    dataFetching: dataFetchingAnswer.dataFetching,
+    routing: routingAnswer.routing,
+    devTools: devToolsAnswer.devTools,
+    icons: iconsAnswer.icons,
+    pwa: pwaAnswer.pwa,
+    git: gitAnswer.git,
+    skipInstall: options.skipInstall,
+    skipGit: options.skipGit,
+  };
+
+  console.log(
+    chalk.blue("\n📦 Creating project with the following configuration:"),
+  );
+  console.log(chalk.gray(JSON.stringify(config, null, 2)));
+
+  // Create project
+  await setupProject(config);
+
+  // Install dependencies
+  if (!options.skipInstall) {
+    await installDependencies(config);
+  }
+
+  console.log(
+    chalk.green.bold(`\n🎉 Project ${projectName} created successfully!`),
+  );
+  console.log(chalk.blue("\nNext steps:"));
+  console.log(chalk.gray(`  cd ${projectName}`));
+  if (options.skipInstall) {
+    console.log(chalk.gray(`  ${config.packageManager} install`));
+  }
+  console.log(chalk.gray(`  ${config.packageManager} dev`));
+}
+
+module.exports = { createProject };

package/lib/setup.js

@@ -0,0 +1,228 @@
+const fs = require("fs-extra");
+const path = require("path");
+const chalk = require("chalk");
+const { runCommand } = require("./install");
+
+async function setupProject(config) {
+  const { projectPath, projectName } = config;
+
+  console.log(chalk.blue("\n🏗️  Setting up project structure..."));
+
+  // Create project directory
+  await fs.ensureDir(projectPath);
+
+  // Copy base template
+  const templatePath = path.join(__dirname, "../templates/base");
+  await fs.copy(templatePath, projectPath);
+
+  // Update package.json with project name and selected dependencies
+  await updatePackageJson(config);
+
+  // Configure selected libraries
+  await configureLibraries(config);
+
+  // Initialize git if requested
+  if (config.git && !config.skipGit) {
+    await initializeGit(config);
+  }
+
+  console.log(chalk.green("✅ Project structure created successfully!"));
+}
+
+async function updatePackageJson(config) {
+  const packageJsonPath = path.join(config.projectPath, "package.json");
+  const packageJson = await fs.readJson(packageJsonPath);
+
+  // Update name
+  packageJson.name = config.projectName;
+
+  // Add dependencies based on configuration
+  const dependencies = { ...packageJson.dependencies };
+  const devDependencies = { ...packageJson.devDependencies };
+
+  // UI Library dependencies
+  if (config.uiLibrary === "antd") {
+    dependencies["antd"] = "^5.0.0";
+  } else if (config.uiLibrary === "mui") {
+    dependencies["@mui/material"] = "^5.0.0";
+    dependencies["@emotion/react"] = "^11.0.0";
+    dependencies["@emotion/styled"] = "^11.0.0";
+  } else if (config.uiLibrary === "chakra") {
+    dependencies["@chakra-ui/react"] = "^2.0.0";
+    dependencies["@emotion/react"] = "^11.0.0";
+    dependencies["@emotion/styled"] = "^11.0.0";
+    dependencies["framer-motion"] = "^6.0.0";
+  }
+
+  // CSS Framework dependencies
+  if (config.cssFramework === "tailwind") {
+    devDependencies["tailwindcss"] = "^3.0.0";
+    devDependencies["postcss"] = "^8.0.0";
+    devDependencies["autoprefixer"] = "^10.0.0";
+  } else if (config.cssFramework === "styled-components") {
+    dependencies["styled-components"] = "^6.0.0";
+    devDependencies["@types/styled-components"] = "^5.1.0";
+  }
+
+  // State Management dependencies
+  if (config.stateManagement === "redux-toolkit") {
+    dependencies["@reduxjs/toolkit"] = "^2.0.0";
+    dependencies["react-redux"] = "^9.0.0";
+    dependencies["redux-persist"] = "^6.0.0";
+  } else if (config.stateManagement === "zustand") {
+    dependencies["zustand"] = "^4.0.0";
+  } else if (config.stateManagement === "jotai") {
+    dependencies["jotai"] = "^2.0.0";
+  }
+
+  // Data Fetching dependencies
+  if (config.dataFetching === "react-query") {
+    dependencies["@tanstack/react-query"] = "^5.0.0";
+    dependencies["@tanstack/react-query-devtools"] = "^5.0.0";
+  } else if (config.dataFetching === "swr") {
+    dependencies["swr"] = "^2.0.0";
+  } else if (config.dataFetching === "apollo") {
+    dependencies["@apollo/client"] = "^3.0.0";
+    dependencies["graphql"] = "^16.0.0";
+  }
+
+  // Routing dependencies
+  if (config.routing === "react-router") {
+    dependencies["react-router-dom"] = "^6.0.0";
+  } else if (config.routing === "wouter") {
+    dependencies["wouter"] = "^3.0.0";
+  }
+
+  // Icon dependencies
+  if (config.icons === "lucide") {
+    dependencies["lucide-react"] = "^0.400.0";
+  } else if (config.icons === "react-icons") {
+    dependencies["react-icons"] = "^5.0.0";
+  } else if (config.icons === "heroicons") {
+    dependencies["@heroicons/react"] = "^2.0.0";
+  }
+
+  // Development Tools dependencies
+  if (config.devTools.includes("storybook")) {
+    devDependencies["@storybook/react-vite"] = "^8.0.0";
+    devDependencies["@storybook/addon-essentials"] = "^8.0.0";
+    devDependencies["storybook"] = "^8.0.0";
+  }
+
+  if (config.devTools.includes("testing")) {
+    devDependencies["jest"] = "^29.0.0";
+    devDependencies["@testing-library/react"] = "^14.0.0";
+    devDependencies["@testing-library/jest-dom"] = "^6.0.0";
+    devDependencies["@testing-library/user-event"] = "^14.0.0";
+  }
+
+  if (config.devTools.includes("husky")) {
+    devDependencies["husky"] = "^9.0.0";
+    devDependencies["lint-staged"] = "^15.0.0";
+  }
+
+  // PWA dependencies
+  if (config.pwa) {
+    devDependencies["vite-plugin-pwa"] = "^0.20.0";
+  }
+
+  packageJson.dependencies = dependencies;
+  packageJson.devDependencies = devDependencies;
+
+  await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+}
+
+async function configureLibraries(config) {
+  const { projectPath } = config;
+
+  // Configure Tailwind if selected
+  if (config.cssFramework === "tailwind") {
+    await configureTailwind(projectPath);
+  }
+
+  // Configure Vite plugins based on selections
+  await configureVite(config);
+
+  // Add configuration files for selected libraries
+  await addConfigFiles(config);
+}
+
+async function configureTailwind(projectPath) {
+  const tailwindConfig = `/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}`;
+
+  const postcssConfig = `export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}`;
+
+  await fs.writeFile(
+    path.join(projectPath, "tailwind.config.js"),
+    tailwindConfig,
+  );
+  await fs.writeFile(
+    path.join(projectPath, "postcss.config.js"),
+    postcssConfig,
+  );
+
+  // Add Tailwind directives to CSS
+  const cssPath = path.join(projectPath, "src/index.css");
+  const tailwindDirectives = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+`;
+
+  if (await fs.pathExists(cssPath)) {
+    const existingCss = await fs.readFile(cssPath, "utf8");
+    await fs.writeFile(cssPath, tailwindDirectives + existingCss);
+  } else {
+    await fs.writeFile(cssPath, tailwindDirectives);
+  }
+}
+
+async function configureVite(config) {
+  // This would configure vite.config.ts based on selected options
+  // For now, we'll use the existing base template configuration
+}
+
+async function addConfigFiles(config) {
+  // Add configuration files for selected tools
+  // This would add ESLint, Prettier, Jest configs, etc.
+}
+
+async function initializeGit(config) {
+  const { projectPath } = config;
+
+  try {
+    console.log(chalk.blue("🔧 Initializing Git repository..."));
+
+    await runCommand("git", ["init"], projectPath);
+    await runCommand("git", ["add", "."], projectPath);
+    await runCommand(
+      "git",
+      ["commit", "-m", "Initial commit from create-modern-react"],
+      projectPath,
+    );
+
+    console.log(chalk.green("✅ Git repository initialized!"));
+  } catch (error) {
+    console.warn(
+      chalk.yellow("⚠️  Could not initialize Git repository:"),
+      error.message,
+    );
+  }
+}
+
+module.exports = { setupProject };

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "create-modern-react",
+  "version": "1.0.0",
+  "description": "Create a modern React application with Vite, TypeScript, and your choice of modern libraries",
+  "main": "bin/index.js",
+  "bin": {
+    "create-modern-react": "./bin/index.js"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "keywords": [
+    "react",
+    "vite",
+    "typescript",
+    "cli",
+    "boilerplate",
+    "template",
+    "modern",
+    "scaffold"
+  ],
+  "author": "Abhay Rana",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/abhay-rana/create-modern-react.git"
+  },
+  "bugs": {
+    "url": "https://github.com/abhay-rana/create-modern-react/issues"
+  },
+  "homepage": "https://github.com/abhay-rana/create-modern-react#readme",
+  "files": [
+    "bin",
+    "lib",
+    "templates"
+  ],
+  "dependencies": {
+    "chalk": "^4.1.2",
+    "commander": "^11.0.0",
+    "fs-extra": "^11.0.0",
+    "inquirer": "^8.2.6"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.0",
+    "@types/inquirer": "^9.0.0",
+    "eslint": "^8.57.0",
+    "prettier": "^3.0.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint .",
+    "format": "prettier --write ."
+  }
+}

package/templates/base/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Modern React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/base/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "modern-react-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
+  }
+}

package/templates/base/src/App.css

@@ -0,0 +1,14 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

package/templates/base/src/App.tsx

@@ -0,0 +1,25 @@
+import { useState } from "react";
+import "./App.css";
+
+function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="App">
+      <div>
+        <h1>Modern React App</h1>
+        <div className="card">
+          <button onClick={() => setCount((count) => count + 1)}>
+            count is {count}
+          </button>
+          <p>
+            Edit <code>src/App.tsx</code> and save to test HMR
+          </p>
+        </div>
+        <p className="read-the-docs">Click on the React logo to learn more</p>
+      </div>
+    </div>
+  );
+}
+
+export default App;

package/templates/base/src/index.css

@@ -0,0 +1,70 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  color: inherit;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/templates/base/src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/templates/base/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path mapping */
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/base/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "~": "/src",
+    },
+  },
+});