@undp/create-app 0.2.21 → 0.3.0

package/README.md

@@ -1,6 +1,6 @@
 # 🏗️ UNDP Create App CLI ![npm](https://img.shields.io/npm/v/@undp/create-app)
 
-**`@undp/create-app`** is UNDP’s official **project scaffolding tool** for quickly bootstrapping frontend applications using **React**, and **TypeScript** — complete with sensible defaults for ESLint, Prettier.
+**`@undp/create-app`** is UNDP’s official **project scaffolding tool** for quickly bootstrapping frontend applications using **React**, and **TypeScript** — complete with sensible defaults for Biome.
 
 [NPM Package](https://www.npmjs.com/package/@undp/create-app)
 
@@ -16,7 +16,7 @@
 - 🎨 Preconfigured for **UNDP’s Design System**  
 - ⚡️ Optional integration with **Tanstack query** for data fetching  
 - 📊 Optional integration with **@undp/data-viz** for interactive data visualization  
-- 🌐 Optional integration with **i18next** for internationalization  
+- 🔣 Optional integration with **i18next** for internationalization  
 - ✨ **Biome** preconfigured for consistent code style  
 
 ---
@@ -25,12 +25,12 @@
 
 All setups include **Tailwind CSS** for styling and **Zustand** for state management.
 
-| Framework | Variants | Description |
-|------------|-----------|-------------|
-| **Vite** | Basic | Minimal React + TypeScript setup |
-| **Vite** | + Router | Adds TanStack Router for routing |
-| **Next.js** | Basic | SSR and file-based routing |
-| **Next.js** | + Auth | Includes authentication via Better Auth |
+| Framework | Variants | Description | Internationalization Available |
+|------------|-----------|-------------|-------------|
+| **Vite** | Basic | Minimal React + TypeScript setup | ✅ |
+| **Vite** | + Router | Adds TanStack Router for routing | ✅ |
+| **Next.js** | Basic | SSR and file-based routing | ❌ |
+| **Next.js** | + Auth | Includes authentication via Better Auth | ❌ |
 
 ---
 

package/bin/generateFiles/generateGitIgnore.js

@@ -13,7 +13,6 @@ build
 dist
 dist-ssr
 *.local
-.eslintcache
 stats.html
 
 # Editor directories and files

package/bin/generateFiles/generatePackageJson.js

@@ -14,34 +14,34 @@ export function generatePackageJson(config) {
   const designSystemVer = `^${getLatestVersion('@undp/design-system-react')}`
   const zustandVer = `^${getLatestVersion('zustand')}`
   const dependenciesTemp = config.libraries.includes('peer') && config.libraries.includes('@undp/data-viz') ? {
-    "@undp/design-system-react": designSystemVer,
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
-    "ajv": "^8.17.1",
-    "dom-to-svg": "^0.12.2",
-    "file-saver": "^2.0.5",
-    "handlebars": "^4.7.8",
-    "maplibre-gl": "^5.12.0",
-    "marked": "^16.4.1",
-    "math-expression-evaluator": "^2.0.7",
-    "pmtiles": "^4.3.0",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "react-globe.gl": "^2.37.0",
-    "three": "^0.180.0",
-    "zustand": zustandVer
+    '@undp/design-system-react': designSystemVer,
+    '@dnd-kit/core': '^6.3.1',
+    '@dnd-kit/modifiers': '^9.0.0',
+    'ajv': '^8.17.1',
+    'dom-to-svg': '^0.12.2',
+    'file-saver': '^2.0.5',
+    'handlebars': '^4.7.8',
+    'maplibre-gl': '^5.12.0',
+    'marked': '^16.4.1',
+    'math-expression-evaluator': '^2.0.7',
+    'pmtiles': '^4.3.0',
+    'react': '^19.2.3',
+    'react-dom': '^19.2.3',
+    'react-globe.gl': '^2.37.0',
+    'three': '^0.180.0',
+    'zustand': zustandVer
   } : {
-    "@undp/design-system-react": designSystemVer,
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "zustand": zustandVer
+    '@undp/design-system-react': designSystemVer,
+    'react': '^19.2.3',
+    'react-dom': '^19.2.3',
+    'zustand': zustandVer
   };
 
   const dependencies = config.language && !config.framework.includes('next') ? {
     ...dependenciesTemp, 
-    "i18next": "^26.0.8",
-    "i18next-browser-languagedetector": "^8.2.1",
-    "react-i18next": "^17.0.6",
+    'i18next': '^26.0.8',
+    'i18next-browser-languagedetector': '^8.2.1',
+    'react-i18next': '^17.0.6',
   } : {...dependenciesTemp}
 
   switch (config.framework) {
@@ -73,43 +73,40 @@ export function generatePackageJson(config) {
     Object.entries(dependencies).sort(([a], [b]) => a.localeCompare(b))
   );
   const devDependencies = config.framework.includes('vite') ?  {
-    "@biomejs/biome": "^2.4.12",
-    "@tailwindcss/postcss": "^4.1.17",
-    "@tailwindcss/vite": "^4.3.0",
-    "@types/node": "^24.10.0",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.2",
-    "autoprefixer": "^10.4.21",
-    "babel-plugin-react-compiler": "^1.0.0",
-    "postcss": "^8.5.6",
-    "postcss-nested": "^7.0.2",
-    "rimraf": "^6.1.0",
-    "rollup-plugin-visualizer": "^6.0.5",
-    "tailwind-animate": "^0.2.10",
-    "tailwind-merge": "^3.4.0",
-    "tailwindcss": "^4.1.17",
-    "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.3",
-    "vite": "^8.0.13",
-    "vite-plugin-static-copy": "^4.1.0"
+    '@biomejs/biome': '^2.4.12',
+    '@tailwindcss/postcss': '^4.1.17',
+    '@tailwindcss/vite': '^4.3.0',
+    '@types/node': '^24.10.0',
+    '@types/react': '^19.2.7',
+    '@types/react-dom': '^19.2.3',
+    '@vitejs/plugin-react': '^6.0.2',
+    'autoprefixer': '^10.4.21',
+    'postcss': '^8.5.6',
+    'postcss-nested': '^7.0.2',
+    'rimraf': '^6.1.0',
+    'rollup-plugin-visualizer': '^6.0.5',
+    'tailwind-animate': '^0.2.10',
+    'tailwind-merge': '^3.4.0',
+    'tailwindcss': '^4.1.17',
+    'tailwindcss-animate': '^1.0.7',
+    'typescript': '^5.9.3',
+    'vite': '^8.0.13',
+    'vite-plugin-static-copy': '^4.1.0'
   } : {
-    "@biomejs/biome": "^2.4.12",
-    "@tailwindcss/postcss": "^4.1.17",
-    "@types/node": "^24.10.0",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.6",
-    "postcss-nested": "^7.0.2",
-    "rimraf": "^6.1.0",
-    "rollup-plugin-visualizer": "^6.0.5",
-    "tailwind-animate": "^0.2.10",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.17",
-    "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.3"
+    '@biomejs/biome': '^2.4.12',
+    '@tailwindcss/postcss': '^4.1.17',
+    '@types/node': '^24.10.0',
+    '@types/react': '^19.2.7',
+    '@types/react-dom': '^19.2.3',
+    'postcss': '^8.5.6',
+    'postcss-nested': '^7.0.2',
+    'rimraf': '^6.1.0',
+    'rollup-plugin-visualizer': '^6.0.5',
+    'tailwind-animate': '^0.2.10',
+    'tailwind-merge': '^3.3.1',
+    'tailwindcss': '^4.1.17',
+    'tailwindcss-animate': '^1.0.7',
+    'typescript': '^5.9.3',
   };
   const sortedDevDependencies = Object.fromEntries(
     Object.entries(devDependencies).sort(([a], [b]) => a.localeCompare(b))
@@ -131,14 +128,18 @@ export function generatePackageJson(config) {
         build: 'next build',
         start: 'next start',
         clean: 'rimraf node_modules && rimraf .next && rimraf package-lock.json',
-        lint: "biome check . --write"
+        check: 'biome check .',
+        'check:fix': 'biome check --write .',
+        'check:unsafe': 'biome check --write --unsafe .',
       } : {
         dev: 'vite',
         build: 'tsc && vite build',
         preview: 'vite preview',
         clean: 'rimraf node_modules && rimraf dist && rimraf package-lock.json',
         'install:build': 'npm install && tsc && vite build',
-        lint: "biome check . --write"
+        check: 'biome check .',
+        'check:fix': 'biome check --write .',
+        'check:unsafe': 'biome check --write --unsafe .',
       },
     dependencies: sortedDependencies,
     devDependencies: sortedDevDependencies

package/bin/generateFiles/generatePageForNext.js

@@ -27,12 +27,12 @@ export default function Home() {
 
   const { data, isLoading, isError } = useTodoData();
 
-  if (isLoading) return <Spinner size='lg' className='my-20 m-auto' />;
+  if (isLoading) return <Spinner size='lg' className='mx-auto my-20' />;
 
   if (isError) return <>Error</>;` : ''}
   return (
     <>
-      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
+      <div className='mx-auto my-8 flex items-center justify-center gap-4'>
         <Image
           className='dark:invert'
           src='/imgs/next.svg'
@@ -73,7 +73,7 @@ export default function Home() {
         To get started, edit the App.tsx file.{' '}
         <span className='font-bold'>Count: {count}</span>
       </P>
-      <div className='flex gap-4 justify-center mb-8'>
+      <div className='mb-8 flex justify-center gap-4'>
         <Button
           variant='tertiary'
           onClick={() => {

package/bin/generateFiles/generateViteConfig.js

@@ -95,12 +95,16 @@ export default defineConfig({
             // 1. Append media first
             mediaRules
               .sort((a, b) => a.pxValue - b.pxValue)
-              .forEach(({ rule }) => root.append(rule));
+              .forEach(({ rule }) => {
+                root.append(rule);
+              });
 
             // 2. Append container after
             containerRules
               .sort((a, b) => a.pxValue - b.pxValue)
-              .forEach(({ rule }) => root.append(rule));
+              .forEach(({ rule }) => {
+                root.append(rule);
+              });
           },
         },` : `
         {
@@ -144,12 +148,16 @@ export default defineConfig({
             // 1. Append media first
             mediaRules
               .sort((a, b) => a.pxValue - b.pxValue)
-              .forEach(({ rule }) => root.append(rule));
+              .forEach(({ rule }) => {
+                root.append(rule);
+              });
 
             // 2. Append container after
             containerRules
               .sort((a, b) => a.pxValue - b.pxValue)
-              .forEach(({ rule }) => root.append(rule));
+              .forEach(({ rule }) => {
+                root.append(rule);
+              });
           },
         },`
         }

package/bin/templates/next/auth/README.md

@@ -5,7 +5,7 @@ It includes:
 * UNDP Design System
 * Authentication with [Better Auth](https://www.better-auth.com/)
 * TailwindCSS
-* Code linting and formatting via ESLint and Prettier
+* Code linting and formatting via Biome
 
 ## 🧩 Installation
 
@@ -33,19 +33,19 @@ The page will reload if you make edits. You will also see any lint errors in the
 - `npm run build`: Executes `next build` and builds the app for production and deployment.
 - `npm run preview`: Executes `next start` and serves the static build output locally.
 - `npm run clean`: Executes `rimraf node_modules && rimraf .next && rimraf package-lock.json` and remove node_modules folder, dist folder and package-lock.json.
-- `npm run lint`: Executes `npx eslint --fix && npx prettier . --write` and resolve all the linting and prettier errors.
+- `npm run check`: Executes `biome check .` and lists all the linting and prettier errors.
+- `npm run check:fix`: Executes `biome check --write .` and resolve all the linting and prettier errors.
 
 ## 🧰 Tooling Setup
 
-This project uses ESLint integrated with Prettier to automatically format and lint your code.
+This project uses Biome integrated to automatically format and lint your code.
 
 If you’re using Visual Studio Code, install:
-* [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-* [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+* [Biome extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome)
 
 Your editor should now show linting errors and automatically fix issues where possible.
 
-More info: [ESLint Integrations](http://eslint.org/docs/user-guide/integrations)
+More info: [Biome Docs](https://biomejs.dev/guides/getting-started/)
 
 ## 🎨 Styling
 

package/bin/templates/next/auth/app/about/page.tsx

@@ -6,7 +6,7 @@ import Image from 'next/image';
 export default function About() {
   return (
     <>
-      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
+      <div className='mx-auto my-8 flex items-center justify-center gap-4'>
         <Image
           className='dark:invert'
           src='/imgs/next.svg'

package/bin/templates/next/auth/app/login/page.tsx

@@ -16,7 +16,7 @@ export default function LoginPage() {
 
   return (
     <>
-      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
+      <div className='mx-auto my-8 flex items-center justify-center gap-4'>
         <Image
           className='dark:invert'
           src='/imgs/next.svg'

package/bin/templates/next/auth/app/page.tsx

@@ -11,7 +11,7 @@ export default function Home() {
   const { increment, decrement } = useCounterActions();
   return (
     <>
-      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
+      <div className='mx-auto my-8 flex items-center justify-center gap-4'>
         <Image
           className='dark:invert'
           src='/imgs/next.svg'
@@ -52,7 +52,7 @@ export default function Home() {
         To get started, edit the App.tsx file.{' '}
         <span className='font-bold'>Count: {count}</span>
       </P>
-      <div className='flex gap-4 justify-center'>
+      <div className='flex justify-center gap-4'>
         <Button
           variant='tertiary'
           onClick={() => {

package/bin/templates/next/auth/app/user/page.tsx

@@ -26,7 +26,7 @@ export default function UserPage() {
 
   return (
     <>
-      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
+      <div className='mx-auto my-8 flex items-center justify-center gap-4'>
         <Image
           className='dark:invert'
           src='/imgs/next.svg'

package/bin/templates/next/auth/biome.json

@@ -45,6 +45,9 @@
 			"correctness": {
 				"noUnusedVariables": "error",
 				"noUndeclaredVariables": "error"
+			},
+			"nursery": {
+				"useSortedClasses": "error"
 			}
 		}
 	},

package/bin/templates/next/basic/README.md

@@ -4,7 +4,7 @@ It includes:
 * Next 16.x with React compiler
 * UNDP Design System
 * TailwindCSS
-* Code linting and formatting via ESLint and Prettier
+* Code linting and formatting via Biome
 
 ## 🧩 Installation
 
@@ -32,19 +32,19 @@ The page will reload if you make edits. You will also see any lint errors in the
 - `npm run build`: Executes `next build` and builds the app for production and deployment.
 - `npm run preview`: Executes `next start` and serves the static build output locally.
 - `npm run clean`: Executes `rimraf node_modules && rimraf .next && rimraf package-lock.json` and remove node_modules folder, dist folder and package-lock.json.
-- `npm run lint`: Executes `npx eslint --fix && npx prettier . --write` and resolve all the linting and prettier errors.
+- `npm run check`: Executes `biome check .` and lists all the linting and prettier errors.
+- `npm run check:fix`: Executes `biome check --write .` and resolve all the linting and prettier errors.
 
 ## 🧰 Tooling Setup
 
-This project uses ESLint integrated with Prettier to automatically format and lint your code.
+This project uses Biome integrated to automatically format and lint your code.
 
 If you’re using Visual Studio Code, install:
-* [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-* [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+* [Biome extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome)
 
 Your editor should now show linting errors and automatically fix issues where possible.
 
-More info: [ESLint Integrations](http://eslint.org/docs/user-guide/integrations)
+More info: [Biome Docs](https://biomejs.dev/guides/getting-started/)
 
 ## 🎨 Styling
 

package/bin/templates/next/basic/app/about/page.tsx

@@ -6,7 +6,7 @@ import Image from 'next/image';
 export default function About() {
   return (
     <>
-      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
+      <div className='mx-auto my-8 flex items-center justify-center gap-4'>
         <Image
           className='dark:invert'
           src='/imgs/next.svg'

package/bin/templates/next/basic/app/page.tsx

@@ -11,7 +11,7 @@ export default function Home() {
   const { increment, decrement } = useCounterActions();
   return (
     <>
-      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
+      <div className='mx-auto my-8 flex items-center justify-center gap-4'>
         <Image
           className='dark:invert'
           src='/imgs/next.svg'
@@ -52,7 +52,7 @@ export default function Home() {
         To get started, edit the App.tsx file.{' '}
         <span className='font-bold'>Count: {count}</span>
       </P>
-      <div className='flex gap-4 justify-center'>
+      <div className='flex justify-center gap-4'>
         <Button
           variant='tertiary'
           onClick={() => {

package/bin/templates/next/basic/biome.json

@@ -45,6 +45,9 @@
 			"correctness": {
 				"noUnusedVariables": "error",
 				"noUndeclaredVariables": "error"
+			},
+			"nursery": {
+				"useSortedClasses": "error"
 			}
 		}
 	},

package/bin/templates/vite/basic/README.md

@@ -4,7 +4,7 @@ It includes:
 * React 19.x with React compiler
 * UNDP Design System
 * TailwindCSS
-* Code linting and formatting via ESLint and Prettier
+* Code linting and formatting via Biome
 
 ## 🧩 Installation
 
@@ -32,19 +32,19 @@ The page will reload if you make edits. You will also see any lint errors in the
 - `npm run build`: Executes `tsc && vite build` and builds the app for production and deployment.
 - `npm run preview`: Executes `vite preview` and serves the static build output (from vite build) locally.
 - `npm run clean`: Executes `rimraf node_modules && rimraf dist && rimraf package-lock.json` and remove node_modules folder, dist folder and package-lock.json.
-- `npm run lint`: Executes `npx eslint --fix && npx prettier . --write` and resolve all the linting and prettier errors.
+- `npm run check`: Executes `biome check .` and lists all the linting and prettier errors.
+- `npm run check:fix`: Executes `biome check --write .` and resolve all the linting and prettier errors.
 
 ## 🧰 Tooling Setup
 
-This project uses ESLint integrated with Prettier to automatically format and lint your code.
+This project uses Biome integrated to automatically format and lint your code.
 
 If you’re using Visual Studio Code, install:
-* [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-* [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+* [Biome extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome)
 
 Your editor should now show linting errors and automatically fix issues where possible.
 
-More info: [ESLint Integrations](http://eslint.org/docs/user-guide/integrations)
+More info: [Biome Docs](https://biomejs.dev/guides/getting-started/)
 
 ## 🎨 Styling
 

package/bin/templates/vite/basic/biome.json

@@ -45,6 +45,9 @@
 			"correctness": {
 				"noUnusedVariables": "error",
 				"noUndeclaredVariables": "error"
+			},
+			"nursery": {
+				"useSortedClasses": "error"
 			}
 		}
 	},

package/bin/templates/vite/basic/src/App.tsx

@@ -10,8 +10,8 @@ function App() {
   const count = useCounter();
   const { increment, decrement } = useCounterActions();
   return (
-    <div className=' min-h-screen flex flex-col justify-center'>
-      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
+    <div className='flex min-h-screen flex-col justify-center'>
+      <div className='mx-auto my-8 flex items-center justify-center gap-4'>
         <img
           src='./imgs/Vitejs-logo.svg'
           alt='vite logo'
@@ -44,7 +44,7 @@ function App() {
         To get started, edit the App.tsx file.{' '}
         <span className='font-bold'>Count: {count}</span>
       </P>
-      <div className='flex gap-4 justify-center'>
+      <div className='flex justify-center gap-4'>
         <Button
           variant='tertiary'
           onClick={() => {

package/bin/templates/vite/basic/tsconfig.json

@@ -24,6 +24,6 @@
     }
   },
   "files": [],
-  "include": ["eslint.config.mjs", "src", "tailwind.config.js"],
+  "include": ["src", "tailwind.config.js"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

package/bin/templates/vite/basic/vite.config.ts

@@ -2,7 +2,6 @@ import path from 'path';
 
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import eslint from '@nabla/vite-plugin-eslint';
 import { visualizer } from 'rollup-plugin-visualizer';
 import postcssNested from 'postcss-nested';
 import tailwindcss from '@tailwindcss/postcss';
@@ -10,12 +9,7 @@ import { viteStaticCopy } from 'vite-plugin-static-copy';
 
 export default defineConfig({
   plugins: [
-    react({
-      babel: {
-        plugins: ['babel-plugin-react-compiler'],
-      },
-    }),
-    eslint(),
+    react(),
     visualizer({ filename: 'stats.html', open: true }),
     viteStaticCopy({
       targets: [{ src: 'staticwebapp.config.json', dest: '' }],

package/bin/templates/vite/query/README.md

@@ -5,7 +5,7 @@ It includes:
 * UNDP Design System
 * Data fetching with [TanStack Query](https://tanstack.com/query)
 * TailwindCSS
-* Code linting and formatting via ESLint and Prettier
+* Code linting and formatting via Biome
 
 ## 🧩 Installation
 
@@ -33,19 +33,19 @@ The page will reload if you make edits. You will also see any lint errors in the
 - `npm run build`: Executes `tsc && vite build` and builds the app for production and deployment.
 - `npm run preview`: Executes `vite preview` and serves the static build output (from vite build) locally.
 - `npm run clean`: Executes `rimraf node_modules && rimraf dist && rimraf package-lock.json` and remove node_modules folder, dist folder and package-lock.json.
-- `npm run lint`: Executes `npx eslint --fix && npx prettier . --write` and resolve all the linting and prettier errors.
+- `npm run check`: Executes `biome check .` and lists all the linting and prettier errors.
+- `npm run check:fix`: Executes `biome check --write .` and resolve all the linting and prettier errors.
 
 ## 🧰 Tooling Setup
 
-This project uses ESLint integrated with Prettier to automatically format and lint your code.
+This project uses Biome integrated to automatically format and lint your code.
 
 If you’re using Visual Studio Code, install:
-* [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-* [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+* [Biome extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome)
 
 Your editor should now show linting errors and automatically fix issues where possible.
 
-More info: [ESLint Integrations](http://eslint.org/docs/user-guide/integrations)
+More info: [Biome Docs](https://biomejs.dev/guides/getting-started/)
 
 ## 🎨 Styling
 

package/bin/templates/vite/query/biome.json

@@ -45,6 +45,9 @@
 			"correctness": {
 				"noUnusedVariables": "error",
 				"noUndeclaredVariables": "error"
+			},
+			"nursery": {
+				"useSortedClasses": "error"
 			}
 		}
 	},

package/bin/templates/vite/query/src/App.tsx

@@ -26,12 +26,12 @@ function App() {
   const count = useCounter();
   const { increment, decrement } = useCounterActions();
 
-  if (isLoading) return <Spinner size='lg' className='my-20 m-auto' />;
+  if (isLoading) return <Spinner size='lg' className='mx-auto my-20' />;
 
   if (isError) return <>Error</>;
   return (
-    <div className=' min-h-screen flex flex-col justify-center'>
-      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
+    <div className='flex min-h-screen flex-col justify-center'>
+      <div className='mx-auto my-8 flex items-center justify-center gap-4'>
         <img
           src='./imgs/Vitejs-logo.svg'
           alt='vite logo'
@@ -71,7 +71,7 @@ function App() {
         To get started, edit the App.tsx file.{' '}
         <span className='font-bold'>Count: {count}</span>
       </P>
-      <div className='flex gap-4 justify-center mb-8'>
+      <div className='mb-8 flex justify-center gap-4'>
         <Button
           variant='tertiary'
           onClick={() => {

package/bin/templates/vite/query/tsconfig.json

@@ -24,6 +24,6 @@
     }
   },
   "files": [],
-  "include": ["eslint.config.mjs", "src", "tailwind.config.js"],
+  "include": ["src", "tailwind.config.js"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }