lazy-prefetch-pattern

Use the ChatJS React Query v5 lazy-prefetch pattern without blocking server rendering. Use when prefetching tRPC queries in Next.js Server Components or changing query dehydration and hydration behavior in apps/chat.

Jump to install Review files

Repository: FranciscoMoretti/chat-js
Last source activity: September 12, 2026 at 06:41
Detected SKILL.md language: English
Stars: 1,200
Forks: 124

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with an AI assistant

Copy this prompt into the AI assistant you're using.

Follow https://skillsmp.com/skill-install/prompt.md to install only the Agent Skill at https://github.com/FranciscoMoretti/chat-js/tree/main/.agents/skills/lazy-prefetch-pattern.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/FranciscoMoretti/chat-js --skill lazy-prefetch-pattern

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

SKILL.md

Source instructions · Read-only preview

name: lazy-prefetch-pattern
description: Use the ChatJS React Query v5 lazy-prefetch pattern without blocking server rendering. Use when prefetching tRPC queries in Next.js Server Components or changing query dehydration and hydration behavior in apps/chat.

# Lazy prefetch pattern Start optional server prefetches early without awaiting them so they can stream through React hydration without blocking rendering. - Use the exported `prefetch()` helper from `@/trpc/server`: `prefetch(trpc.foo.bar.queryOptions(...))`. It handles both paginated and non-paginated queries. - Await only data required before rendering. - Render through the existing `HydrateClient` or `HydrationBoundary`. This depends on `trpc/query-client.ts` dehydrating pending queries and using SuperJSON for serialization and hydration. Preserve those settings when using this pattern.

View on GitHub

Back to search Back to installation

worktree-ports

Discover and use stable per-app ports assigned to a local monorepo worktree. Use when starting, opening, testing, or debugging local apps, or when worktree slots, localhost ports, PORT, app URLs, or .worktree-env.json are involved.

2026-10-11

check-visual-changes

Check the visual impact of an edit mid-task with `uiverify check` — render just the components you're touching on the UI Verify fleet and diff them against the real CI baseline, without opening a PR, posting a check, or moving a baseline. Works for every capture method (Storybook, Playwright, Vitest archives, and raw screenshots). Use when a coding agent has changed UI and wants a fast, authoritative "would this pass" answer before pushing — "check my visual changes", "did I break anything visually", "preview this diff", "run uiverify check". Hands off to triage-visual-changes for the pixel review.

2026-09-12

create-vercel-ai-issue

Create a well-formed GitHub issue in vercel/ai using the gh CLI. Use when reporting an AI SDK bug or preparing an issue body that contains logs, code blocks, versions, reproduction steps, and shell-sensitive text.

2026-09-12

View all from this repository

lazy-prefetch-pattern

Source facts

Install options

Install with an AI assistant

Review the source files

More from this repository

Install with an AI assistant

More from this repository