Conversation
📝 WalkthroughWalkthroughIntroduces comprehensive documentation and rules for TanStack Start development, including a new cursor rules set, markdown documentation files, and an updated README index entry. The addition covers full-stack React patterns, server functions, routing, streaming, and multi-platform deployment guidance. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
rules-new/tanstack-start.mdc (1)
1-124: Consider consolidating duplicate TanStack Start.mdcdocs.This file duplicates the rule content already added under
rules/tanstack-start-cursorrules-prompt-file/tanstack-start.mdc. Keeping both will likely drift over time; prefer one canonical file and reference it.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@rules-new/tanstack-start.mdc` around lines 1 - 124, The PR adds a duplicate TanStack Start rules doc: rules-new/tanstack-start.mdc duplicates the canonical rules/tanstack-start-cursorrules-prompt-file/tanstack-start.mdc; remove the duplicate file (rules-new/tanstack-start.mdc) and keep the single source of truth (rules/tanstack-start-cursorrules-prompt-file/tanstack-start.mdc), or alternatively move any unique edits into the canonical file and delete the duplicate, then update any tooling or references that pointed to rules-new/tanstack-start.mdc to use the canonical filename so only one doc remains.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@rules/tanstack-start-cursorrules-prompt-file/.cursorrules`:
- Around line 68-73: The client RootComponent currently checks
process.env.NODE_ENV to conditionally render TanStackRouterDevtools and
ReactQueryDevtools which contradicts the guideline to never access process.env
in client components; replace that check by using the Vite/TanStack-safe flag
import.meta.env.DEV in the RootComponent (the conditional around
TanStackRouterDevtools and ReactQueryDevtools) so dev-only rendering uses
import.meta.env.DEV instead of process.env.NODE_ENV.
---
Nitpick comments:
In `@rules-new/tanstack-start.mdc`:
- Around line 1-124: The PR adds a duplicate TanStack Start rules doc:
rules-new/tanstack-start.mdc duplicates the canonical
rules/tanstack-start-cursorrules-prompt-file/tanstack-start.mdc; remove the
duplicate file (rules-new/tanstack-start.mdc) and keep the single source of
truth (rules/tanstack-start-cursorrules-prompt-file/tanstack-start.mdc), or
alternatively move any unique edits into the canonical file and delete the
duplicate, then update any tooling or references that pointed to
rules-new/tanstack-start.mdc to use the canonical filename so only one doc
remains.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 276b3c7b-07b9-4c39-9897-3be9819ac2be
📒 Files selected for processing (5)
README.mdrules-new/tanstack-start.mdcrules/tanstack-start-cursorrules-prompt-file/.cursorrulesrules/tanstack-start-cursorrules-prompt-file/README.mdrules/tanstack-start-cursorrules-prompt-file/tanstack-start.mdc
| {process.env.NODE_ENV === 'development' && ( | ||
| <> | ||
| <TanStackRouterDevtools /> | ||
| <ReactQueryDevtools /> | ||
| </> | ||
| )} |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
In TanStack Start (Vite-based), what is the recommended way to gate dev-only UI inside route components: process.env.NODE_ENVorimport.meta.env.DEV?
💡 Result:
In TanStack Start (Vite-based), the recommended way to gate dev-only UI inside route components is import.meta.env.DEV.
Citations:
- 1: https://tanstack.com/start/latest/docs/framework/react/guide/environment-variables
- 2: https://tanstack.com/router/latest/docs/how-to/use-environment-variables
- 3: https://tanstack.com/devtools/latest/docs/framework/react/examples/start%3Fpath%3Dexamples%252Freact%252Fstart%252Fsrc%252Fcomponents%252Fdevtools.tsx
🏁 Script executed:
# First, find the .cursorrules file
find . -name ".cursorrules" -type fRepository: PatrickJS/awesome-cursorrules
Length of output: 11792
🏁 Script executed:
# Read the relevant lines from the .cursorrules file
# Get lines around 68-73 and line 223
if [ -f "rules/tanstack-start-cursorrules-prompt-file/.cursorrules" ]; then
echo "=== Lines 65-75 (context around line 68-73) ==="
sed -n '65,75p' "rules/tanstack-start-cursorrules-prompt-file/.cursorrules" | cat -n
echo ""
echo "=== Lines 220-225 (context around line 223) ==="
sed -n '220,225p' "rules/tanstack-start-cursorrules-prompt-file/.cursorrules" | cat -n
fiRepository: PatrickJS/awesome-cursorrules
Length of output: 814
Fix contradictory env guidance in client-rendered example.
Line 223 states "Never access process.env in client components," but Lines 68-73 use process.env.NODE_ENV in the RootComponent. This violates the stated guideline. In TanStack Start (Vite-based), use import.meta.env.DEV for dev-only rendering checks.
Suggested doc fix
- {process.env.NODE_ENV === 'development' && (
+ {import.meta.env.DEV && (
<>
<TanStackRouterDevtools />
<ReactQueryDevtools />
</>
)}Also applies to: 220-223
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@rules/tanstack-start-cursorrules-prompt-file/.cursorrules` around lines 68 -
73, The client RootComponent currently checks process.env.NODE_ENV to
conditionally render TanStackRouterDevtools and ReactQueryDevtools which
contradicts the guideline to never access process.env in client components;
replace that check by using the Vite/TanStack-safe flag import.meta.env.DEV in
the RootComponent (the conditional around TanStackRouterDevtools and
ReactQueryDevtools) so dev-only rendering uses import.meta.env.DEV instead of
process.env.NODE_ENV.
There was a problem hiding this comment.
Pull request overview
Adds TanStack Start guidance to the repository’s Cursor rules collection, covering key full-stack patterns (server functions, file-based routing, API routes, and streaming) and linking it from the main README.
Changes:
- Added TanStack Start
.cursorrulesguidance with examples for routing, server functions, streaming, auth, and deployment presets. - Added TanStack Start
.mdcrule content (both under the rule’s folder and inrules-new/) for scoped application via globs. - Updated root
README.mdto include the new TanStack Start rules entry.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| rules/tanstack-start-cursorrules-prompt-file/tanstack-start.mdc | Adds TanStack Start rule content + frontmatter for scoped application. |
| rules/tanstack-start-cursorrules-prompt-file/README.md | Documents what the TanStack Start rules cover and credits the author. |
| rules/tanstack-start-cursorrules-prompt-file/.cursorrules | Provides the primary Cursor rules content and examples for TanStack Start usage. |
| rules-new/tanstack-start.mdc | Adds a rules-new/ variant of the TanStack Start .mdc rule. |
| README.md | Links the new TanStack Start rule set from the main rules list. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <Outlet /> | ||
| <ScrollRestoration /> | ||
| <Scripts /> | ||
| {process.env.NODE_ENV === 'development' && ( |
There was a problem hiding this comment.
In the Root Route example, process.env.NODE_ENV is used inside a route component. This conflicts with the later guidance in this same file (“Never access process.env in client components”) and can also fail in Vite-based client bundles where process isn’t defined. Prefer import.meta.env.DEV/import.meta.env.MODE, or gate devtools via a server-derived flag passed to the client.
| {process.env.NODE_ENV === 'development' && ( | |
| {import.meta.env.DEV && ( |
| @@ -0,0 +1,124 @@ | |||
| --- | |||
| description: TanStack Start full-stack React framework using server functions, API routes, SSR, streaming with defer(), and multi-platform deployment via Vinxi/Nitro | |||
| globs: ["src/routes/**/*", "src/server/**/*", "app.config.ts"] | |||
There was a problem hiding this comment.
Frontmatter globs is expressed as a YAML inline array here, but other .mdc files in rules-new/ use a plain string/comma-separated pattern for globs (e.g. rules-new/nextjs.mdc). To avoid inconsistent parsing/ingestion, consider switching this to the same string format used elsewhere in the repo.
| globs: ["src/routes/**/*", "src/server/**/*", "app.config.ts"] | |
| globs: src/routes/**/*, src/server/**/*, app.config.ts |
| @@ -0,0 +1,124 @@ | |||
| --- | |||
| description: TanStack Start full-stack React framework using server functions, API routes, SSR, streaming with defer(), and multi-platform deployment via Vinxi/Nitro | |||
| globs: ["src/routes/**/*", "src/server/**/*", "app.config.ts"] | |||
There was a problem hiding this comment.
Frontmatter globs is expressed as a YAML inline array here, but most existing rule .mdc files in this repo use a plain string/comma-separated pattern for globs. For consistency (and to reduce the risk of tooling expecting a string), consider switching to the established string format.
| globs: ["src/routes/**/*", "src/server/**/*", "app.config.ts"] | |
| globs: src/routes/**/*,src/server/**/*,app.config.ts |
Adds TanStack Start rules - a new full-stack React framework (Router + Vinxi/Nitro) not yet in the repo. Covers server functions, API routes, SSR, streaming, and deployment targets.
Summary by CodeRabbit
Documentation