Skip to content

chore: audit and fix base templates#58

Open
ulises-jeremias wants to merge 2 commits intomainfrom
chore/template-audit-fixes
Open

chore: audit and fix base templates#58
ulises-jeremias wants to merge 2 commits intomainfrom
chore/template-audit-fixes

Conversation

@ulises-jeremias
Copy link
Copy Markdown
Member

@ulises-jeremias ulises-jeremias commented Mar 13, 2026

Summary

  • audit base templates against real generated projects and real create-awesome-node-app runs
  • refresh starter UX for Next.js, React Vite, web-extension, and NestJS templates
  • fix template regressions across Next.js, web-extension, WebdriverIO, turborepo, and Next.js SaaS AI
  • harden combo-testing docs and workflow coverage

Validation

  • generated and exercised base templates with real command runs
  • confirmed react-vite-boilerplate, nestjs-boilerplate, nextjs-starter, web-extension-react-boilerplate, turborepo-boilerplate, and nextjs-saas-ai-starter
  • confirmed webdriverio-boilerplate through format, lint:fix, lint, and type-check; runtime test still depends on external WebDriver binary download in this environment

Summary by CodeRabbit

Release Notes

  • New Features

    • Added health check endpoint to NestJS starter template
    • Introduced status metadata endpoint for better application observability
  • Chores

    • Enhanced CI/CD pipeline with lint and type-check validation steps
    • Updated starter templates with improved UI/branding, refined layouts, and updated styling
    • Updated template configurations and dependencies across multiple starter projects

Validate base templates with real create-awesome-node-app runs and fix the issues found across Next.js, NestJS, React Vite, web-extension, WebdriverIO, and turborepo templates.

Also harden combo testing docs/workflow and align generated files with current package/template conventions.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 13, 2026

📝 Walkthrough

Walkthrough

This PR updates multiple starter templates and CI/CD workflows. Changes include: adding a health endpoint to the NestJS starter with structured status/health responses; redesigning the Next.js starter UI with updated CSS tokens, layout, and homepage components; refactoring the React Vite starter landing page structure; modernizing WebExtension starter TypeScript configuration and popup styling; adding a CI-specific build script to the NextJS SaaS AI template; and updating template type declarations and dependencies across turborepo and other templates.

Changes

