create-react-starter-kit 1.0.1 → 1.0.3

package/dist/templates/src/components/layout/AppLayout.tsx.ejs

@@ -13,6 +13,14 @@ interface AppLayoutProps {
 }
 <% } -%>
 
+const links = [
+  { to: '/', label: 'Home', end: true },
+  { to: '/counter', label: 'Counter' },
+  { to: '/posts', label: 'Posts' },
+  { to: '/feedback', label: 'Feedback' },
+  { to: '/about', label: 'About' },
+] as const;
+
 export function AppLayout(<% if (router === 'tanstack-router') { %>{ children }<% if (isTypeScript) { %>: AppLayoutProps<% } %><% } %>) {
 <% if (router === 'tanstack-router') { -%>
   const pathname = useRouterState({ select: (s) => s.location.pathname });
@@ -30,19 +38,34 @@ export function AppLayout(<% if (router === 'tanstack-router') { %>{ children }<
         </div>
         <nav className="app-nav" aria-label="Primary">
 <% if (router === 'react-router') { -%>
-          <NavLink to="/" end className={({ isActive }) => (isActive ? 'nav-link active' : 'nav-link')}>
-            Home
-          </NavLink>
-          <NavLink to="/about" className={({ isActive }) => (isActive ? 'nav-link active' : 'nav-link')}>
-            About
-          </NavLink>
+          {links.map((link) => (
+            <NavLink
+              key={link.to}
+              to={link.to}
+              end={'end' in link ? link.end : false}
+              className={({ isActive }) => (isActive ? 'nav-link active' : 'nav-link')}
+            >
+              {link.label}
+            </NavLink>
+          ))}
 <% } else { -%>
-          <Link to="/" className={pathname === '/' ? 'nav-link active' : 'nav-link'}>
-            Home
-          </Link>
-          <Link to="/about" className={pathname === '/about' ? 'nav-link active' : 'nav-link'}>
-            About
-          </Link>
+          {links.map((link) => (
+            <Link
+              key={link.to}
+              to={link.to}
+              className={
+                link.to === '/'
+                  ? pathname === '/'
+                    ? 'nav-link active'
+                    : 'nav-link'
+                  : pathname.startsWith(link.to)
+                    ? 'nav-link active'
+                    : 'nav-link'
+              }
+            >
+              {link.label}
+            </Link>
+          ))}
 <% } -%>
         </nav>
       </header>

package/dist/templates/src/features/counter/CounterPanel.tsx.ejs

@@ -13,10 +13,8 @@ import { counterAtom } from '@/store';
 import { useAppState } from '@/store/context';
 <% } -%>
 import { UiButton } from '@/components/ui/UiButton';
-import { useToast } from '@/components/ui/Toast';
 
 export function CounterPanel() {
-  const { push } = useToast();
 <% if (stateManagement === 'redux') { -%>
   const value = useSelector((state<% if (isTypeScript) { %>: RootState<% } %>) => state.counter.value);
   const dispatch = useDispatch();
@@ -48,12 +46,20 @@ export function CounterPanel() {
         <p><%= stackLabels.stateManagement %> example — local interactive counter.</p>
       </header>
 <% if (stateManagement === 'none') { -%>
-      <p className="muted">Client state library was set to None. Add one later under <code>src/store</code>.</p>
+      <p className="muted">
+        Client state library was set to None. Add one later under <code>src/store</code>.
+      </p>
 <% } else { -%>
       <div className="counter">
-        <UiButton onClick={() => { onDec(); push('Decremented', 'info'); }}>−</UiButton>
-        <strong className="counter-value" aria-live="polite">{value}</strong>
-        <UiButton onClick={() => { onInc(); push('Incremented', 'success'); }}>+</UiButton>
+        <UiButton aria-label="Decrement" onClick={onDec}>
+          −
+        </UiButton>
+        <strong className="counter-value" data-testid="counter-value" aria-live="polite">
+          {value}
+        </strong>
+        <UiButton aria-label="Increment" onClick={onInc}>
+          +
+        </UiButton>
       </div>
 <% } -%>
       <p className="panel-note">

package/dist/templates/src/features/feedback/FeedbackForm.tsx.ejs

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 <% if (forms === 'react-hook-form') { -%>
 import { useForm } from 'react-hook-form';
 <% if (validation === 'zod') { -%>
@@ -25,7 +26,6 @@ import { feedbackSchema } from '@/lib/validation';
 import type { FeedbackValues } from '@/lib/validation';
 <% } -%>
 <% } else { -%>
-import { useState } from 'react';
 <% if (validation === 'none') { -%>
 import { validateFeedback<% if (isTypeScript) { %>, type FeedbackValues<% } %> } from '@/lib/validation';
 <% } else { -%>
@@ -33,7 +33,6 @@ import { feedbackSchema<% if (isTypeScript) { %>, type FeedbackValues<% } %> } f
 <% } -%>
 <% } -%>
 import { createFeedback } from '@/services/api';
-import { useToast } from '@/components/ui/Toast';
 import { UiButton } from '@/components/ui/UiButton';
 
 const defaults<% if (isTypeScript) { %>: FeedbackValues<% } %> = {
@@ -43,7 +42,7 @@ const defaults<% if (isTypeScript) { %>: FeedbackValues<% } %> = {
 };
 
 export function FeedbackForm() {
-  const { push } = useToast();
+  const [status, setStatus] = useState<% if (isTypeScript) { %><string | null><% } %>(null);
 
 <% if (forms === 'react-hook-form') { -%>
   const {
@@ -71,7 +70,7 @@ export function FeedbackForm() {
     }
 <% } -%>
     await createFeedback(values);
-    push('Feedback submitted (demo API)', 'success');
+    setStatus('Feedback submitted successfully (demo API).');
     reset();
   };
 
@@ -107,6 +106,11 @@ export function FeedbackForm() {
           {isSubmitting ? 'Sending…' : 'Send feedback'}
         </UiButton>
       </form>
+      {status && (
+        <p className="success-text" role="status">
+          {status}
+        </p>
+      )}
       <p className="panel-note">
         <strong>When to use:</strong> complex forms with validation and async submit.
         <br />
@@ -137,7 +141,7 @@ export function FeedbackForm() {
           feedbackSchema.parse(values);
 <% } -%>
           await createFeedback(values);
-          push('Feedback submitted (demo API)', 'success');
+          setStatus('Feedback submitted successfully (demo API).');
           helpers.resetForm();
         }}
       >
@@ -164,6 +168,11 @@ export function FeedbackForm() {
           </Form>
         )}
       </Formik>
+      {status && (
+        <p className="success-text" role="status">
+          {status}
+        </p>
+      )}
       <p className="panel-note">
         <strong>When to use:</strong> form-heavy screens with Formik's render/props model.
         <br />
@@ -187,7 +196,7 @@ export function FeedbackForm() {
       if (result.error) throw result.error;
 <% } -%>
       await createFeedback(value);
-      push('Feedback submitted (demo API)', 'success');
+      setStatus('Feedback submitted successfully (demo API).');
       form.reset();
     },
   });
@@ -255,6 +264,11 @@ export function FeedbackForm() {
         </form.Field>
         <UiButton type="submit">Send feedback</UiButton>
       </form>
+      {status && (
+        <p className="success-text" role="status">
+          {status}
+        </p>
+      )}
       <p className="panel-note">
         <strong>When to use:</strong> headless, type-safe forms with fine-grained reactivity.
         <br />
@@ -315,7 +329,7 @@ export function FeedbackForm() {
     setIsSubmitting(true);
     try {
       await createFeedback(values);
-      push('Feedback submitted (demo API)', 'success');
+      setStatus('Feedback submitted successfully (demo API).');
       setValues(defaults);
     } finally {
       setIsSubmitting(false);
@@ -362,6 +376,11 @@ export function FeedbackForm() {
           {isSubmitting ? 'Sending…' : 'Send feedback'}
         </UiButton>
       </form>
+      {status && (
+        <p className="success-text" role="status">
+          {status}
+        </p>
+      )}
       <p className="panel-note">
         <strong>When to use:</strong> simple forms without a dedicated form library.
         <br />

package/dist/templates/src/main.tsx.ejs

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { AppProviders } from '@/app/providers';
-import { App } from '@/app/App';
+import { AppProviders } from '@/providers';
+import { App } from '@/App';
 import { initMonitoring } from '@/lib/monitoring';
 import '@/styles/global.<%= styling === 'sass' && uiLibrary !== 'shadcn' ? 'scss' : 'css' %>';
 

package/{templates/src/app → dist/templates/src}/providers.tsx.ejs

@@ -24,7 +24,6 @@ import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
 <% if (uiLibrary === 'mui') { -%>
 import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';
 <% } -%>
-import { ToastProvider } from '@/components/ui/Toast';
 
 <% if (serverState === 'tanstack-query') { -%>
 const queryClient = new QueryClient({
@@ -89,5 +88,5 @@ export function AppProviders({ children }<% if (isTypeScript) { %>: AppProviders
   tree = <ChakraProvider value={defaultSystem}>{tree}</ChakraProvider>;
 <% } -%>
 
-  return <ToastProvider>{tree}</ToastProvider>;
+  return <>{tree}</>;
 }

package/dist/templates/src/routes/AboutPage.tsx.ejs

@@ -4,26 +4,27 @@ export function AboutPage() {
       <h1>About this starter</h1>
       <p>
         Generated with <strong>create-react-starter-kit</strong> using a scalable{' '}
-        <strong>feature-based</strong> layout (domain modules under <code>src/features</code>) —
-        the same organizational approach used across large production React codebases.
+        <strong>feature-based</strong> layout (domain modules under <code>src/features</code>).
       </p>
       <ul className="about-list">
         <li>
-          <strong>Extend features</strong> under <code>src/features/&lt;name&gt;/</code> — keep
-          domain logic close to the UI that owns it.
+          <strong>Routes:</strong> <code>/</code>, <code>/counter</code>, <code>/posts</code>,{' '}
+          <code>/feedback</code>, <code>/about</code>
         </li>
         <li>
-          <strong>Shared primitives</strong> live in <code>src/components/</code> and{' '}
-          <code>src/lib/</code>. Prefer imports via the <code>@/</code> path alias.
+          <strong>Extend features</strong> under <code>src/features/&lt;name&gt;/</code>.
         </li>
         <li>
-          <strong>Docs</strong> in <code>docs/</code> explain architecture, testing, and production
-          habits for this stack.
+          <strong>Shared UI</strong> lives in <code>src/components/</code>. Prefer the{' '}
+          <code>@/</code> path alias.
+        </li>
+        <li>
+          <strong>Bootstrap</strong> is in <code>src/main.<%= jsxExt %></code> with providers in{' '}
+          <code>src/providers.<%= jsxExt %></code> and routing in <code>src/App.<%= jsxExt %></code>.
         </li>
       </ul>
       <p>
-        Prefer reading <code>docs/getting-started.md</code> next, then{' '}
-        <code>docs/selected-stack.md</code> for library-specific guidance.
+        Read <code>docs/getting-started.md</code> next, then <code>docs/selected-stack.md</code>.
       </p>
     </div>
   );

package/dist/templates/src/routes/CounterPage.tsx.ejs

@@ -0,0 +1,17 @@
+import { CounterPanel } from '@/features/counter/CounterPanel';
+
+export function CounterPage() {
+  return (
+    <div className="page">
+      <header className="page-intro">
+        <p className="eyebrow">Client state</p>
+        <h1>Counter</h1>
+        <p className="lede">
+          Interactive counter wired to <strong><%= stackLabels.stateManagement %></strong>. Use this
+          pattern for UI state that is not server cache.
+        </p>
+      </header>
+      <CounterPanel />
+    </div>
+  );
+}

package/dist/templates/src/routes/FeedbackPage.tsx.ejs

@@ -0,0 +1,21 @@
+import { FeedbackForm } from '@/features/feedback/FeedbackForm';
+
+export function FeedbackPage() {
+  return (
+    <div className="page">
+      <header className="page-intro">
+        <p className="eyebrow">Forms</p>
+        <h1>Feedback</h1>
+        <p className="lede">
+          Submit demo feedback with <strong><%= stackLabels.forms %></strong>
+<% if (validation !== 'none') { -%>
+          {' '}
+          and <strong><%= stackLabels.validation %></strong> validation
+<% } -%>
+          .
+        </p>
+      </header>
+      <FeedbackForm />
+    </div>
+  );
+}

package/dist/templates/src/routes/HomePage.tsx.ejs

@@ -1,29 +1,45 @@
-import { CounterPanel } from '@/features/counter/CounterPanel';
-import { PostsPanel } from '@/features/posts/PostsPanel';
-import { FeedbackForm } from '@/features/feedback/FeedbackForm';
+<% if (router === 'react-router') { -%>
+import { Link } from 'react-router-dom';
+<% } else { -%>
+import { Link } from '@tanstack/react-router';
+<% } -%>
 import { StackBadge } from '@/components/StackBadge';
-import { useToast } from '@/components/ui/Toast';
-import { UiButton } from '@/components/ui/UiButton';
 
-export function HomePage() {
-  const { push } = useToast();
+const demos = [
+  {
+    to: '/counter',
+    title: 'Counter',
+    body: 'Client state demo with <%= stackLabels.stateManagement %>.',
+  },
+  {
+    to: '/posts',
+    title: 'Posts',
+    body: 'Server state / data fetching with <%= stackLabels.serverState %>.',
+  },
+  {
+    to: '/feedback',
+    title: 'Feedback',
+    body: 'Forms and validation with <%= stackLabels.forms %><% if (validation !== 'none') { %> + <%= stackLabels.validation %><% } %>.',
+  },
+] as const;
 
+export function HomePage() {
   return (
     <div className="page home-page">
       <section className="hero">
         <p className="eyebrow">Starter workspace</p>
         <h1><%= projectName %></h1>
         <p className="lede">
-          A minimal, production-shaped React app wired for your selected stack. Explore the panels
-          below — each one is a real usage example, not a placeholder.
+          A production-shaped React starter. Open each demo route to explore client state, server
+          data, and forms — each page is a real working example for your selected stack.
         </p>
         <div className="hero-actions">
-          <UiButton onClick={() => push('Toast system is ready', 'success')}>
-            Show toast
-          </UiButton>
-          <a className="text-link" href="/about">
-            Read about the stack →
-          </a>
+          <Link className="ui-button" to="/counter">
+            Open counter demo
+          </Link>
+          <Link className="text-link" to="/about">
+            About this starter →
+          </Link>
         </div>
         <div className="stack-row">
           <StackBadge label="Build" value="<%= stackLabels.buildTool %>" />
@@ -35,12 +51,18 @@ export function HomePage() {
         </div>
       </section>
 
-      <section className="panels">
-<% if (stateManagement !== 'none') { -%>
-        <CounterPanel />
-<% } -%>
-        <PostsPanel />
-        <FeedbackForm />
+      <section className="panels" aria-label="Demo routes">
+        {demos.map((demo) => (
+          <article key={demo.to} className="panel">
+            <header className="panel-header">
+              <h2>{demo.title}</h2>
+              <p>{demo.body}</p>
+            </header>
+            <Link className="text-link" to={demo.to}>
+              Go to {demo.title.toLowerCase()} →
+            </Link>
+          </article>
+        ))}
       </section>
     </div>
   );

package/dist/templates/src/routes/PostsPage.tsx.ejs

@@ -0,0 +1,17 @@
+import { PostsPanel } from '@/features/posts/PostsPanel';
+
+export function PostsPage() {
+  return (
+    <div className="page">
+      <header className="page-intro">
+        <p className="eyebrow">Server state</p>
+        <h1>Posts</h1>
+        <p className="lede">
+          Fetches sample posts via <strong><%= stackLabels.serverState === 'None' ? stackLabels.apiLayer : stackLabels.serverState %></strong>{' '}
+          and <strong><%= stackLabels.apiLayer %></strong>.
+        </p>
+      </header>
+      <PostsPanel />
+    </div>
+  );
+}

package/dist/templates/src/styles/global.css.ejs

@@ -90,10 +90,23 @@ body {
 
 .hero h1,
 .about-page h1,
+.page-intro h1,
 .panel-header h2 {
   @apply m-0 font-display tracking-tight text-slate-900;
 }
 
+.page-intro {
+  @apply mb-6;
+}
+
+.page-intro h1 {
+  @apply mt-2 text-3xl sm:text-4xl;
+}
+
+.success-text {
+  @apply text-sm text-[var(--ok)];
+}
+
 .hero h1 {
   @apply mt-2 text-4xl sm:text-5xl;
 }
@@ -181,27 +194,7 @@ body {
 }
 
 .ui-button {
-  @apply inline-flex items-center justify-center rounded-md bg-brand-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-brand-700 disabled:opacity-50;
-}
-
-.toast-viewport {
-  @apply pointer-events-none fixed bottom-4 right-4 z-50 flex w-80 flex-col gap-2;
-}
-
-.toast {
-  @apply rounded-xl border px-4 py-3 text-sm shadow-lg;
-}
-
-.toast-info {
-  @apply border-slate-200 bg-white text-slate-800;
-}
-
-.toast-success {
-  @apply border-green-200 bg-green-50 text-[var(--ok)];
-}
-
-.toast-error {
-  @apply border-red-200 bg-red-50 text-[var(--bad)];
+  @apply inline-flex items-center justify-center rounded-md bg-brand-600 px-4 py-2 text-sm font-medium text-white no-underline transition hover:bg-brand-700 disabled:opacity-50;
 }
 
 .about-list {
@@ -265,10 +258,6 @@ body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #f8fafc
 .panel-note { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed #e2e8f0; font-size: 0.75rem; line-height: 1.5; }
 .ui-button { appearance: none; border: 0; background: var(--brand); color: #fff; border-radius: 0.5rem; padding: 0.55rem 1rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; }
 .ui-button:disabled { opacity: 0.5; }
-.toast-viewport { position: fixed; right: 1rem; bottom: 1rem; width: 20rem; display: grid; gap: 0.5rem; z-index: 50; }
-.toast { border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.875rem; box-shadow: var(--shadow); background: #fff; border: 1px solid var(--line); }
-.toast-success { background: #f0fdf4; border-color: #bbf7d0; color: var(--ok); }
-.toast-error { background: #fef2f2; border-color: #fecaca; color: var(--bad); }
 .about-list { margin: 1rem 0; padding-left: 1.25rem; }
 <% } else if (styling === 'styled-components') { -%>
 /* Global reset — most styling lives in styled components; keep layout tokens here */
@@ -335,10 +324,6 @@ body {
 .panel-note { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed #e2e8f0; font-size: 0.75rem; line-height: 1.5; }
 .ui-button { appearance: none; border: 0; background: var(--brand); color: #fff; border-radius: 0.5rem; padding: 0.55rem 1rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; }
 .ui-button:disabled { opacity: 0.5; }
-.toast-viewport { position: fixed; right: 1rem; bottom: 1rem; width: 20rem; display: grid; gap: 0.5rem; z-index: 50; }
-.toast { border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.875rem; box-shadow: var(--shadow); background: #fff; border: 1px solid var(--line); }
-.toast-success { background: #f0fdf4; border-color: #bbf7d0; color: var(--ok); }
-.toast-error { background: #fef2f2; border-color: #fecaca; color: var(--bad); }
 .about-list { margin: 1rem 0; padding-left: 1.25rem; }
 <% } else { -%>
 @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
@@ -449,9 +434,5 @@ body {
   padding: 0.55rem 1rem; font-size: 0.875rem; font-weight: 500; cursor: pointer;
   &:disabled { opacity: 0.5; }
 }
-.toast-viewport { position: fixed; right: 1rem; bottom: 1rem; width: 20rem; display: grid; gap: 0.5rem; z-index: 50; }
-.toast { border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.875rem; box-shadow: $shadow; background: #fff; border: 1px solid $line; }
-.toast-success { background: #f0fdf4; border-color: #bbf7d0; color: $ok; }
-.toast-error { background: #fef2f2; border-color: #fecaca; color: $bad; }
 .about-list { margin: 1rem 0; padding-left: 1.25rem; }
 <% } -%>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-react-starter-kit",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Interactive CLI to scaffold a production-ready React app with your preferred stack",
   "keywords": [
     "react",

package/templates/README.md.ejs

@@ -74,21 +74,23 @@ Open the URL printed in the terminal (typically `http://localhost:5173`).
 
 ```text
 src/
-  app/           # App shell, providers, bootstrap
-  assets/        # Images / media imported from code
-  components/    # Shared UI (layout/, ui/)
-  config/        # Env helpers / app config
-  features/      # Domain modules (scalable default)
-  hooks/         # Shared hooks
-  lib/           # Third-party wrappers / helpers
-  routes/        # Route-level pages
-  store/         # Client state
-  services/      # API clients
-  styles/        # Global styles
-  types/         # Shared types
-  utils/         # Pure helpers
-docs/            # Architecture & usage docs
-tests/           # Extra test helpers / e2e
+  App.tsx         # Route tree
+  main.tsx        # Bootstrap / render
+  providers.tsx   # App-wide providers
+  assets/         # Images / media imported from code
+  components/     # Shared UI (layout/, ui/)
+  config/         # Env helpers / app config
+  features/       # Domain modules (scalable default)
+  hooks/          # Shared hooks
+  lib/            # Third-party wrappers / helpers
+  routes/         # Route-level pages
+  store/          # Client state
+  services/       # API clients
+  styles/         # Global styles
+  types/          # Shared types
+  utils/          # Pure helpers
+docs/             # Architecture & usage docs
+tests/            # Unit + e2e helpers
 ```
 
 Organization: **feature-based / domain-driven** with `@/` path aliases. See `docs/architecture.md`.
@@ -123,21 +125,13 @@ Start with `docs/selected-stack.md` and `docs/getting-started.md`.
 
 ## Example usage
 
-The demo page (`/`) shows:
+The demo pages include:
 
-- navigation + layout
-<% if (stateManagement !== 'none') { -%>
-- client state (<%= stackLabels.stateManagement %>)
-<% } -%>
-<% if (serverState !== 'none') { -%>
-- data fetching (<%= stackLabels.serverState %>)
-<% } -%>
-<% if (forms !== 'none') { -%>
-- forms (<%= stackLabels.forms %>)
-<% } -%>
-<% if (validation !== 'none') { -%>
-- validation (<%= stackLabels.validation %>)
-<% } -%>
+- `/` — overview + links to demos
+- `/counter` — client state (<%= stackLabels.stateManagement %>)
+- `/posts` — data fetching (<%= stackLabels.serverState %>)
+- `/feedback` — forms<% if (validation !== 'none') { %> + validation (<%= stackLabels.forms %><% if (validation !== 'none') { %> / <%= stackLabels.validation %><% } %>)<% } else { %> (<%= stackLabels.forms %>)<% } %>
+- `/about` — starter orientation
 - styling (<%= stackLabels.styling %>)
 <% if (uiLibrary !== 'none') { -%>
 - UI primitives (<%= stackLabels.uiLibrary %>)

package/templates/__when_e2eTesting_playwright__/playwright.config.ts.ejs

@@ -1,16 +1,32 @@
 import { defineConfig, devices } from '@playwright/test';
 
+/**
+ * Run once before first e2e: `<%= packageManager === 'npm' ? 'npm run' : packageManager %> test:e2e:install`
+ */
 export default defineConfig({
   testDir: './tests/e2e',
   fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  reporter: process.env.CI ? 'github' : 'list',
   use: {
     baseURL: 'http://127.0.0.1:5173',
     trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
   },
   webServer: {
-    command: '<%= packageManager === 'npm' ? 'npm run dev' : packageManager + ' dev' %>',
+    // Prefer the local binary so e2e works even if a global package manager is missing.
+    command:
+      '<%= buildTool === 'vite'
+        ? 'npx vite --host 127.0.0.1 --port 5173'
+        : packageManager === 'npm'
+          ? 'npm run dev -- --host 127.0.0.1 --port 5173'
+          : packageManager === 'yarn'
+            ? 'yarn dev --host 127.0.0.1 --port 5173'
+            : 'pnpm exec vite --host 127.0.0.1 --port 5173' %>',
     url: 'http://127.0.0.1:5173',
     reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
 });

package/templates/__when_e2eTesting_playwright__/tests/e2e/counter.spec.ts.ejs

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Counter page', () => {
+<% if (stateManagement === 'none') { -%>
+  test('shows empty-state message when no state library is selected', async ({ page }) => {
+    await page.goto('/counter');
+    await expect(page.getByText(/Client state library was set to None/i)).toBeVisible();
+  });
+<% } else { -%>
+  test('increments and decrements the counter', async ({ page }) => {
+    await page.goto('/counter');
+    const value = page.getByTestId('counter-value');
+    await expect(value).toHaveText('0');
+
+    await page.getByRole('button', { name: 'Increment' }).click();
+    await expect(value).toHaveText('1');
+
+    await page.getByRole('button', { name: 'Increment' }).click();
+    await expect(value).toHaveText('2');
+
+    await page.getByRole('button', { name: 'Decrement' }).click();
+    await expect(value).toHaveText('1');
+  });
+<% } -%>
+});