Conversation
Adds three new Claude skills for the tanstack-start-react framework: - tanstack-rsc: enabling React Server Components via @vitejs/plugin-rsc, including Node-only dependency externalization guidance. - tanstack-ai-code-mode: setting up @tanstack/ai-code-mode for sandboxed AI-authored tool execution. - tanstack-ai-code-mode-ui: building the UI layer on top of ai-code-mode. Made-with: Cursor
📝 WalkthroughSummary by CodeRabbit
WalkthroughThree new skill documentation files were added under Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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.
🧹 Nitpick comments (4)
frameworks/tanstack-start-react/.claude/skills/tanstack-ai-code-mode/SKILL.md (2)
17-30: Add language specifiers to fenced code blocks.The code blocks at lines 17-22 and 26-30 are missing language specifiers. Consider adding appropriate identifiers for better clarity.
📝 Suggested improvement
For the package lists, you could use
textor leave them as plain text blocks:Line 17:
-``` +```text `@tanstack/ai` # chat(), toolDefinition(), toServerSentEventsStream()Line 26:
-``` +```text `@tanstack/ai-anthropic`🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frameworks/tanstack-start-react/.claude/skills/tanstack-ai-code-mode/SKILL.md` around lines 17 - 30, The fenced code blocks that list packages (the blocks containing `@tanstack/ai`, `@tanstack/ai-code-mode`, `@tanstack/ai-isolate-node`, `@tanstack/ai-isolate-quickjs` and the provider adapters `@tanstack/ai-anthropic`, `@tanstack/ai-openai`, `@tanstack/ai-gemini`) are missing language specifiers; update each opening fence to include a language like "text" (e.g., change ``` to ```text) so the package lists render with a language hint and improved clarity in SKILL.md.
253-268: Add language specifier to file structure block.The file structure diagram is missing a language specifier. Adding
textwould improve markdown consistency.📝 Suggested improvement
-``` +```text src/ ├── lib/🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frameworks/tanstack-start-react/.claude/skills/tanstack-ai-code-mode/SKILL.md` around lines 253 - 268, The markdown file SKILL.md contains a fenced code block showing the project file structure without a language specifier; update the block that begins with the "src/" tree (the file structure diagram) to use a language specifier by changing the opening fence to specify "text" (e.g., ```text) so the diagram is rendered consistently across markdown renderers.frameworks/tanstack-start-react/.claude/skills/tanstack-ai-code-mode-ui/SKILL.md (2)
24-48: Add language specifier to architecture diagram.The architecture diagram is missing a language specifier. Adding
textwould improve markdown consistency.📝 Suggested improvement
-``` +```text ┌──────────────────────────────────────────────────────────────────┐ │ LLM │🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frameworks/tanstack-start-react/.claude/skills/tanstack-ai-code-mode-ui/SKILL.md` around lines 24 - 48, The fenced diagram block uses triple backticks without a language tag; update that opening fence to include the `text` language specifier (i.e., change the leading ``` to ```text) so the ASCII art block in SKILL.md renders consistently as plain text; ensure only the opening fence is changed and the closing ``` remains unchanged.
371-380: Add language specifier to system prompt example.The system prompt example is missing a language specifier. Adding
textwould improve markdown consistency.📝 Suggested improvement
-``` +```text external_ui_metric({ id?, parentId?, value, label, format?, prefix?, suffix?, variant? }) Display a big number with a label.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frameworks/tanstack-start-react/.claude/skills/tanstack-ai-code-mode-ui/SKILL.md` around lines 371 - 380, The markdown code block for the external_ui_metric example lacks a language specifier; update the fenced code block that documents external_ui_metric({ id?, parentId?, value, label, format?, prefix?, suffix?, variant? }) to use a "text" language tag (i.e., change ``` to ```text) so the snippet is consistently treated as plain text in the system prompt example.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In
`@frameworks/tanstack-start-react/.claude/skills/tanstack-ai-code-mode-ui/SKILL.md`:
- Around line 24-48: The fenced diagram block uses triple backticks without a
language tag; update that opening fence to include the `text` language specifier
(i.e., change the leading ``` to ```text) so the ASCII art block in SKILL.md
renders consistently as plain text; ensure only the opening fence is changed and
the closing ``` remains unchanged.
- Around line 371-380: The markdown code block for the external_ui_metric
example lacks a language specifier; update the fenced code block that documents
external_ui_metric({ id?, parentId?, value, label, format?, prefix?, suffix?,
variant? }) to use a "text" language tag (i.e., change ``` to ```text) so the
snippet is consistently treated as plain text in the system prompt example.
In
`@frameworks/tanstack-start-react/.claude/skills/tanstack-ai-code-mode/SKILL.md`:
- Around line 17-30: The fenced code blocks that list packages (the blocks
containing `@tanstack/ai`, `@tanstack/ai-code-mode`, `@tanstack/ai-isolate-node`,
`@tanstack/ai-isolate-quickjs` and the provider adapters `@tanstack/ai-anthropic`,
`@tanstack/ai-openai`, `@tanstack/ai-gemini`) are missing language specifiers;
update each opening fence to include a language like "text" (e.g., change ``` to
```text) so the package lists render with a language hint and improved clarity
in SKILL.md.
- Around line 253-268: The markdown file SKILL.md contains a fenced code block
showing the project file structure without a language specifier; update the
block that begins with the "src/" tree (the file structure diagram) to use a
language specifier by changing the opening fence to specify "text" (e.g.,
```text) so the diagram is rendered consistently across markdown renderers.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: cf569e36-6a35-45d1-849c-4ce9bf351cea
📒 Files selected for processing (3)
frameworks/tanstack-start-react/.claude/skills/tanstack-ai-code-mode-ui/SKILL.mdframeworks/tanstack-start-react/.claude/skills/tanstack-ai-code-mode/SKILL.mdframeworks/tanstack-start-react/.claude/skills/tanstack-rsc/SKILL.md
| @@ -0,0 +1,702 @@ | |||
| --- | |||
| name: tanstack-ai-code-mode-ui | |||
| description: Architect a code mode setup where UI generation is driven by the LLM through injected UI bindings. Use when designing a system where the model builds interfaces (dashboards, forms, visualizations, canvases, etc.) by calling UI functions from inside the sandbox, rather than returning structured UI payloads as tool results. | |||
There was a problem hiding this comment.
[q] do we need to be more clear about what the model means here? It's accurate but I guess I'm wondering about how successfully claude will trigger the skill and whether something more like "Use when building an AI agent that generates UI at runtime" would help with that
There was a problem hiding this comment.
Fair points about the trigger. Definitely want to put trigger language in there. But... I think we want to be more specific rather than less. These are advanced features that we should only use when the customer specifically requests them. All of these features are experimental TanStack features.
| @@ -0,0 +1,277 @@ | |||
| --- | |||
| name: tanstack-ai-code-mode | |||
| description: Set up and use TanStack AI Code Mode with sandboxed TypeScript execution. Use when adding code mode to a TanStack Start project, configuring isolate drivers, defining server tools, or wiring up the code mode chat API endpoint. | |||
There was a problem hiding this comment.
similar (possibly naive) q to the one above, but do you think this will make sure the skill triggers when the ask is less specific? Wondering if something like "Also use when the user wants an LLM/agent to execute multi-step logic, do real calculations, or orchestrate multiple tool calls in a sandbox" so that it might get successfully picked up even if they don't ask for Code Mode directly
Require specific trigger keywords ("RSC"/"React Server Components" or
"code mode") in the skill descriptions so agents only invoke these
skills when the customer explicitly asks for them.
Made-with: Cursor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
frameworks/tanstack-start-react/.claude/skills/tanstack-ai-code-mode/SKILL.md (2)
24-30: Add language identifiers to fenced code blocks.The package list fences here are missing a language tag, which triggers
MD040and reduces editor syntax support.Suggested markdown diff
-``` +```text `@tanstack/ai-anthropic` `@tanstack/ai-openai` `@tanstack/ai-gemini`</details> <details> <summary>🤖 Prompt for AI Agents</summary>Verify each finding against the current code and only fix it if needed.
In
@frameworks/tanstack-start-react/.claude/skills/tanstack-ai-code-mode/SKILL.md
around lines 24 - 30, The fenced code block listing provider adapters (lines
containing "@tanstack/ai-anthropic", "@tanstack/ai-openai",
"@tanstack/ai-gemini") lacks a language identifier which triggers MD040; update
that fenced block to start with a language tag (e.g.,text) so the block becomes "text" followed by the three package lines and closing "```" to
restore proper linting and editor syntax highlighting.</details> --- `115-118`: **Make the server tool example copy-paste runnable.** This example defines an output schema but the `.server()` handler returns nothing. Consider returning a minimal shaped object so readers can run the snippet immediately. <details> <summary>Suggested markdown diff</summary> ```diff }).server(async ({ table, columns, where, orderBy, orderDirection, limit }) => { - // Your database query logic here - // Inside the sandbox, the LLM calls: external_queryTable({ table: 'customers', ... }) + // Your database query logic here + // Inside the sandbox, the LLM calls: external_queryTable({ table: 'customers', ... }) + return { + rows: [], + totalMatchingRows: 0, + } }) ``` </details> <details> <summary>🤖 Prompt for AI Agents</summary> ``` Verify each finding against the current code and only fix it if needed. In `@frameworks/tanstack-start-react/.claude/skills/tanstack-ai-code-mode/SKILL.md` around lines 115 - 118, The .server(...) handler in the server tool example currently returns nothing, making the snippet non-runnable; update the .server(async ({ table, columns, where, orderBy, orderDirection, limit }) => { ... }) handler to return a minimal object that matches the example output schema (e.g., include rows/records and any metadata like count or page info) so callers like external_queryTable(...) receive a shaped response; locate the .server handler and replace the empty body with a simple return of the minimal shaped object built from the input parameters (using table/columns/limit as needed). ``` </details> </blockquote></details> </blockquote></details> <details> <summary>🤖 Prompt for all review comments with AI agents</summary>Verify each finding against the current code and only fix it if needed.
Inline comments:
In
@frameworks/tanstack-start-react/.claude/skills/tanstack-ai-code-mode-ui/SKILL.md:
- Around line 465-475: The remove case currently only deletes the single node
and parent references (inside the reducer handling event.op === 'remove'),
leaving orphaned descendants; change the logic in the remove branch to collect
the node plus all its descendants (traverse children from nodes Map starting at
event.id), delete every descendant id from nodes, remove all deleted ids from
rootIds, and for any remaining node that referenced any deleted child update its
children array to filter out those ids (use the existing nodes Map and rootIds
variables and update nodes.set for parents accordingly).
Nitpick comments:
In
@frameworks/tanstack-start-react/.claude/skills/tanstack-ai-code-mode/SKILL.md:
- Around line 24-30: The fenced code block listing provider adapters (lines
containing "@tanstack/ai-anthropic", "@tanstack/ai-openai",
"@tanstack/ai-gemini") lacks a language identifier which triggers MD040; update
that fenced block to start with a language tag (e.g.,text) so the block becomes "text" followed by the three package lines and closing "```" to
restore proper linting and editor syntax highlighting.- Around line 115-118: The .server(...) handler in the server tool example
currently returns nothing, making the snippet non-runnable; update the
.server(async ({ table, columns, where, orderBy, orderDirection, limit }) => {
... }) handler to return a minimal object that matches the example output schema
(e.g., include rows/records and any metadata like count or page info) so callers
like external_queryTable(...) receive a shaped response; locate the .server
handler and replace the empty body with a simple return of the minimal shaped
object built from the input parameters (using table/columns/limit as needed).</details> <details> <summary>🪄 Autofix (Beta)</summary> Fix all unresolved CodeRabbit comments on this PR: - [ ] <!-- {"checkboxId": "4b0d0e0a-96d7-4f10-b296-3a18ea78f0b9"} --> Push a commit to this branch (recommended) - [ ] <!-- {"checkboxId": "ff5b1114-7d8c-49e6-8ac1-43f82af23a33"} --> Create a new PR with the fixes </details> --- <details> <summary>ℹ️ Review info</summary> <details> <summary>⚙️ Run configuration</summary> **Configuration used**: Organization UI **Review profile**: CHILL **Plan**: Pro **Run ID**: `cc1e159e-fead-48f1-a576-c7f621baaaab` </details> <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between 27ac0a357a4075691e1ebedf84be5e5e7932d61c and 5f18c7de87b9aee31d5cd3fd354c1896cb2af0c3. </details> <details> <summary>📒 Files selected for processing (3)</summary> * `frameworks/tanstack-start-react/.claude/skills/tanstack-ai-code-mode-ui/SKILL.md` * `frameworks/tanstack-start-react/.claude/skills/tanstack-ai-code-mode/SKILL.md` * `frameworks/tanstack-start-react/.claude/skills/tanstack-rsc/SKILL.md` </details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
| } else if (event.op === 'remove') { | ||
| nodes.delete(event.id) | ||
| rootIds = rootIds.filter((id) => id !== event.id) | ||
| for (const [id, n] of nodes) { | ||
| if (n.children.includes(event.id)) { | ||
| nodes.set(id, { | ||
| ...n, | ||
| children: n.children.filter((c) => c !== event.id), | ||
| }) | ||
| } | ||
| } |
There was a problem hiding this comment.
remove implementation doesn’t delete descendants as documented.
The prose says remove should delete the node and its descendants, but this reducer only removes the single node and parent references. That can leave orphaned subtrees.
Suggested reducer fix
} else if (event.op === 'remove') {
- nodes.delete(event.id)
- rootIds = rootIds.filter((id) => id !== event.id)
- for (const [id, n] of nodes) {
- if (n.children.includes(event.id)) {
- nodes.set(id, {
- ...n,
- children: n.children.filter((c) => c !== event.id),
- })
- }
- }
+ const toDelete = [event.id]
+ while (toDelete.length) {
+ const id = toDelete.pop()!
+ const node = nodes.get(id)
+ if (node) {
+ toDelete.push(...node.children)
+ nodes.delete(id)
+ }
+ rootIds = rootIds.filter((rootId) => rootId !== id)
+ }
+ for (const [id, n] of nodes) {
+ if (n.children.includes(event.id)) {
+ nodes.set(id, {
+ ...n,
+ children: n.children.filter((c) => c !== event.id),
+ })
+ }
+ }
} else if (event.op === 'reorder') {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@frameworks/tanstack-start-react/.claude/skills/tanstack-ai-code-mode-ui/SKILL.md`
around lines 465 - 475, The remove case currently only deletes the single node
and parent references (inside the reducer handling event.op === 'remove'),
leaving orphaned descendants; change the logic in the remove branch to collect
the node plus all its descendants (traverse children from nodes Map starting at
event.id), delete every descendant id from nodes, remove all deleted ids from
rootIds, and for any remaining node that referenced any deleted child update its
children array to filter out those ids (use the existing nodes Map and rootIds
variables and update nodes.set for parents accordingly).
2 participants
Summary
Adds three new Claude skills under
frameworks/tanstack-start-react/.claude/skills/:tanstack-rsc— how to enable React Server Components in a TanStack Start + Vite project via@vitejs/plugin-rsc, including how to identify and fix Node-only dependency externalization issues (pnpapi,pg-native,esbuild,isolated-vm,quickjs-emscripten, etc.) for both Vite's dev module runner and Netlify's function packager.tanstack-ai-code-mode— setting up@tanstack/ai-code-modefor sandboxed execution of AI-authored tool code.tanstack-ai-code-mode-ui— building the UI layer on top of ai-code-mode.No framework code is touched — these are documentation/guidance files consumed by Claude when working in the TanStack Start template.
Test plan
frameworks/tanstack-start-react/.Made with Cursor