Cohort / File(s) Summary
CI/CD Workflows
.github/workflows/test-combinations.yml, templates/nextjs-saas-ai-starter/.github/workflows/build.yml
Added CI environment variable and lint/type-check steps to test workflow; replaced explicit env var with build:ci script invocation in NextJS SaaS AI build workflow.
NestJS Starter — Controllers & Services
templates/nestjs-starter/src/app.controller.ts, templates/nestjs-starter/src/app.service.ts, templates/nestjs-starter/src/health/health.controller.ts
Renamed AppController.getHello() to getStatus() returning AppStatusResponse; introduced getHealth() method; added new HealthController with GET /health route; created AppStatusResponse and AppHealthResponse types.
NestJS Starter — Module & Tests
templates/nestjs-starter/src/app.module.ts, templates/nestjs-starter/src/app.controller.spec.ts, templates/nestjs-starter/src/health/health.controller.spec.ts
Registered HealthController in AppModule; updated controller test from getHello to getStatus with richer assertions; added new test suite for HealthController with mocked AppService.
Next.js Starter — Styling
templates/nextjs-starter/[src]/app/globals.css, templates/nextjs-starter/[src]/app/page.module.css
Simplified global CSS tokens (removed legacy values, added foreground/muted/surface/border-rgb); redesigned page layout with hero, badge, grid, and card styling with updated spacing, borders, shadows, and responsive adjustments.
Next.js Starter — Page & Metadata
templates/nextjs-starter/[src]/app/layout.tsx, templates/nextjs-starter/[src]/app/page.tsx
Updated metadata title/description; restructured homepage with brand hero, quickStartSteps data, feature grid, checklist, and simplified resource links replacing previous card-based layout.
Next.js Starter — Dependencies
templates/nextjs-starter/package.json
Added autoprefixer devDependency (^10.4.23).
React Vite Starter
templates/react-vite-starter/[src]/pages/Landing.css, templates/react-vite-starter/[src]/pages/Landing.tsx.template
Redesigned landing container with modular .landing\_\* components; replaced Cracked wrapper with full section markup including brand, title, meta, and highlights list.
Template Declarations
templates.json, TESTING.md
Updated NextJS SaaS AI template type from "nextjs" to "nextjs-saas-ai"; expanded extension type declarations to support new template type; updated CI/CD testing documentation with new lint/type-check step ordering.
Turborepo Starter — Interfaces & Config
templates/turborepo-starter/apps/playground/src/stories/Button.tsx, templates/turborepo-starter/apps/playground/src/stories/Header.tsx
Exported ButtonProps and HeaderProps interfaces for public API access.
Turborepo Starter — Dependencies & Config
templates/turborepo-starter/package/index.js, templates/turborepo-starter/packages/eslint-config-react/package.json.template, templates/turborepo-starter/packages/ui/package.json.template
Made ESLint config dependency dynamic based on scope; replaced eslint-config-react-hooks with individual plugin dependencies; added react-dom to UI package dependencies and devDependencies.
WebDriver.io Starter
templates/wdio-starter/tsconfig.json
Updated TypeScript target from es2017 to es2022; added lib entry and enabled skipLibCheck.
WebExtension Starter — Refactoring
templates/webextension-react-vite-starter/.webext-config/reload/injections/view.ts, templates/webextension-react-vite-starter/[src]/content/App.test.tsx
Replaced logical expression with explicit conditional block for readability; removed content App test file.
WebExtension Starter — Popup UI
templates/webextension-react-vite-starter/[src]/popup/Popup.css, templates/webextension-react-vite-starter/[src]/popup/Popup.tsx.template, templates/webextension-react-vite-starter/[src]/popup/index.css
Redesigned popup layout with modular .popup\_\* components and button; added CSS variables for theming; introduced Browser polyfill and openOptions helper with dynamic button state.
WebExtension Starter — TypeScript Config
templates/webextension-react-vite-starter/eslint.config.mjs.template, templates/webextension-react-vite-starter/package/index.js, templates/webextension-react-vite-starter/tsconfig.json.template, templates/webextension-react-vite-starter/tsconfig.node.json
Broadened ESLint ignore pattern for .d.ts files; enhanced build and type-check scripts with multi-pass tsconfig validation; refactored tsconfig includes/excludes and removed references mechanism; updated tsconfig.node.json with extends, new compiler options, and streamlined includes.
NextJS SaaS AI Starter
templates/nextjs-saas-ai-starter/package.json
Added build:ci script with SKIP_ENV_VALIDATION=true for CI environments.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐰 New templates bloom in springtime's light,
With health checks dancing, statuses bright,
NextJS pages redesigned with care,
TypeScript configs perfected everywhere,
From NestJS controllers to popup windows grand—
The rabbit's templates improve the land! 🌱

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'chore: audit and fix base templates' accurately describes the main objective—auditing and fixing template regressions across multiple base templates. It is concise, clear, and directly reflects the primary work in the changeset.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch chore/template-audit-fixes
📝 Coding Plan
  • Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

🧹 Nitpick comments (5)
templates/react-vite-starter/[src]/pages/Landing.css (1)

32-37: Consider adjusting line-height for title to avoid text clipping.

A line-height of 0.95 may clip descenders (letters like g, y, p) and cause accessibility issues with text readability, especially at larger font sizes. Consider using at least 1.1 for headings.

✨ Suggested adjustment
 .landing__title {
   margin: 0 0 0.75rem;
   font-size: clamp(2.4rem, 8vw, 4.25rem);
-  line-height: 0.95;
+  line-height: 1.1;
   letter-spacing: -0.05em;
 }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@templates/react-vite-starter/`[src]/pages/Landing.css around lines 32 - 37,
The .landing__title CSS rule currently sets line-height: 0.95 which can clip
descenders at large font sizes; update the .landing__title selector to use a
safer line-height (e.g., at least 1.1) to prevent clipping and improve
readability/ accessibility across viewport sizes while keeping the existing
font-size clamp and other properties unchanged.
templates/nestjs-starter/src/health/health.controller.ts (1)

8-11: Add a dedicated spec for the new /health controller path.

This endpoint is newly introduced but currently lacks direct controller-level test coverage; adding a focused spec will prevent regressions in starter templates.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@templates/nestjs-starter/src/health/health.controller.ts` around lines 8 -
11, Add a unit spec for the new /health controller by creating a
health.controller.spec.ts that imports HealthController and a mocked AppService;
set up a TestingModule that provides HealthController and a stub for
appService.getHealth(), then assert that controller.getHealth() returns the
expected AppHealthResponse shape/value. Specifically target the getHealth()
method on HealthController, mock AppService.getHealth() to return a known
AppHealthResponse, and verify the controller delegates to the service and
returns the mock result to prevent regressions in the starter template.
templates/webextension-react-vite-starter/[src]/popup/Popup.tsx.template (1)

