@alistt69/create-kit One command. Zero config fatigue. Bootstrap a React + TypeScript + Webpack app with a solid starter setup and optional tooling you can enable when you need it.

✨ Overview

create-alistt69-kit is a project scaffolding tool for quickly creating a modern frontend app without burning time on repetitive setup.

It generates a ready-to-run React + TypeScript + Webpack starter with a practical baseline and optional extras you can turn on when needed.

🔧 What’s inside

Tool	Purpose	Included
React	Web framework	Default
TypeScript	Static typing	Default
Webpack	Bundling and build pipeline	Default
SCSS Modules	Scoped styling	Default
SVGR	Import SVGs as React components	Default
Webpack Bundle Analyzer	Bundle size inspection	Default
ESLint + eslint-stylistic	Code quality and stylistic rules	Optional
Stylelint	Stylesheet linting	Optional
Autoprefixer	Automatic CSS vendor prefixes	Optional
React Router	Client-side routing	Optional
AGENTS.md	Root instructions file for AI coding agents	Optional
Puppeteer + serve-handler	Static HTML prerender after production build	Optional

🎯 Why use it?

Setting up a frontend project from scratch usually means repeating the same stuff every time:

• webpack config
• TypeScript config
• style handling
• routing
• linters
• folder structure
• project generators

This starter removes that boilerplate so you can get straight to building.

⚡ Generated project helpers

Some optional features also add local project generators to the scaffolded app.

Page generator

When React Router DOM is enabled, the project includes a built-in page generator.

npm run generate:page about

This will create:

• src/pages/about/index.ts
• src/pages/about/lazy.ts
• src/pages/about/page.tsx

If the standard router files are present, the generator will also register the page automatically in:

• src/app/providers/router/types/index.ts
• src/app/providers/router/model/config/index.ts
• src/app/providers/router/model/router/index.tsx

If prerender is enabled, the generator also configure the new route for it automatically.

You can customize generator targets inside scripts/generate/page.mjs:

• ROUTER_TYPES_PATH
• ROUTER_CONFIG_PATH
• ROUTER_FILE_PATH
• PRERENDER_ROUTES_PATH

Please note, that route auto-registration relies on special marker comments @route-... & @prerender-... inside the router files. Do not remove these markers unless you want to disable automatic updates!

🌟 Prerender

When Prerender is enabled, the generated project gets a postbuild prerender step powered by Puppeteer.

Files:

• prerender.routes.mjs
• scripts/prerender.mjs

Example prerender.routes.mjs:

export default async function getPrerenderRoutes() {
    return [
        '/',
        '/about',
        // @prerender-routes
    ];
}

Useful commands inside the generated project:

# Builds webpack assets only
npm run build:assets

# Renders configured routes into static HTML
npm run prerender

# Runs build:assets && prerender
npm run build

📦 Requirements

• Node.js 18.18 or higher
• npm, pnpm, or yarn

🔥 Quick start

Create a new app interactively:

npm create alistt69-kit@latest

Follow the prompts — or skip them entirely:

npm create alistt69-kit@latest my-app -- --defaults

🛠️ Usage examples

# Interactive setup
npm create alistt69-kit@latest my-app

# All defaults, no prompts
npm create alistt69-kit@latest my-app -- --defaults

# Skip dependency installation
npm create alistt69-kit@latest my-app -- --no-install

# Enable only selected features
npm create alistt69-kit@latest my-app -- --features=eslint,react-router

# Enable all optional features
npm create alistt69-kit@latest my-app -- --features=all

# Use pnpm as package manager
npm create alistt69-kit@latest my-app -- --pm pnpm

# Overwrite existing directory
npm create alistt69-kit@latest my-app -- --defaults --overwrite

⚙️ CLI options

Option	Alias	Description
--defaults	-def	Skip prompts, use defaults
--overwrite	—	Overwrite target directory if it exists
--no-install	—	Skip dependency installation
--features <list>	—	Enable specific features (agents-md, eslint, stylelint, autoprefixer, react-router, prerender)
--pm <name>	—	Choose package manager (npm, pnpm, yarn)
--help	-h	Show help

🧪 Default behavior

• All features are enabled by default
• Package manager: npm (can be overridden with --pm)
• Dependencies are installed automatically (skip with --no-install)

📄 License

MIT — free and open for everyone.

See LICENSE.