virastack 1.0.6 → 1.1.0-beta.1

package/src/utils/git.js

@@ -10,9 +10,10 @@ export async function isInsideGitRepo(dir) {
 }
 
 /**
- * Best-effort git init + initial commit. Never throws: a missing git binary
- * or an already-initialized repo (e.g. scaffolding into a monorepo) should
- * not fail the whole scaffold. Returns whether a new repo was created.
+ * Best-effort `git init`. Runs before the dependency install so the
+ * template's `prepare` script (husky) can install its hooks. Never throws:
+ * a missing git binary or an existing repo (e.g. a monorepo) should not fail
+ * the scaffold. Returns whether a new repo was created.
  */
 export async function initGitRepo(dir) {
   if (!(await commandExists("git"))) return false;
@@ -20,8 +21,21 @@ export async function initGitRepo(dir) {
 
   try {
     await runCommand("git", ["init"], { cwd: dir });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Commits every file as the initial commit, after all setup steps ran so the
+ * working tree is clean. Hooks are skipped: they lint the user's own changes,
+ * not the generated scaffold. Never throws; returns whether it committed.
+ */
+export async function commitInitial(dir) {
+  try {
     await runCommand("git", ["add", "-A"], { cwd: dir });
-    await runCommand("git", ["commit", "-m", "chore: initial commit from virastack"], {
+    await runCommand("git", ["commit", "--no-verify", "-m", "chore: initial commit from virastack"], {
       cwd: dir,
       env: {
         ...process.env,

package/src/utils/next-agents-md.js

@@ -0,0 +1,40 @@
+import { promises as fs } from "node:fs";
+import path from "node:path";
+
+const BEGIN = "<!-- BEGIN:nextjs-agent-rules -->";
+
+/**
+ * The block Next.js 16.2+ documents for AGENTS.md
+ * (node_modules/next/dist/docs/01-app/02-guides/ai-agents.md): it points
+ * agents at the docs bundled with the installed `next` version. Written
+ * directly instead of running `@next/codemod agents-md`, which only targets
+ * Next.js 16.1 and earlier.
+ */
+export const NEXT_AGENTS_BLOCK = `${BEGIN}
+
+# Next.js: ALWAYS read docs before coding
+
+Before any Next.js work, find and read the relevant doc in \`node_modules/next/dist/docs/\`. Your training data is outdated — the docs are the source of truth.
+
+<!-- END:nextjs-agent-rules -->
+`;
+
+/**
+ * Adds the Next.js block to AGENTS.md. An existing file keeps its content and
+ * gets the block appended; a file that already has the block is left alone.
+ * Returns whether the file changed.
+ */
+export async function writeNextAgentsBlock(targetDir) {
+  const file = path.join(targetDir, "AGENTS.md");
+  let current = null;
+  try {
+    current = await fs.readFile(file, "utf8");
+  } catch {
+    // No AGENTS.md yet.
+  }
+
+  if (current?.includes(BEGIN)) return false;
+  const content = current ? `${current.replace(/\s*$/, "")}\n\n${NEXT_AGENTS_BLOCK}` : NEXT_AGENTS_BLOCK;
+  await fs.writeFile(file, content);
+  return true;
+}

package/src/utils/package-manager.js

@@ -1,3 +1,5 @@
+import { formatAgents, getAiPackageSpec } from "./agents.js";
+
 /**
  * Detects the package manager the CLI was invoked with, mirroring the
  * technique used by create-next-app and create-vite (npm_config_user_agent).
@@ -28,6 +30,7 @@ export function getRunDevCommand(pm) {
   return pm === "npm" ? "npm run dev" : `${pm} dev`;
 }
 
-export function getAiInitCommand() {
-  return "npx --yes @virastack/ai init --force";
+/** Manual ViraStack AI command for the selected agents (never `--force`). */
+export function getAiInitCommand(agents) {
+  return `npx ${getAiPackageSpec()} init --agent ${formatAgents(agents)}`;
 }

package/src/utils/tools.js

@@ -4,7 +4,7 @@
  * - "dependency" tools are added straight to package.json and installed
  *   like any other npm package (e.g. @virastack/mask).
  * - "postinstall-cli" tools ship their own `init` command that writes files
- *   into the target project (e.g. @virastack/ai writes .cursor/rules), so we
+ *   into the target project (e.g. @virastack/ai writes agent rules), so we
  *   shell out to them instead of treating them as a runtime dependency.
  */
 export const TOOLS = [

package/templates/nextjs/.github/workflows/ci.yml

@@ -37,5 +37,8 @@ jobs:
       - name: Knip
         run: pnpm run knip
 
+      - name: Test
+        run: pnpm run test
+
       - name: Build
         run: pnpm run build

package/templates/nextjs/.prettierignore

@@ -4,3 +4,12 @@ pnpm-lock.yaml
 public
 CHANGELOG.md
 .changeset
+
+# Managed by ViraStack AI and the skills CLI
+AGENTS.md
+CLAUDE.md
+.agents
+.claude
+.cursor
+.virastack
+skills-lock.json

package/templates/nextjs/.prettierrc

@@ -28,7 +28,6 @@
     "^@/providers($|/)",
     "^@/stores($|/)",
     "^@/hooks($|/)",
-    "^@/data($|/)",
     "",
     "^@/components($|/)",
     "^@/layout($|/)",

package/templates/nextjs/README.md

@@ -33,10 +33,10 @@ Production-grade Next.js starter with feature-sliced architecture, strict TypeSc
 ## Why ViraStack
 
 - **Opinionated, not opaque** — clear folder rules and placement conventions; nothing important is hidden behind magic
-- **Agent-ready by default** — `AGENTS.md`, Cursor rules, `llms.txt`, and design skills ship with every project
+- **Agent-ready by default** — `AGENTS.md`, rules for Claude Code and Cursor, `llms.txt`, and agent skills ship with every project
 - **Own your UI** — Base UI primitives in `components/ui` (shadcn-style), fully editable
 - **State triad** — TanStack Query (server), Zustand (client), nuqs (URL) — each with a dedicated job
-- **DX that sticks** — ESLint, Prettier, Knip, Husky, Commitlint, and GitHub Actions CI out of the box
+- **DX that sticks** — ESLint, Prettier, Knip, Vitest, Husky, Commitlint, and GitHub Actions CI out of the box
 
 ## Features
 
@@ -48,7 +48,7 @@ Production-grade Next.js starter with feature-sliced architecture, strict TypeSc
 - 🔄 **TanStack Query** · **Zustand** · **nuqs**
 - 📋 **React Hook Form** + **Zod** — validated forms end to end
 - 🤖 **ViraStack AI** — agent context, scoped rules, design skills
-- ✅ **Quality built in** — ESLint, Prettier, Knip, Husky, Commitlint, CI (typecheck → lint → knip → build)
+- ✅ **Quality built in** — ESLint, Prettier, Knip, Husky, Commitlint, Vitest + Testing Library + MSW, CI (typecheck → lint → knip → test → build)
 
 **Optional / bring your own**
 
@@ -89,8 +89,9 @@ Validated in `src/env.ts`. Scaffolded projects already have `.env.local`.
 | `format` / `format:check`       | Prettier                                     |
 | `typecheck`                     | `tsc --noEmit`                               |
 | `knip`                          | Find unused files, exports, and dependencies |
+| `test` / `test:watch`           | Vitest (single run / watch mode)             |
 
-CI runs the same gates: typecheck → lint → knip → build (see `.github/workflows/ci.yml`).
+CI runs the same gates: typecheck → lint → knip → test → build (see `.github/workflows/ci.yml`).
 
 ## Project structure
 
@@ -102,7 +103,6 @@ src/
 │       ├── api/
 │       ├── components/   # Hero, Features, Showcase, demos, LandingPage
 │       ├── constants/
-│       ├── data/
 │       ├── helpers/
 │       ├── hooks/
 │       ├── icons/        # Brand SVGs used only by the landing demo
@@ -124,6 +124,7 @@ src/
 ├── helpers/
 ├── types/
 ├── styles/
+├── test/                 # Vitest setup, MSW server, renderWithProviders
 └── env.ts
 ```
 
@@ -140,8 +141,10 @@ The bundled `landing` feature follows the ViraStack AI feature tree and is meant
 - Default scope is `features/[feature]/` — promote to global `src/` only when a second feature needs it
 - No cross-feature imports; share via `components/`, `lib/`, `hooks/`, etc.
 - Path aliases are mandatory; parent-relative imports (`../`) are forbidden
+- ESLint enforces both rules (`no-restricted-imports` in the ESLint config)
+- Tests live next to the code they cover (`*.test.ts(x)`)
 
-See [`docs/architecture-guide.md`](docs/architecture-guide.md) for placement rules and import conventions.
+See the ViraStack AI `architecture` rule (`.claude/rules/virastack/` or `.cursor/rules/virastack/`) for placement rules and import conventions.
 
 ## Customization
 
@@ -161,15 +164,18 @@ You own every file — trim demos, rename features, keep only what you need.
 
 Developed with [**ViraStack AI**](https://github.com/virastack/ai) — an AI-native architecture kit that ships agent context into every project:
 
-| File              | Purpose                          |
-| :---------------- | :------------------------------- |
-| `AGENTS.md`       | Agent operating guide            |
-| `CLAUDE.md`       | Claude Code entry point          |
-| `.cursor/rules/`  | Scoped coding rules              |
-| `public/llms.txt` | Machine-readable project summary |
-| `.agents/skills/` | Design-taste skills              |
-
-Install or refresh rules: `npx @virastack/ai init`
+| File                       | Purpose                                       |
+| :------------------------- | :-------------------------------------------- |
+| `CLAUDE.md`                | Claude Code entry point (imports `AGENTS.md`) |
+| `.claude/rules/virastack/` | Scoped rules for Claude Code                  |
+| `.claude/skills/`          | Skills for Claude Code                        |
+| `.cursor/rules/virastack/` | Scoped rules for Cursor                       |
+| `AGENTS.md`                | Agent operating guide (managed block + yours) |
+| `.agents/skills/`          | Skills for other agents                       |
+| `.virastack/ai.json`       | Manifest of the files ViraStack AI manages    |
+| `public/llms.txt`          | Machine-readable project summary              |
+
+Install or refresh rules: `npx @virastack/ai init` (pick tools with `--agent claude,cursor`).
 
 ## Deployment
 

package/templates/nextjs/eslint.config.mjs

@@ -1,7 +1,47 @@
+import { existsSync, readdirSync } from "node:fs";
+
 import nextVitals from "eslint-config-next/core-web-vitals";
 import nextTs from "eslint-config-next/typescript";
 import { defineConfig, globalIgnores } from "eslint/config";
 
+const PARENT_IMPORT = {
+  group: ["../*"],
+  message: "Use a path alias (@/...) instead of a parent-relative import.",
+};
+
+// Feature boundaries: a feature may import itself, never another feature.
+const featuresDir = new URL("./src/features", import.meta.url);
+const features = existsSync(featuresDir)
+  ? readdirSync(featuresDir, { withFileTypes: true })
+      .filter((entry) => entry.isDirectory())
+      .map((entry) => entry.name)
+  : [];
+
+const boundaries = [
+  {
+    files: ["src/**/*.{ts,tsx}"],
+    rules: { "no-restricted-imports": ["error", { patterns: [PARENT_IMPORT] }] },
+  },
+  ...features.map((feature) => ({
+    files: [`src/features/${feature}/**/*.{ts,tsx}`],
+    rules: {
+      "no-restricted-imports": [
+        "error",
+        {
+          patterns: [
+            PARENT_IMPORT,
+            {
+              group: ["@/features/*", `!@/features/${feature}`, `!@/features/${feature}/**`],
+              message:
+                "Features must not import each other. Move shared code to src/ (components, lib, hooks, ...).",
+            },
+          ],
+        },
+      ],
+    },
+  })),
+];
+
 const eslintConfig = defineConfig([
   ...nextVitals,
   ...nextTs,
@@ -14,6 +54,7 @@ const eslintConfig = defineConfig([
       "no-console": ["warn", { allow: ["warn", "error"] }],
     },
   },
+  ...boundaries,
   // Override default ignores of eslint-config-next.
   globalIgnores([
     // Default ignores of eslint-config-next:

package/templates/nextjs/knip.config.js

@@ -14,6 +14,8 @@ const config = {
     "src/constants/index.ts",
   ],
   ignoreDependencies: ["tailwindcss", "tw-animate-css"],
+  // next-env.d.ts imports route types that exist only after `next dev` or `next build`.
+  ignoreUnresolved: [/^\.\/\.next\//],
   rules: {
     dependencies: "error",
     exports: "warn",

package/templates/nextjs/package.json

@@ -2,7 +2,7 @@
   "name": "virastack",
   "version": "1.0.0",
   "private": true,
-  "description": "Premium Next.js 16 + React 19 + Tailwind CSS 4 boilerplate focused on clean architecture, UI/UX, and agent-ready developer experience.",
+  "description": "Next.js 16 + React 19 + Tailwind CSS 4 boilerplate focused on clean architecture, UI/UX, and agent-ready developer experience.",
   "author": {
     "name": "Ömer Gülçiçek (ViraStack)",
     "email": "iletisim@omergulcicek.com",
@@ -38,6 +38,8 @@
     "lint:fix": "eslint . --fix --cache && prettier --write .",
     "lint:ci": "eslint . --max-warnings=0 && prettier --check .",
     "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "prepare": "husky",
     "changeset": "changeset",
     "changeset:version": "changeset version",
@@ -75,8 +77,8 @@
     "@tanstack/react-query-devtools": "^5.101.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "framer-motion": "^12.42.2",
     "lucide-react": "^1.25.0",
+    "motion": "^12.43.0",
     "next": "16.2.11",
     "next-themes": "^0.4.6",
     "nuqs": "^2.9.1",
@@ -95,21 +97,30 @@
     "@commitlint/config-conventional": "^21.2.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.1",
     "@tailwindcss/postcss": "^4",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/jest-dom": "^6.10.0",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.8",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^6.0.1",
     "babel-plugin-react-compiler": "1.0.0",
     "cross-env": "^10.1.0",
     "eslint": "^9",
     "eslint-config-next": "16.2.11",
     "husky": "^9.1.7",
+    "jsdom": "^27.4.0",
     "knip": "^6.28.0",
     "lint-staged": "^17.1.1",
+    "msw": "^2.15.0",
     "prettier": "^3.9.6",
     "prettier-plugin-tailwindcss": "^0.8.1",
     "rimraf": "^6.1.3",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^5"
+    "typescript": "^6.0.3",
+    "vite": "^8.0.0",
+    "vitest": "^4.1.12"
   }
 }

package/templates/nextjs/pnpm-workspace.yaml

@@ -1,3 +1,4 @@
 ignoredBuiltDependencies:
+  - msw
   - sharp
   - unrs-resolver

package/templates/nextjs/public/llms.txt

@@ -1,24 +1,25 @@
 # ViraStack Start — Next.js Edition
 
-> Premium Next.js 16 + React 19 + Tailwind CSS 4 boilerplate focused on clean architecture, UI/UX, and agent-ready developer experience. Auth, database/ORM, i18n, and testing are intentionally omitted — bring the solution that fits your project.
+> Next.js 16 + React 19 + Tailwind CSS 4 boilerplate focused on clean architecture, UI/UX, and agent-ready developer experience. Auth, database/ORM, and i18n are intentionally omitted — bring the solution that fits your project.
 
 Built on the App Router with Server/Client Components, streaming, and the Metadata API. UI primitives use **Base UI** (unstyled, accessible) styled with Tailwind CSS 4 design tokens. State is split by job: TanStack Query for server state, Zustand for client state, `nuqs` for URL state. Forms use React Hook Form + Zod. The home route renders a deletable `features/landing` demo that follows the canonical ViraStack feature tree. **ViraStack AI** (`@virastack/ai`) adds agent rules on scaffold; design skills come from [emilkowalski/skills](https://github.com/emilkowalski/skills) and [make-interfaces-feel-better](https://github.com/jakubkrehel/make-interfaces-feel-better).
 
-- Tech stack: Next.js 16, React 19, Tailwind CSS 4, TypeScript 5 (strict + `noUncheckedIndexedAccess`), Node.js `>=20.9`
-- UI: Base UI, Framer Motion, Sonner, Lucide React, `next-themes`, `class-variance-authority`
+- Tech stack: Next.js 16, React 19, Tailwind CSS 4, TypeScript 6 (strict + `noUncheckedIndexedAccess`), Node.js `>=20.9`
+- UI: Base UI, Motion, Sonner, Lucide React, `next-themes`, `class-variance-authority`
 - Data & state: TanStack Query 5, Zustand, `nuqs`
 - Forms: React Hook Form + Zod (+ `@hookform/resolvers`)
+- Testing: Vitest, React Testing Library, user-event, jest-dom, MSW (`src/test/`)
 - API: Native `fetch` wrapper in `src/lib/api.ts` (`ApiError` with `message`, `status`, `data`); Axios is optional, not installed
 - Env: Hand-rolled Zod schema in `src/env.ts` (no `@t3-oss/env-nextjs`)
 - Tooling: ESLint 9, Prettier 3, Husky, Knip, Commitlint, Changesets, `@next/bundle-analyzer`
-- Quality scripts: `pnpm typecheck`, `pnpm lint` / `lint:ci`, `pnpm knip`, `pnpm build`
-- ViraStack AI (via `npx @virastack/ai init`): `AGENTS.md`, `CLAUDE.md`, `.cursor/rules/*.mdc`, `docs/*`
-- Not included by default: Auth, DB/ORM, i18n (`next-intl` not installed), test runner, CSP
+- Quality scripts: `pnpm typecheck`, `pnpm lint` / `lint:ci`, `pnpm knip`, `pnpm test`, `pnpm build`
+- ViraStack AI (via `npx @virastack/ai init`): `AGENTS.md`, `CLAUDE.md`, `.claude/rules/virastack/`, `.cursor/rules/virastack/`, `.virastack/ai.json`
+- Not included by default: Auth, DB/ORM, i18n (`next-intl` not installed), CSP
 
 ## Docs
 - [Repository (GitHub)](https://github.com/virastack/start): CLI and templates
 - [README](https://github.com/virastack/start/tree/main/templates/nextjs): Features, structure, and conventions
-- [Architecture guide](https://github.com/virastack/ai/blob/main/templates/core/docs/architecture-guide.md): Placement rules and import conventions
+- [Architecture guide](https://github.com/virastack/ai/blob/main/templates/rules/architecture.mdc): Placement rules and import conventions
 - [Product docs](https://virastack.com/start/docs): ViraStack Start documentation
 - [Start llms-full.txt](https://virastack.com/start/llms-full.txt): CLI flags and template map for agents
 - [Ecosystem llms.txt](https://virastack.com/llms.txt): All ViraStack products
@@ -57,7 +58,7 @@ Canonical tree under `src/features/landing/`. Home page composes `LandingPage`.
 - [`src/features/landing/hooks/use-users.ts`](https://github.com/virastack/start/blob/main/templates/nextjs/src/features/landing/hooks/use-users.ts): Feature TanStack Query hook
 - [`src/features/landing/stores/counter.store.ts`](https://github.com/virastack/start/blob/main/templates/nextjs/src/features/landing/stores/counter.store.ts): Feature Zustand store
 - [`src/features/landing/schemas/project.schema.ts`](https://github.com/virastack/start/blob/main/templates/nextjs/src/features/landing/schemas/project.schema.ts): Feature Zod schema
-- [`src/features/landing/data/features.data.tsx`](https://github.com/virastack/start/blob/main/templates/nextjs/src/features/landing/data/features.data.tsx): Feature static data
+- [`src/features/landing/constants/features.constants.tsx`](https://github.com/virastack/start/blob/main/templates/nextjs/src/features/landing/constants/features.constants.tsx): Feature static lists
 - [`src/features/landing/helpers/`](https://github.com/virastack/start/tree/main/templates/nextjs/src/features/landing/helpers): Feature helpers (motion tokens, initials)
 - [`src/features/landing/icons/`](https://github.com/virastack/start/tree/main/templates/nextjs/src/features/landing/icons): Brand SVGs used only by the landing demo
 - [`src/features/landing/types/user.types.ts`](https://github.com/virastack/start/blob/main/templates/nextjs/src/features/landing/types/user.types.ts): Feature types
@@ -79,11 +80,12 @@ Quick start: delete `src/features/landing`, replace `src/app/page.tsx`, keep `co
 - Default scope is `features/[feature]/` — promote to global `src/` only when a second feature needs it. No cross-feature imports.
 
 ## ViraStack AI
-- Install or refresh: `npx @virastack/ai init --force`
+- Install or refresh: `npx @virastack/ai init`
 - `AGENTS.md`: Agent operating guide (all agents)
 - `CLAUDE.md`: Claude Code entry point (`@AGENTS.md`)
-- `.cursor/rules/*.mdc`: Scoped coding rules (Cursor auto-loads)
-- `docs/architecture-guide.md`, `docs/MEMORIES.md`: Architecture and project memory
+- `.claude/rules/virastack/*.md`: Scoped coding rules (Claude Code auto-loads)
+- `.cursor/rules/virastack/*.mdc`: Scoped coding rules (Cursor auto-loads)
+- `.virastack/ai.json`: Installed rule manifest (commit it)
 - Skills: [emilkowalski/skills](https://github.com/emilkowalski/skills) (7 design-engineering skills) + [make-interfaces-feel-better](https://github.com/jakubkrehel/make-interfaces-feel-better)
 - Package: [`@virastack/ai`](https://github.com/virastack/ai)
 

package/templates/nextjs/src/config/site.config.ts

@@ -5,7 +5,7 @@ import { env } from "@/env";
 export const siteConfig: SiteConfig = {
   name: env.NEXT_PUBLIC_APP_NAME,
   description:
-    "Premium Next.js boilerplate built for scalable UI/UX, clean architecture, and agent-ready developer experience.",
+    "Next.js boilerplate built for scalable UI/UX, clean architecture, and agent-ready developer experience.",
   url: env.NEXT_PUBLIC_APP_URL,
   ogImage: `${env.NEXT_PUBLIC_APP_URL}/og.png`,
   links: {

package/templates/nextjs/src/features/landing/api/get-users.api.test.ts

@@ -0,0 +1,34 @@
+import { http, HttpResponse } from "msw";
+import { describe, expect, it } from "vitest";
+
+import { ApiError } from "@/lib/api";
+
+import { getUsers } from "@/features/landing/api";
+import type { User } from "@/features/landing/types";
+import { server } from "@/test/server";
+
+const USERS_URL = "https://jsonplaceholder.typicode.com/users";
+
+const users: User[] = [
+  {
+    id: 1,
+    name: "Ada Lovelace",
+    username: "ada",
+    email: "ada@example.com",
+    address: { city: "London" },
+  },
+];
+
+describe("getUsers", () => {
+  it("returns the users from the API", async () => {
+    server.use(http.get(USERS_URL, () => HttpResponse.json(users)));
+
+    await expect(getUsers()).resolves.toEqual(users);
+  });
+
+  it("throws an ApiError when the API fails", async () => {
+    server.use(http.get(USERS_URL, () => HttpResponse.json({ message: "Down" }, { status: 503 })));
+
+    await expect(getUsers()).rejects.toBeInstanceOf(ApiError);
+  });
+});

package/templates/nextjs/src/features/landing/api/index.ts

@@ -1,2 +1,3 @@
 export { getUsers } from "@/features/landing/api/get-users.api";
 export { userKeys } from "@/features/landing/api/query-keys";
+export { usersQueryOptions } from "@/features/landing/api/user.queries";

package/templates/nextjs/src/features/landing/api/user.queries.ts

@@ -0,0 +1,10 @@
+import { queryOptions } from "@tanstack/react-query";
+
+import { getUsers } from "@/features/landing/api/get-users.api";
+import { userKeys } from "@/features/landing/api/query-keys";
+
+export const usersQueryOptions = () =>
+  queryOptions({
+    queryKey: userKeys.list(),
+    queryFn: ({ signal }) => getUsers(signal),
+  });

package/templates/nextjs/src/features/landing/components/CartDemo.test.tsx

@@ -0,0 +1,22 @@
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import { CartDemo } from "@/features/landing/components/CartDemo";
+import { renderWithProviders } from "@/test/render";
+
+describe("CartDemo", () => {
+  it("adds items and enables removing them", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<CartDemo />);
+
+    const decrement = screen.getByRole("button", { name: "Decrement" });
+    expect(decrement).toBeDisabled();
+
+    await user.click(screen.getByRole("button", { name: "Increment" }));
+    await user.click(screen.getByRole("button", { name: "Increment" }));
+
+    expect(screen.getByText("700")).toBeInTheDocument();
+    expect(decrement).toBeEnabled();
+  });
+});

package/templates/nextjs/src/features/landing/components/Features.tsx

@@ -1,5 +1,5 @@
 import { RevealGroup, RevealItem } from "@/features/landing/components/Reveal";
-import { FEATURES } from "@/features/landing/data";
+import { FEATURES } from "@/features/landing/constants";
 import { featureCardClassName } from "@/features/landing/helpers";
 
 export function Features() {

package/templates/nextjs/src/features/landing/components/Hero.tsx

@@ -12,7 +12,7 @@ export function Hero() {
     <section className="mx-auto flex max-w-3xl flex-col items-center gap-6 px-6 pt-24 pb-16 text-center">
       <Reveal mode="mount" delay={0} y={-8}>
         <span className="rounded-full border border-border px-3 py-1 text-xs font-medium text-muted-foreground">
-          Premium UI/UX · Agent-ready · Zero bloat
+          UI/UX · Agent-ready · Zero bloat
         </span>
       </Reveal>
 
@@ -49,14 +49,13 @@ export function Hero() {
 
       <Reveal mode="mount" delay={0.1} className="mt-2 flex items-center gap-2">
         <Button
-          className="h-10 px-4 py-2"
           nativeButton={false}
           render={<Link href={siteConfig.links.github} target="_blank" rel="noreferrer" />}
         >
           <span>⭐</span>
           <span>Star on GitHub</span>
         </Button>
-        <div className="h-10 w-10 [&>button]:h-full [&>button]:w-full">
+        <div className="h-9 w-9 [&>button]:h-full [&>button]:w-full">
           <ThemeToggle />
         </div>
       </Reveal>

package/templates/nextjs/src/features/landing/components/Reveal.tsx

@@ -2,7 +2,7 @@
 
 import type { ReactNode } from "react";
 
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 
 import { fadeInUp, staggerContainer, viewport } from "@/features/landing/helpers";
 

package/templates/nextjs/src/features/landing/constants/index.ts

@@ -0,0 +1 @@
+export { FEATURES } from "@/features/landing/constants/features.constants";

package/templates/nextjs/src/features/landing/helpers/get-initials.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+
+import { getInitials } from "@/features/landing/helpers/get-initials";
+
+describe("getInitials", () => {
+  it("uses the first and last name", () => {
+    expect(getInitials("Ada King Lovelace")).toBe("AL");
+  });
+
+  it("uses one letter for a single name", () => {
+    expect(getInitials("  grace ")).toBe("G");
+  });
+
+  it("falls back to a question mark for an empty name", () => {
+    expect(getInitials("   ")).toBe("?");
+  });
+});

package/templates/nextjs/src/features/landing/hooks/use-users.ts

@@ -2,15 +2,12 @@
 
 import { useQuery } from "@tanstack/react-query";
 
-import { getUsers, userKeys } from "@/features/landing/api";
+import { usersQueryOptions } from "@/features/landing/api";
 
 /**
  * Example TanStack Query hook. Lives with the landing demo feature —
  * delete `src/features/landing` when you start your real product.
  */
 export function useUsers() {
-  return useQuery({
-    queryKey: userKeys.list(),
-    queryFn: ({ signal }) => getUsers(signal),
-  });
+  return useQuery(usersQueryOptions());
 }