6-10: Consider providing user feedback when openOptionsPage is unavailable.

The defensive check is good, but if openOptionsPage is undefined (which is rare but possible in some contexts), clicking the button silently does nothing. An optional improvement would be to provide feedback or disable the button when the API is unavailable.

💡 Optional: Add fallback feedback
 const openOptions = () => {
   if (Browser.runtime.openOptionsPage) {
     Browser.runtime.openOptionsPage();
+  } else {
+    console.warn('Options page API not available');
   }
 };

Alternatively, you could conditionally render the button only when the API is available.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@templates/webextension-react-vite-starter/`[src]/popup/Popup.tsx.template
around lines 6 - 10, The openOptions function currently checks
Browser.runtime.openOptionsPage but leaves the UI silent if it's unavailable;
update the Popup UI to either disable or hide the "Open options" button when
Browser.runtime.openOptionsPage is falsy, or provide immediate feedback (e.g.,
showToast/alert) inside openOptions when the API is missing; locate the
openOptions function and the button render in Popup (symbols: openOptions,
Browser.runtime.openOptionsPage, Popup component or the button element) and
implement a conditional render/disabled prop or a fallback notification so users
get explicit feedback instead of no-op behavior.
templates/webextension-react-vite-starter/[src]/popup/Popup.css (2)

84-86: Consider adding a focus state for keyboard accessibility.

The hover state is defined, but a :focus or :focus-visible state would improve keyboard navigation accessibility for the button.

💡 Optional: Add focus state
 .popup__button:hover {
   filter: brightness(1.05);
 }
+
+.popup__button:focus-visible {
+  outline: 2px solid var(--popup-accent);
+  outline-offset: 2px;
+}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@templates/webextension-react-vite-starter/`[src]/popup/Popup.css around lines
84 - 86, Add a keyboard focus state for the popup button to match the hover
affordance: update the .popup__button selector by adding a :focus and/or
:focus-visible rule (e.g., .popup__button:focus, .popup__button:focus-visible)
that applies an accessible visual treatment such as the same filter:
brightness(1.05) used on hover and a visible outline or box-shadow for keyboard
users; ensure the focus style is not removed by outline: none so it remains
perceivable.

70-82: Consider using CSS variables for button colors for theming consistency.

The button uses hardcoded color values while the rest of the stylesheet relies on CSS variables. For full theming support, these could be extracted to variables.

💡 Optional: Extract button colors to CSS variables

In index.css, add:

--popup-button-gradient-start: `#3b82f6`;
--popup-button-gradient-end: `#2563eb`;
--popup-button-text: `#eff6ff`;

Then in Popup.css:

 .popup__button {
   ...
-  background: linear-gradient(135deg, `#3b82f6`, `#2563eb`);
-  color: `#eff6ff`;
+  background: linear-gradient(135deg, var(--popup-button-gradient-start), var(--popup-button-gradient-end));
+  color: var(--popup-button-text);
   ...
 }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@templates/webextension-react-vite-starter/`[src]/popup/Popup.css around lines
70 - 82, The .popup__button rule uses hardcoded colors; extract those values
into CSS variables (e.g., --popup-button-gradient-start,
--popup-button-gradient-end, --popup-button-text) defined in your global
stylesheet (index.css) and replace the gradient and color declarations in
Popup.css to reference these variables so theming is consistent across the app.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@templates/nestjs-starter/src/app.controller.spec.ts`:
- Around line 15-16: The test suite label is stale: update the describe block
currently named 'getHello' to 'getStatus' so it matches the method under test
(getStatus) in app.controller.spec.ts; locate the describe('getHello', ...) and
rename it to describe('getStatus', ...) so test reports accurately reflect the
tested method.

In `@templates/nextjs-saas-ai-starter/cna.config.json`:
- Around line 2-15: The custom prompts "srcDir" and "projectImportPath" are
collected but not applied to generated files; update the template system to
substitute these values into template placeholders (e.g., replace hardcoded
"@/*" and "./src/*" in tsconfig.json and any import/path occurrences) or remove
the prompts. Concretely, wire the "srcDir" and "projectImportPath" variables
into the template rendering step so generated artifacts (tsconfig.json, import
aliases, documentation examples) use the provided values instead of defaults,
ensuring placeholders exist where "srcDir" and "projectImportPath" are
referenced and are replaced at generation time.

