diff --git a/README.md b/README.md
index 8e526b0..c69735e 100644
--- a/README.md
+++ b/README.md
@@ -14,6 +14,14 @@ npx makes aurelia
 
 This will cause `npx` to download the `makes` tool, along with the `aurelia` scaffold from this repo, which it will use to guide you through creating your project.
 
+## Presets and samples
+
+Use the preset picker to quickly choose a profile, including **Lean Modern Frontend** (TypeScript + Vite + Tailwind + Vitest + Storybook). When picking sample code, you can select **Blank app** for a clean, empty app shell (no demo markup) or use the minimal/router samples as before.
+
+## Plugin projects (Vite + Webpack)
+
+Plugin templates support Vite or Webpack. The Vite plugin build uses Vite's library mode (Rollup under the hood) and injects component CSS into the JS bundle so consumers don't need to import a separate CSS file. The dev-app still runs on the selected bundler for local testing.
+
 ## Development
 
 There are some tests for this skeleton, setup in package.json. (totally not required by makes)
diff --git a/__test__/after-task.spec.js b/__test__/after-task.spec.js
index f549d21..598f32b 100644
--- a/__test__/after-task.spec.js
+++ b/__test__/after-task.spec.js
@@ -1,4 +1,7 @@
 const test = require('ava');
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
 const after = require('../after');
 
 const ansiColors = (m) => m;
@@ -196,6 +199,48 @@ test('"after" task installs deps with pnpm, and prints summary', async t => {
   );
 });
 