In `@templates/nextjs-saas-ai-starter/package.json`:
- Line 5: The "build" script currently sets SKIP_ENV_VALIDATION=true which
disables critical env checks for all developers; remove the SKIP_ENV_VALIDATION
setting from the "build" script so it runs as "NODE_ENV=production next build",
and add a new CI-only script (e.g., "build:ci") that sets
SKIP_ENV_VALIDATION=true for CI runs; update CI/deployment configs to call "npm
run build:ci" instead of "npm run build".

In `@templates/nextjs-starter/`[src]/app/page.module.css:
- Around line 90-91: Replace the fixed 50% column sizes at the tablet breakpoint
with fractional tracks so the grid and the 1rem gap fit inside the container;
specifically change the rule that sets "grid-template-columns: 50% 50%;" to use
fractional tracks like "grid-template-columns: repeat(2, minmax(0, 1fr));" (or
"1fr 1fr") so the grid uses available space correctly while keeping "gap: 1rem"
unchanged; update all occurrences that set two 50% columns (the tablet
breakpoint rules referenced) to this fractional form.

---

Nitpick comments:
In `@templates/nestjs-starter/src/health/health.controller.ts`:
- Around line 8-11: Add a unit spec for the new /health controller by creating a
health.controller.spec.ts that imports HealthController and a mocked AppService;
set up a TestingModule that provides HealthController and a stub for
appService.getHealth(), then assert that controller.getHealth() returns the
expected AppHealthResponse shape/value. Specifically target the getHealth()
method on HealthController, mock AppService.getHealth() to return a known
AppHealthResponse, and verify the controller delegates to the service and
returns the mock result to prevent regressions in the starter template.

In `@templates/react-vite-starter/`[src]/pages/Landing.css:
- Around line 32-37: The .landing__title CSS rule currently sets line-height:
0.95 which can clip descenders at large font sizes; update the .landing__title
selector to use a safer line-height (e.g., at least 1.1) to prevent clipping and
improve readability/ accessibility across viewport sizes while keeping the
existing font-size clamp and other properties unchanged.

In `@templates/webextension-react-vite-starter/`[src]/popup/Popup.css:
- Around line 84-86: Add a keyboard focus state for the popup button to match
the hover affordance: update the .popup__button selector by adding a :focus
and/or :focus-visible rule (e.g., .popup__button:focus,
.popup__button:focus-visible) that applies an accessible visual treatment such
as the same filter: brightness(1.05) used on hover and a visible outline or
box-shadow for keyboard users; ensure the focus style is not removed by outline:
none so it remains perceivable.
- Around line 70-82: The .popup__button rule uses hardcoded colors; extract
those values into CSS variables (e.g., --popup-button-gradient-start,
--popup-button-gradient-end, --popup-button-text) defined in your global
stylesheet (index.css) and replace the gradient and color declarations in
Popup.css to reference these variables so theming is consistent across the app.

In `@templates/webextension-react-vite-starter/`[src]/popup/Popup.tsx.template:
- Around line 6-10: The openOptions function currently checks
Browser.runtime.openOptionsPage but leaves the UI silent if it's unavailable;
update the Popup UI to either disable or hide the "Open options" button when
Browser.runtime.openOptionsPage is falsy, or provide immediate feedback (e.g.,
showToast/alert) inside openOptions when the API is missing; locate the
openOptions function and the button render in Popup (symbols: openOptions,
Browser.runtime.openOptionsPage, Popup component or the button element) and
implement a conditional render/disabled prop or a fallback notification so users
get explicit feedback instead of no-op behavior.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 003b57d7-d4e5-437d-b04c-07a936502632

📥 Commits

Reviewing files that changed from the base of the PR and between 5be2ebe and 396266f.

📒 Files selected for processing (36)
  • .github/workflows/test-combinations.yml
  • TESTING.md
  • templates.json
  • templates/nestjs-starter/src/app.controller.spec.ts
  • templates/nestjs-starter/src/app.controller.ts
  • templates/nestjs-starter/src/app.module.ts
  • templates/nestjs-starter/src/app.service.ts
  • templates/nestjs-starter/src/health/health.controller.ts
  • templates/nextjs-saas-ai-starter/cna.config.json
  • templates/nextjs-saas-ai-starter/package.json
  • templates/nextjs-starter/[src]/_feature-template_/README.md.template
  • templates/nextjs-starter/[src]/app/globals.css
  • templates/nextjs-starter/[src]/app/layout.tsx
  • templates/nextjs-starter/[src]/app/page.module.css
  • templates/nextjs-starter/[src]/app/page.tsx
  • templates/nextjs-starter/package.json
  • templates/react-vite-starter/[src]/pages/Landing.css
  • templates/react-vite-starter/[src]/pages/Landing.tsx.template
  • templates/turborepo-starter/apps/playground/src/stories/Button.tsx
  • templates/turborepo-starter/apps/playground/src/stories/Header.tsx
  • templates/turborepo-starter/package/index.js
  • templates/turborepo-starter/packages/eslint-config-react/package.json.template
  • templates/turborepo-starter/packages/ui/package.json.template
  • templates/wdio-starter/docs/RUNNING_TESTS.md.template
  • templates/wdio-starter/docs/TEST_CONFIGURATION.md.template
  • templates/wdio-starter/package/index.js
  • templates/wdio-starter/tsconfig.json
  • templates/webextension-react-vite-starter/.webext-config/reload/injections/view.ts
  • templates/webextension-react-vite-starter/[src]/content/App.test.tsx
  • templates/webextension-react-vite-starter/[src]/popup/Popup.css
  • templates/webextension-react-vite-starter/[src]/popup/Popup.tsx.template
  • templates/webextension-react-vite-starter/[src]/popup/index.css
  • templates/webextension-react-vite-starter/eslint.config.mjs.template
  • templates/webextension-react-vite-starter/package/index.js
  • templates/webextension-react-vite-starter/tsconfig.json.template
  • templates/webextension-react-vite-starter/tsconfig.node.json
💤 Files with no reviewable changes (1)
  • templates/webextension-react-vite-starter/[src]/content/App.test.tsx