+test.serial('"after" task writes pnpm .npmrc when pnpm is selected', async t => {
+  const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'aurelia-pnpm-'));
+  const cwd = process.cwd();
+  t.teardown(() => {
+    process.chdir(cwd);
+    fs.rmSync(tempDir, {recursive: true, force: true});
+  });
+  process.chdir(tempDir);
+
+  const prompts = {
+    select(opts) {
+      t.deepEqual(opts.choices.map(c => c.value), ['npm', 'yarn', 'pnpm', undefined]);
+      return 'pnpm';
+    }
+  };
+
+  function run(cmd, args) {
+    t.is(cmd, 'pnpm');
+    t.deepEqual(args, ['install']);
+  }
+
+  await after({
+    unattended: false,
+    here: true,
+    prompts,
+    run,
+    properties: {name: 'my-app'},
+    features: [],
+    notDefaultFeatures: [],
+    ansiColors
+  }, {
+    _isAvailable: isAvailable,
+    _log() {}
+  });
+
+  const npmrcPath = path.join(tempDir, '.npmrc');
+  t.true(fs.existsSync(npmrcPath));
+  const content = fs.readFileSync(npmrcPath, 'utf8');
+  t.true(content.includes('shamefully-hoist=true'));
+  t.true(content.includes('auto-install-peers=true'));
+});
+
 test('"after" task installs deps, and prints summary in here mode', async t => {
   const prompts = {
     select(opts) {
diff --git a/__test__/before-task.spec.js b/__test__/before-task.spec.js
index 19576d2..4f1ba5f 100644
--- a/__test__/before-task.spec.js
+++ b/__test__/before-task.spec.js
@@ -44,6 +44,50 @@ test('"before" task can select default-typescript preset', async t => {
   });
 });
 
+test('"before" task can select minimal-esnext preset', async t => {
+  const prompts = {
+    select(opts) {
+      t.truthy(opts.choices.find(c => c.value === 'minimal-esnext'));
+      return 'minimal-esnext';
+    }
+  };
+
+  const result = await before({unattended: false, prompts});
+  t.deepEqual(result, {
+    silentQuestions: true,
+    preselectedFeatures: ['app', 'vite', 'babel', 'no-unit-tests', 'app-blank', 'css']
+  });
+});
+
+test('"before" task can select minimal-typescript preset', async t => {
+  const prompts = {
+    select(opts) {
+      t.truthy(opts.choices.find(c => c.value === 'minimal-typescript'));
+      return 'minimal-typescript';
+    }
+  };
+
+  const result = await before({unattended: false, prompts});
+  t.deepEqual(result, {
+    silentQuestions: true,
+    preselectedFeatures: ['app', 'vite', 'typescript', 'no-unit-tests', 'app-blank', 'css']
+  });
+});
+
+test('"before" task can select lean-modern-frontend preset', async t => {
+  const prompts = {
+    select(opts) {
+      t.truthy(opts.choices.find(c => c.value === 'lean-modern-frontend'));
+      return 'lean-modern-frontend';
+    }
+  };
+
+  const result = await before({unattended: false, prompts});
+  t.deepEqual(result, {
+    silentQuestions: true,
+    preselectedFeatures: ['app', 'vite', 'typescript', 'vitest', 'tailwindcss', 'storybook', 'app-min']
+  });
+});
 test('"before" task can select default-esnext-plugin preset', async t => {
   const prompts = {
     select(opts) {
@@ -55,7 +99,7 @@ test('"before" task can select default-esnext-plugin preset', async t => {
   const result = await before({ unattended: false, prompts });
   t.deepEqual(result, {
     silentQuestions: true,
-    preselectedFeatures: ['plugin', 'webpack', 'babel', 'shadow-dom', 'jest']
+    preselectedFeatures: ['plugin', 'vite', 'babel', 'shadow-dom', 'vitest']
   });
 });
 
@@ -72,7 +116,7 @@ test('"before" task can select default-typescript-plugin preset', async t => {
   const result = await before({ unattended: false, prompts });
   t.deepEqual(result, {
     silentQuestions: true,
-    preselectedFeatures: ['plugin', 'webpack', 'typescript', 'shadow-dom', 'jest']
+    preselectedFeatures: ['plugin', 'vite', 'typescript', 'shadow-dom', 'vitest']
   });
 });
 test('"before" task can select no preset', async t => {
@@ -88,4 +132,3 @@ test('"before" task can select no preset', async t => {
   const result = await before({unattended: false, prompts});
   t.is(result, undefined);
 });
-
diff --git a/after.js b/after.js
index c1db531..22ddf46 100644
--- a/after.js
+++ b/after.js
@@ -4,6 +4,11 @@ const {execSync} = require('child_process');
 const fs = require('fs');
 const path = require('path');
 
+const PNPM_NPMRC = `# for pnpm, use flat node_modules
+shamefully-hoist=true
+auto-install-peers=true
+`;
+
 function isAvailable(bin) {
   try {
     execSync(bin + ' -v', {stdio: 'ignore'});
@@ -23,6 +28,7 @@ module.exports = async function({
   const c = ansiColors;
   let depsInstalled = false;
   let packageManager = undefined;
+  const projectDir = here ? '.' : properties.name;
 
   if (!unattended) {
     const choices = [ {value: 'npm', title: 'Yes, use npm'} ];
@@ -43,6 +49,9 @@ module.exports = async function({
     });
 
     if (packageManager) {
+      if (packageManager === 'pnpm') {
+        ensurePnpmrc(projectDir);
+      }
       await run(packageManager, ['install']);
 
       if (features.includes('playwright')) {
@@ -107,3 +116,19 @@ module.exports = async function({
   }
   _log((packageManager ?? 'npm') + ' start\n');
 };
+
+function ensurePnpmrc(projectDir) {
+  if (!projectDir || !fs.existsSync(projectDir)) return;
+
+  const npmrcPath = path.join(projectDir, '.npmrc');
+  if (!fs.existsSync(npmrcPath)) {
+    fs.writeFileSync(npmrcPath, PNPM_NPMRC);
+    return;
+  }
+
+  const existing = fs.readFileSync(npmrcPath, 'utf8');
+  if (existing.includes('shamefully-hoist=') && existing.includes('auto-install-peers=')) return;
+
+  const spacer = existing.endsWith('\n') ? '' : '\n';
+  fs.writeFileSync(npmrcPath, existing + spacer + PNPM_NPMRC);
+}
diff --git a/app-blank/src/my-app.ext b/app-blank/src/my-app.ext
new file mode 100644
index 0000000..c6fa3a3
--- /dev/null
+++ b/app-blank/src/my-app.ext
@@ -0,0 +1,2 @@
+export class MyApp {
+}
diff --git a/app-blank/src/my-app.html b/app-blank/src/my-app.html
new file mode 100644
index 0000000..c7423b4
--- /dev/null
+++ b/app-blank/src/my-app.html
@@ -0,0 +1 @@
+<div>Delete me</div>>
\ No newline at end of file
diff --git a/app-blank/src/my-app.stories.ext__if_storybook b/app-blank/src/my-app.stories.ext__if_storybook
new file mode 100644
index 0000000..0d63baa
--- /dev/null
+++ b/app-blank/src/my-app.stories.ext__if_storybook
@@ -0,0 +1,29 @@
+/* @if vite */
+import { MyApp } from './my-app';
+
+const meta = {
+  title: 'Example/MyApp',
+  component: MyApp,
+  render: () => ({
+    template: `<my-app></my-app>`,
+  })
+};
+
+export default meta;
+
+export const Default = {};
+/* @endif */
+/* @if webpack */
+import { MyApp } from './my-app';
+
+export default {
+  title: 'MyApp',
+  component: MyApp,
+};
+
+export const Default = () => ({
+  Component: MyApp,
+  template: '<my-app></my-app>',
+  props: {}
+});
+/* @endif */
diff --git a/app-blank/test__if_not_no-unit-tests/my-app.spec.ext b/app-blank/test__if_not_no-unit-tests/my-app.spec.ext
new file mode 100644
index 0000000..5846bfe
--- /dev/null
+++ b/app-blank/test__if_not_no-unit-tests/my-app.spec.ext
@@ -0,0 +1,20 @@
+// @if vitest
+import { describe, it } from 'vitest';
+// @endif
+import { MyApp } from '../src/my-app';
+import { createFixture } from '@aurelia/testing';
+
+describe('my-app', () => {
+  it('should render', async () => {
+    const { appHost } = await createFixture(
+      '<my-app></my-app>',
+      {},
+      [MyApp],
+    ).started;
+
+    const element = appHost.querySelector('my-app');
+    if (element === null) {
+      throw new Error('Expected to find my-app element in host');
+    }
+  });
+});
diff --git a/app-min/src/my-app.html b/app-min/src/my-app.html
index 1ac1297..77edb08 100644
--- a/app-min/src/my-app.html
+++ b/app-min/src/my-app.html
@@ -1,12 +1,10 @@
 <!-- @if tailwindcss -->
-<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex flex-col items-center justify-center p-8">
-  <div class="bg-white rounded-lg shadow-lg p-8 max-w-md w-full text-center">
-    <div class="text-3xl font-bold text-gray-800 mb-4">Welcome to Aurelia 2!</div>
-    <div class="text-gray-600 mb-6">You're now running <span class="font-semibold text-blue-600">${message}</span></div>
-    <div class="text-sm text-gray-500">Experience the power of Aurelia 2 with TailwindCSS</div>
-    <div class="mt-4 px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium inline-block">Aurelia 2</div>
+<div class="min-h-screen flex items-center justify-center p-6 bg-gray-50">
+  <div class="text-center">
+    <h1 class="text-3xl font-bold text-gray-900">${message}</h1>
+    <p class="mt-2 text-gray-600">Aurelia 2 + TailwindCSS</p>
     <!-- @if shadow-dom -->
-    <div class="mt-6 p-4 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg text-white">
+    <div class="mt-6 p-3 border rounded bg-white">
       <div class="shared-shadow-style">
         <div class="shared-shadow-text">This content uses shared Shadow DOM styles!</div>
       </div>
diff --git a/app-with-router/src/about-page.html b/app-with-router/src/about-page.html
index 371f79b..af63cfe 100644
--- a/app-with-router/src/about-page.html
+++ b/app-with-router/src/about-page.html
@@ -1,21 +1,7 @@
 <!-- @if tailwindcss -->
-<div class="bg-white rounded-lg shadow p-6">
-  <h1 class="text-3xl font-bold text-gray-900 mb-4">About</h1>
-  <div class="prose prose-blue max-w-none">
-    <p class="text-gray-600 leading-relaxed">
-      This is a sample Aurelia application showcasing the integration of TailwindCSS with the Aurelia framework.
-      The combination provides a powerful development experience with utility-first CSS styling.
-    </p>
-    <div class="mt-6 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border border-blue-200">
-      <h3 class="text-lg font-semibold text-blue-900 mb-2">Features</h3>
-      <ul class="text-blue-800 space-y-1">
-        <li>• Aurelia 2 with modern web standards</li>
-        <li>• TailwindCSS for utility-first styling</li>
-        <li>• Responsive design out of the box</li>
-        <li>• Fast development workflow</li>
-      </ul>
-    </div>
-  </div>
+<div class="bg-white rounded-md border p-4">
+  <h1 class="text-2xl font-semibold text-gray-900 mb-2">About</h1>
+  <p class="text-gray-600">This page is routed via @aurelia/router.</p>
 </div>
 <!-- @endif -->
 <!-- @if !tailwindcss -->
diff --git a/app-with-router/src/missing-page.ext b/app-with-router/src/missing-page.ext
deleted file mode 100644
index ced926e..0000000
--- a/app-with-router/src/missing-page.ext
+++ /dev/null
@@ -1,3 +0,0 @@
-export class MissingPage {
-  /* @if typescript */public /* @endif */missingComponent/* @if typescript */: string /* @endif */ = 'Unknown page';
-}
diff --git a/app-with-router/src/missing-page.html b/app-with-router/src/missing-page.html
deleted file mode 100644
index 823482d..0000000
--- a/app-with-router/src/missing-page.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!-- @if tailwindcss -->
-<div class="bg-white rounded-lg shadow p-6">
-  <h3 class="text-2xl font-bold text-red-600 mb-4">404 - Page Not Found</h3>
-  <p class="text-gray-600">Sorry, the page you're looking for doesn't exist.</p>
-  <a href="welcome" class="mt-4 inline-block px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">Go Home</a>
-</div>
-<!-- @endif -->
-<!-- @if !tailwindcss -->
-<h3>404 - Page Not Found</h3>
-<p>Sorry, the page you're looking for doesn't exist.</p>
-<a href="welcome">Go Home</a>
-<!-- @endif -->
diff --git a/app-with-router/src/my-app.ext b/app-with-router/src/my-app.ext
index 7fc5da3..39d8778 100644
--- a/app-with-router/src/my-app.ext
+++ b/app-with-router/src/my-app.ext
@@ -13,7 +13,6 @@ import { route } from '@aurelia/router';
       title: 'About',
     },
   ],
-  fallback: import('./missing-page'),
 })
 export class MyApp {
 }
diff --git a/app-with-router/src/my-app.html b/app-with-router/src/my-app.html
index 904d578..b3f4d21 100644
--- a/app-with-router/src/my-app.html
+++ b/app-with-router/src/my-app.html
@@ -1,22 +1,14 @@
 <!-- @if tailwindcss -->
 <div class="min-h-screen bg-gray-50">
-  <nav class="bg-white shadow">
-    <div class="max-w-7xl mx-auto px-4">
-      <div class="flex justify-between h-16">
-        <div class="flex space-x-8">
-          <a href="welcome" class="flex items-center px-3 py-2 text-sm font-medium text-gray-900 border-b-2 hover:border-indigo-500 hover:text-indigo-600 transition-colors">
-            Welcome
-          </a>
-          <a href="about" class="flex items-center px-3 py-2 text-sm font-medium text-gray-500 border-b-2 border-transparent hover:border-indigo-500 hover:text-indigo-600 transition-colors">
-            About
-          </a>
-        </div>
-      </div>
+  <nav class="bg-white border-b">
+    <div class="max-w-5xl mx-auto px-4 py-3 flex gap-4">
+      <a href="welcome" class="text-sm font-medium text-gray-900 hover:text-indigo-600">Welcome</a>
+      <a href="about" class="text-sm font-medium text-gray-600 hover:text-indigo-600">About</a>
     </div>
   </nav>
 
-  <main class="max-w-7xl mx-auto py-6 px-4">
-    <au-viewport class="min-h-[calc(100vh-8rem)]"></au-viewport>
+  <main class="max-w-5xl mx-auto p-4">
+    <au-viewport></au-viewport>
   </main>
 </div>
 <!-- @endif -->
diff --git a/app-with-router/src/welcome-page.html b/app-with-router/src/welcome-page.html
index fba6e25..368f261 100644
--- a/app-with-router/src/welcome-page.html
+++ b/app-with-router/src/welcome-page.html
@@ -1,17 +1,7 @@
 <!-- @if tailwindcss -->
-<div class="bg-white rounded-lg shadow p-6">
-  <h1 class="text-3xl font-bold text-gray-900 mb-4">${message}</h1>
-  <p class="text-gray-600 mb-6">Welcome to your Aurelia app with TailwindCSS and routing!</p>
-  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-    <div class="p-4 bg-blue-50 rounded-lg">
-      <h3 class="font-semibold text-blue-900 mb-2">Aurelia 2</h3>
-      <p class="text-blue-700 text-sm">Modern, powerful, and developer-friendly framework</p>
-    </div>
-    <div class="p-4 bg-indigo-50 rounded-lg">
-      <h3 class="font-semibold text-indigo-900 mb-2">TailwindCSS</h3>
-      <p class="text-indigo-700 text-sm">Utility-first CSS framework for rapid UI development</p>
-    </div>
-  </div>
+<div class="bg-white rounded-md border p-4">
+  <h1 class="text-2xl font-semibold text-gray-900 mb-2">${message}</h1>
+  <p class="text-gray-600">Routing is configured and working.</p>
 </div>
 <!-- @endif -->
 <!-- @if !tailwindcss -->
diff --git a/before.js b/before.js
index 3fd3660..d55b2fd 100644
--- a/before.js
+++ b/before.js
@@ -3,13 +3,11 @@
 const PRESETS = {
   'default-esnext': ['app', 'vite', 'babel', 'vitest'],
   'default-typescript': ['app', 'vite', 'typescript', 'vitest'],
-  // TODO: move plugin to vite+vitest
-  // FIXME: vite compiles plugin with separate css dist file, and removed
-  // import('./style.css') from js code, need to:
-  //   1. hook up a css loader in runtime for normal css and css-module.
-  //   2. hook up a text loader in runtime for shadow-dom css.
-  'default-esnext-plugin': ['plugin', 'webpack', 'babel', 'shadow-dom', 'jest'],
-  'default-typescript-plugin': ['plugin', 'webpack', 'typescript', 'shadow-dom', 'jest'],
+  'minimal-esnext': ['app', 'vite', 'babel', 'no-unit-tests', 'app-blank', 'css'],
+  'minimal-typescript': ['app', 'vite', 'typescript', 'no-unit-tests', 'app-blank', 'css'],
+  'lean-modern-frontend': ['app', 'vite', 'typescript', 'vitest', 'tailwindcss', 'storybook', 'app-min'],
+  'default-esnext-plugin': ['plugin', 'vite', 'babel', 'shadow-dom', 'vitest'],
+  'default-typescript-plugin': ['plugin', 'vite', 'typescript', 'shadow-dom', 'vitest'],
 };
 
 const REQUIRE_NODEJS_VESION = [18, 0, 0];
@@ -40,19 +38,31 @@ module.exports = async function({unattended, prompts, ansiColors}) {
       {
         value: 'default-esnext',
         title: 'Default ESNext Aurelia 2 App',
-        hint: 'A basic Aurelia 2 app with Babel and Vite'
+        hint: 'Babel + Vite + Vitest with basic sample'
+      }, {
+        value: 'minimal-esnext',
+        title: 'Minimal ESNext Aurelia 2 App',
+        hint: 'Vite + Babel, no tests, blank sample'
       }, {
         value: 'default-typescript',
         title: 'Default TypeScript Aurelia 2 App',
-        hint: 'A basic Aurelia 2 app with TypeScript and Vite'
+        hint: 'TypeScript + Vite + Vitest with basic sample'
+      }, {
+        value: 'minimal-typescript',
+        title: 'Minimal TypeScript Aurelia 2 App',
+        hint: 'TypeScript + Vite, no tests, blank sample'
+      }, {
+        value: 'lean-modern-frontend',
+        title: 'Lean Modern Frontend',
+        hint: 'TypeScript + Vite + Tailwind + Vitest + Storybook (app-min)'
       }, {
         value: 'default-esnext-plugin',
         title: 'Default ESNext Aurelia 2 Plugin',
-        hint: 'A basic Aurelia 2 plugin project with Babel, Webpack and ShadowDOM'
+        hint: 'A basic Aurelia 2 plugin project with Babel, Vite and ShadowDOM'
       }, {
         value: 'default-typescript-plugin',
         title: 'Default TypeScript Aurelia 2 Plugin',
-        hint: 'A basic Aurelia 2 plugin project with TypeScript, Webpack and ShadowDOM'
+        hint: 'A basic Aurelia 2 plugin project with TypeScript, Vite and ShadowDOM'
       }, {
         title: 'Custom Aurelia 2 Project',
         hint: 'Select bundler, transpiler, and more.'
diff --git a/common/.npmrc b/common/.npmrc
deleted file mode 100644
index f8f5435..0000000
--- a/common/.npmrc
+++ /dev/null
@@ -1,3 +0,0 @@
-# for pnpm, use flat node_modules
-shamefully-hoist=true
-auto-install-peers=true
diff --git a/common/README.md__skip-if-exists b/common/README.md__skip-if-exists
index d5ec373..2a02f5c 100644
--- a/common/README.md__skip-if-exists
+++ b/common/README.md__skip-if-exists
@@ -2,6 +2,28 @@
 
 This project is bootstrapped by [aurelia/new](https://github.com/aurelia/new).
 
+## Quick start
+
+    npm install
+    npm start
+
+// @if vitest || jest
+Run unit tests:
+
+    npm test
+// @endif
+// @if storybook
+Run Storybook:
+
+    npm run storybook
+// @endif
+// @if playwright
+Run Playwright e2e:
+
+    npx playwright install --with-deps
+    npx playwright test
+// @endif
+
 // @if tailwindcss
 ## TailwindCSS Integration
 
@@ -93,6 +115,13 @@ Note this plugin project comes with a dev-app. The above command starts the dev
 
 It builds plugin into `dist/index.js` file.
 
+// @if vite
+When using Vite, the build outputs ESM to `dist/index.js`.
+// @endif
+// @if webpack
+When using Webpack, the build outputs CommonJS to `dist/index.js`.
+// @endif
+
 Note when you do `npm publish` or `npm pack` to prepare the plugin package, it automatically run the above build command by the `prepare` script defined in your package.json `"scripts"` section.
 
 ## Consume the plugin
diff --git a/common/package.json b/common/package.json
index 8ad52a3..5f05cda 100644
--- a/common/package.json
+++ b/common/package.json
@@ -5,8 +5,9 @@
   // @endif
   // @if plugin
   "description": "An Aurelia 2 plugin.",
-  // TODO: turn on after moved plugin to vite steup
-  // "type": "module",
+  // @if vite
+  "type": "module",
+  // @endif
   "main": "dist/index.js",
   "files": [
     "dist"
@@ -41,7 +42,7 @@
     // @endif
   },
   "scripts": {
-    "lint:js": "eslint src/* @if !no-unit-tests */ test/* @endif *//* @if playwright */ e2e/* @endif */",
+    "lint:js": "eslint \"src/**/*.{js,ts}\"/* @if !no-unit-tests */ \"test/**/*.{js,ts}\"/* @endif *//* @if playwright */ \"e2e/**/*.{js,ts}\"/* @endif */",
     // @if css || tailwindcss
     "lint:css": "stylelint \"src/**/*.css\"",
     // @endif
diff --git a/plugin-min/dev-app/main.ext b/plugin-min/dev-app/main.ext
index a891562..64de757 100644
--- a/plugin-min/dev-app/main.ext
+++ b/plugin-min/dev-app/main.ext
@@ -10,6 +10,10 @@ import { MyApp } from './my-app';
 // They are for sharedStyles in shadowDOM.
 // However, css files imported in other js/ts files are processed by style-loader.
 // @endif
+// @if vite
+// Css files imported in this main file should be imported with ?inline query
+// to get CSS as string for sharedStyles in shadowDOM.
+// @endif
 // import shared from './shared./* @if css || tailwindcss */css/* @endif *//* @if sass */scss/* @endif */';
 // @endif
 import * as Plugin from "../src/index";
diff --git a/questions.js b/questions.js
index e6af872..a87c1db 100644
--- a/questions.js
+++ b/questions.js
@@ -16,7 +16,7 @@ module.exports = [
   {
     message: 'Which bundler would you like to use?',
     choices: [
-      {if: 'app', value: 'vite', title: 'Vite', hint: 'Next Generation Frontend Tooling.'},
+      {value: 'vite', title: 'Vite', hint: 'Next Generation Frontend Tooling.'},
       {value: 'webpack', title: 'Webpack', hint: 'A powerful and popular bundler for modern JavaScript apps.'},
       {if: 'app', value: 'dumber', title: 'Dumber', hint: 'A dumb JavasScript bundler, dumber than you and me. The successor of Aurelia CLI built-in bundler.'},
       {if: 'app', value: 'parcel', title: 'Parcel', hint: 'Blazing fast, zero configuration web application bundler.'},
@@ -66,13 +66,14 @@ module.exports = [
     message: 'Do you want to add Storybook?',
     choices: [
       {title: 'No'},
-      {if: '(app && (vite || webpack)) || (plugin && webpack)', value: 'storybook', title: 'Yes', hint: 'Add Storybook for component development and testing (requires Vite or Webpack)'}
+      {if: 'vite || webpack', value: 'storybook', title: 'Yes', hint: 'Add Storybook for component development and testing (requires Vite or Webpack)'}
     ]
   },
   {
 
     message: 'What kind of sample code do you want in this project?',
     choices: [
+      {if: 'app', value: 'app-blank', title: 'Blank app', hint: 'Empty app shell with no sample markup.'},
       {if: 'app', value: 'app-min', title: 'Bare minimum', hint: 'Hello world entry point only.'},
       {if: 'app', value: 'app-with-router', title: 'With routing', hint: 'Starter pages configured with @aurelia/router.'},
       {if: 'plugin', value: 'plugin-min', title: 'Bare minimum plugin', hint: 'Starter plugin project with sample registration.'},
diff --git a/vite/package.json b/vite/package.json
index ae2513b..3f191c9 100644
--- a/vite/package.json
+++ b/vite/package.json
@@ -22,7 +22,7 @@
     "@tailwindcss/vite": "^4.1.10",
     // @endif
     // @if storybook
-    "@aurelia/storybook": "^2.1.0",
+    "@aurelia/storybook": "^2.2.1",
     "storybook": "^10.1.11",
     "@storybook/builder-vite": "^10.1.11",
     "@storybook/addon-links": "^10.1.11",
diff --git a/vite/vite.config.ext b/vite/vite.config.ext
index d717afe..f958b45 100644
--- a/vite/vite.config.ext
+++ b/vite/vite.config.ext
@@ -13,6 +13,47 @@ import { resolve } from 'path';
 import dts from 'vite-plugin-dts';
 // @endif
 // @endif
+// @if plugin
+// TODO: move css injection into @aurelia/vite-plugin once it exposes a helper.
+function cssInjectPlugin() {
+  return {
+    name: 'aurelia:css-inject',
+    apply: 'build',
+    enforce: 'post',
+    generateBundle(_options, bundle) {
+      const cssAssets = Object.entries(bundle)
+        .filter(([name, asset]) => asset.type === 'asset' && name.endsWith('.css'));
+
+      if (cssAssets.length === 0) return;
+
+      const cssText = cssAssets
+        .map(([, asset]) => (typeof asset.source === 'string' ? asset.source : asset.source.toString()))
+        .join('\n');
+
+      const injection = [
+        'if (typeof document !== \"undefined\") {',
+        '  const style = document.createElement(\"style\");',
+        '  style.setAttribute(\"type\", \"text/css\");',
+        `  style.textContent = ${JSON.stringify(cssText)};`,
+        '  document.head.appendChild(style);',
+        '}',
+        ''
+      ].join('\n');
+
+      Object.values(bundle).forEach((chunk) => {
+        if (chunk.type === 'chunk' && chunk.isEntry) {
+          // Append to avoid shifting existing sourcemap line mappings.
+          chunk.code = `${chunk.code}\n${injection}`;
+        }
+      });
+
+      cssAssets.forEach(([name]) => {
+        delete bundle[name];
+      });
+    }
+  };
+}
+// @endif
 
 export default defineConfig({
   server: {
@@ -60,5 +101,8 @@ export default defineConfig({
     // @if typescript && plugin
     dts(),
     // @endif
+    // @if plugin
+    cssInjectPlugin(),
+    // @endif
   ],
 });
diff --git a/webpack/package.json b/webpack/package.json
index ba77e27..b1abe36 100644
--- a/webpack/package.json
+++ b/webpack/package.json
@@ -30,7 +30,7 @@
     "webpack-node-externals": "^3.0.0",
     // @endif
     // @if storybook
-    "@aurelia/storybook": "^2.1.0",
+    "@aurelia/storybook": "^2.2.1",
     "storybook": "^10.1.11",
     "@storybook/builder-webpack5": "^10.1.11",
     "@storybook/addon-links": "^10.1.11",