Comment on lines +15 to +16
describe('getHello', () => {
it('should return "Hello World!"', () => {
it('should return starter status metadata', () => {
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Rename stale spec suite label to match the method under test.

The suite still says getHello while the test now targets getStatus, which makes test reporting confusing.

Suggested patch
-  describe('getHello', () => {
+  describe('getStatus', () => {
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
describe('getHello', () => {
it('should return "Hello World!"', () => {
it('should return starter status metadata', () => {
describe('getStatus', () => {
it('should return starter status metadata', () => {
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@templates/nestjs-starter/src/app.controller.spec.ts` around lines 15 - 16,
The test suite label is stale: update the describe block currently named
'getHello' to 'getStatus' so it matches the method under test (getStatus) in
app.controller.spec.ts; locate the describe('getHello', ...) and rename it to
describe('getStatus', ...) so test reports accurately reflect the tested method.

Comment on lines +2 to +15
"customOptions": [
{
"name": "srcDir",
"type": "text",
"message": "Subdirectory to put all source content (e.g., `src`, `app`). Leave blank to use the root directory.",
"initial": "src"
},
{
"name": "projectImportPath",
"type": "text",
"message": "Import alias to use for the project, e.g., `@/`",
"initial": "@/"
}
]
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Custom options are currently not wired into generated output.

These prompts collect srcDir and projectImportPath, but key config still appears hardcoded (e.g., templates/nextjs-saas-ai-starter/tsconfig.json uses @/* and ./src/*). That makes non-default answers ineffective and misleading for users.

Suggested direction

Either:

  • wire these options into template placeholders across affected files (tsconfig, imports/docs), or
  • remove these prompts until the substitutions are implemented end-to-end.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@templates/nextjs-saas-ai-starter/cna.config.json` around lines 2 - 15, The
custom prompts "srcDir" and "projectImportPath" are collected but not applied to
generated files; update the template system to substitute these values into
template placeholders (e.g., replace hardcoded "@/*" and "./src/*" in
tsconfig.json and any import/path occurrences) or remove the prompts.
Concretely, wire the "srcDir" and "projectImportPath" variables into the
template rendering step so generated artifacts (tsconfig.json, import aliases,
documentation examples) use the provided values instead of defaults, ensuring
placeholders exist where "srcDir" and "projectImportPath" are referenced and are
replaced at generation time.

"scripts": {
"dev": "next dev --turbopack --hostname 0.0.0.0 --port 3000",
"build": "NODE_ENV=production next build",
"build": "SKIP_ENV_VALIDATION=true NODE_ENV=production next build",
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify that the build script currently forces env-skip
rg -n '"build"\s*:\s*".*SKIP_ENV_VALIDATION' templates/nextjs-saas-ai-starter/package.json

# Verify env validation is actually gated by SKIP_ENV_VALIDATION
rg -n 'skipValidation|SKIP_ENV_VALIDATION' templates/nextjs-saas-ai-starter/src/shared/lib/env.ts

Repository: Create-Node-App/cna-templates

Length of output: 203


🏁 Script executed:

#!/bin/bash
# Check all build-related scripts in package.json
rg -A 2 -B 2 '"build' templates/nextjs-saas-ai-starter/package.json

# Check if there's any existing CI-specific script
rg -n 'ci|CI' templates/nextjs-saas-ai-starter/package.json

Repository: Create-Node-App/cna-templates

Length of output: 585


Remove env validation bypass from the default production build.

The build script at line 5 unconditionally disables environment validation with SKIP_ENV_VALIDATION=true, which means every developer running npm run build skips critical env checks. This defeats the purpose of validation and allows misconfigured environments to reach production undetected.

Move the bypass to a CI-specific script:

Proposed script split
-    "build": "SKIP_ENV_VALIDATION=true NODE_ENV=production next build",
+    "build": "NODE_ENV=production next build",
+    "build:ci": "SKIP_ENV_VALIDATION=true NODE_ENV=production next build",

Update CI/deployment pipelines to call npm run build:ci instead.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"build": "SKIP_ENV_VALIDATION=true NODE_ENV=production next build",
"build": "NODE_ENV=production next build",
"build:ci": "SKIP_ENV_VALIDATION=true NODE_ENV=production next build",
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@templates/nextjs-saas-ai-starter/package.json` at line 5, The "build" script
currently sets SKIP_ENV_VALIDATION=true which disables critical env checks for
all developers; remove the SKIP_ENV_VALIDATION setting from the "build" script
so it runs as "NODE_ENV=production next build", and add a new CI-only script
(e.g., "build:ci") that sets SKIP_ENV_VALIDATION=true for CI runs; update
CI/deployment configs to call "npm run build:ci" instead of "npm run build".

Comment on lines +90 to +91
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Use fractional tracks at the tablet breakpoint.

Lines 190-191 set two 50% columns while Line 91 keeps a 1rem gap, so the grid becomes wider than its container between 701px and 1120px. Since templates/nextjs-starter/[src]/app/globals.css Line 31 hides horizontal overflow, the right edge of the second column gets clipped instead of fitting cleanly.

🛠️ Proposed fix
 `@media` (min-width: 701px) and (max-width: 1120px) {
   .grid {
-    grid-template-columns: repeat(2, 50%);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }

Also applies to: 189-191

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@templates/nextjs-starter/`[src]/app/page.module.css around lines 90 - 91,
Replace the fixed 50% column sizes at the tablet breakpoint with fractional
tracks so the grid and the 1rem gap fit inside the container; specifically
change the rule that sets "grid-template-columns: 50% 50%;" to use fractional
tracks like "grid-template-columns: repeat(2, minmax(0, 1fr));" (or "1fr 1fr")
so the grid uses available space correctly while keeping "gap: 1rem" unchanged;
update all occurrences that set two 50% columns (the tablet breakpoint rules
referenced) to this fractional form.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR audits and refreshes multiple base templates to better match real create-awesome-node-app generated projects, improves starter UX for several templates (Next.js / React Vite / WebExtension / NestJS), and strengthens combination testing docs/workflow coverage.

Changes:

  • Refreshes starter UIs/styles for Next.js, React+Vite, and WebExtension popup experiences.
  • Adds/adjusts template build + type-check behavior (notably WebExtension TS checks) and updates WDIO + Turborepo template configuration/deps.
  • Expands combination-testing workflow to install deps and run lint + type-check in CI.

Reviewed changes

Copilot reviewed 32 out of 36 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
templates/webextension-react-vite-starter/tsconfig.node.json Adjust node TS config resolution + includes for webext tooling files.
templates/webextension-react-vite-starter/tsconfig.json.template Simplifies TS config includes/excludes and removes project references.
templates/webextension-react-vite-starter/package/index.js Updates build/type-check scripts to validate both app + node-side TS configs.
templates/webextension-react-vite-starter/eslint.config.mjs.template Broadens ignore glob for declaration files.
templates/webextension-react-vite-starter/[src]/popup/index.css Updates popup base styling and CSS variables.
templates/webextension-react-vite-starter/[src]/popup/Popup.tsx.template Redesigns popup UI and adds “open options” behavior.
templates/webextension-react-vite-starter/[src]/popup/Popup.css Replaces legacy App styles with new popup surface/layout styles.
templates/webextension-react-vite-starter/[src]/content/App.test.tsx Removes the content view test.
templates/webextension-react-vite-starter/.webext-config/reload/injections/view.ts Refactors visibility reload logic for readability.
templates/wdio-starter/tsconfig.json Modernizes TS target/libs and enables skipLibCheck.
templates/wdio-starter/package/index.js Introduces package.json generator for WDIO template (scripts + dev deps).
templates/wdio-starter/docs/TEST_CONFIGURATION.md.template Adds WDIO configuration documentation.
templates/wdio-starter/docs/RUNNING_TESTS.md.template Adds WDIO “running tests” documentation and CI examples.
templates/turborepo-starter/packages/ui/package.json.template Adds missing react-dom dependency to UI package.
templates/turborepo-starter/packages/eslint-config-react/package.json.template Updates React ESLint config deps to use react + hooks plugins.
templates/turborepo-starter/package/index.js Adjusts root devDependency version for eslint-config-base.
templates/turborepo-starter/apps/playground/src/stories/Header.tsx Exports HeaderProps interface.
templates/turborepo-starter/apps/playground/src/stories/Button.tsx Exports ButtonProps interface.
templates/react-vite-starter/[src]/pages/Landing.tsx.template Replaces animation-based landing with structured starter content.
templates/react-vite-starter/[src]/pages/Landing.css Replaces landing page styling with a new layout/theme.
templates/nextjs-starter/package.json Adds autoprefixer to devDependencies.
templates/nextjs-starter/[src]/app/page.tsx Replaces default Next.js landing page with CNA-branded quick-start UI.
templates/nextjs-starter/[src]/app/page.module.css Updates styles to support the redesigned landing page.
templates/nextjs-starter/[src]/app/layout.tsx Updates metadata title/description to match new starter branding.
templates/nextjs-starter/[src]/app/globals.css Simplifies CSS variables and updates background styling.
templates/nextjs-starter/[src]/feature-template/README.md.template Adds feature folder template documentation for feature-based architecture.
templates/nextjs-saas-ai-starter/package.json Updates build to skip env validation during build.
templates/nextjs-saas-ai-starter/cna.config.json Adds custom options for srcDir and projectImportPath.
templates/nestjs-starter/src/health/health.controller.ts Adds a /health endpoint controller.
templates/nestjs-starter/src/app.service.ts Replaces hello response with structured status + health responses.
templates/nestjs-starter/src/app.module.ts Registers the new HealthController.
templates/nestjs-starter/src/app.controller.ts Changes root endpoint to return status metadata.
templates/nestjs-starter/src/app.controller.spec.ts Updates test assertions for new status response.
templates.json Changes NextJS SaaS AI template type and extends extension compatibility lists.
TESTING.md Updates combo-testing documentation to include lint + type-check steps.
.github/workflows/test-combinations.yml Runs CNA in CI mode, installs deps, and executes lint + type-check in matrix tests.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines 2 to 7
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"moduleResolution": "Bundler",
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true
Comment on lines 18 to 22
"devDependencies": {
"@changesets/cli": "^2.25.0",
"eslint-config-base": "*",
"eslint-config-base": "0.0.0",
"prettier": "^2.7.1",
"turbo": "^1.5.5"
@@ -13,9 +13,18 @@ describe('AppController', () => {
});

describe('getHello', () => {
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (2)
templates/turborepo-starter/package/index.js (1)

2-2: Normalize setup.scope before composing the package name (Line 2).

This works for @my-org/, but a common input like @my-org would generate an invalid dependency name. Consider normalizing/trimming once before concatenation.

Proposed hardening
-  const eslintConfigBaseName = `${setup.scope || ''}eslint-config-base`;
+  const normalizedScope = (setup.scope || '').trim().replace(/\/?$/, '/');
+  const eslintConfigBaseName = `${normalizedScope === '/' ? '' : normalizedScope}eslint-config-base`;
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@templates/turborepo-starter/package/index.js` at line 2, The package name
assembly uses setup.scope directly when building eslintConfigBaseName which
breaks for inputs like "@my-org" (missing trailing slash); normalize setup.scope
first by trimming whitespace and ensuring it either is empty or ends with a
single "/" (e.g., compute a local normalizedScope from setup.scope, trimming and
appending "/" if not present) and then use normalizedScope when building
eslintConfigBaseName so the resulting dependency name is always valid; reference
setup.scope and eslintConfigBaseName to locate the change.
templates/nextjs-starter/[src]/app/page.module.css (1)

44-44: Consider extracting repeated shadow color to a CSS variable.

The shadow color rgba(15, 23, 42, 0.08) appears in multiple places. Extracting it to a CSS variable (e.g., --shadow-color) in globals.css would improve maintainability if the shadow styling needs to change.

Also applies to: 99-99, 128-128

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@templates/nextjs-starter/`[src]/app/page.module.css at line 44, The CSS
repeatedly uses the same shadow color rgba(15, 23, 42, 0.08); extract it into a
CSS variable (e.g., --shadow-color) defined in globals.css and replace the
hardcoded color in page.module.css (and the other occurrences noted) with
box-shadow using that variable; update any selectors that currently use
"box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08)" to reference
var(--shadow-color) so future changes are centralized.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@templates/webextension-react-vite-starter/tsconfig.node.json`:
- Line 10: tsconfig.node.json's "include" currently lists manifest.ts and
vite.config.ts which don't exist in the template; update the include array in
tsconfig.node.json to either reference the actual template filenames
(manifest.ts.template and vite.config.ts.template) or remove those two entries
so only existing paths like .webext-config/**/*.ts remain; ensure the include
change targets the "include" array in tsconfig.node.json and mentions the
symbols manifest.ts, vite.config.ts, manifest.ts.template and
vite.config.ts.template so the right files are adjusted.

---

Nitpick comments:
In `@templates/nextjs-starter/`[src]/app/page.module.css:
- Line 44: The CSS repeatedly uses the same shadow color rgba(15, 23, 42, 0.08);
extract it into a CSS variable (e.g., --shadow-color) defined in globals.css and
replace the hardcoded color in page.module.css (and the other occurrences noted)
with box-shadow using that variable; update any selectors that currently use
"box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08)" to reference
var(--shadow-color) so future changes are centralized.

In `@templates/turborepo-starter/package/index.js`:
- Line 2: The package name assembly uses setup.scope directly when building
eslintConfigBaseName which breaks for inputs like "@my-org" (missing trailing
slash); normalize setup.scope first by trimming whitespace and ensuring it
either is empty or ends with a single "/" (e.g., compute a local normalizedScope
from setup.scope, trimming and appending "/" if not present) and then use
normalizedScope when building eslintConfigBaseName so the resulting dependency
name is always valid; reference setup.scope and eslintConfigBaseName to locate
the change.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ea98f0af-815f-4e80-98ed-eefcb9984957

📥 Commits

Reviewing files that changed from the base of the PR and between 396266f and 21c6ee2.

📒 Files selected for processing (11)
  • templates/nestjs-starter/src/app.controller.spec.ts
  • templates/nestjs-starter/src/health/health.controller.spec.ts
  • templates/nextjs-saas-ai-starter/.github/workflows/build.yml
  • templates/nextjs-saas-ai-starter/package.json
  • templates/nextjs-starter/[src]/app/page.module.css
  • templates/react-vite-starter/[src]/pages/Landing.css
  • templates/turborepo-starter/package/index.js
  • templates/webextension-react-vite-starter/[src]/popup/Popup.css
  • templates/webextension-react-vite-starter/[src]/popup/Popup.tsx.template
  • templates/webextension-react-vite-starter/[src]/popup/index.css
  • templates/webextension-react-vite-starter/tsconfig.node.json

"vite.config.ts",
"package.json"
]
"include": [".webext-config/**/*.ts", "manifest.ts", "vite.config.ts"]
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Read-only verification: confirm tsconfig.node include targets exist.
fd -H '^\.webext-config$' -t d
fd '^manifest\.ts$'
fd '^vite\.config\.ts$'

Repository: Create-Node-App/cna-templates

Length of output: 130


🏁 Script executed:

fd -H -t f 'manifest\.ts|vite\.config\.ts' templates/webextension-react-vite-starter/
ls -la templates/webextension-react-vite-starter/ | head -20

Repository: Create-Node-App/cna-templates

Length of output: 1501


🏁 Script executed:

cat -n templates/webextension-react-vite-starter/tsconfig.node.json

Repository: Create-Node-App/cna-templates

Length of output: 414


Update include paths to match actual template files or remove non-existent references.

The .webext-config/**/*.ts include exists, but manifest.ts and vite.config.ts do not exist in the template—only manifest.ts.template and vite.config.ts.template are present. Either update the include to reference the .template files or remove these entries if they are generated during project setup and should not be type-checked at template validation time.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@templates/webextension-react-vite-starter/tsconfig.node.json` at line 10,
tsconfig.node.json's "include" currently lists manifest.ts and vite.config.ts
which don't exist in the template; update the include array in
tsconfig.node.json to either reference the actual template filenames
(manifest.ts.template and vite.config.ts.template) or remove those two entries
so only existing paths like .webext-config/**/*.ts remain; ensure the include
change targets the "include" array in tsconfig.node.json and mentions the
symbols manifest.ts, vite.config.ts, manifest.ts.template and
vite.config.ts.template so the right files are adjusted.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants