FranciscoMoretti/chat-js

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.

원문 언어: 영어

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…

원문 언어: 영어

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.

원문 언어: 영어

dev-auth-bypass

Authenticate a browser against a local ChatJS app without OAuth. Use for development login, local auth bypass, authenticated browser or Playwright testing, and the /api/dev-login route.

원문 언어: 영어

economical-visual-tests

Author economical visual tests — full visual coverage in the fewest billable snapshots. Applies to any per-snapshot visual tool (UI Verify, Chromatic, Percy, Playwright screenshots), which all bill and diff per rendered story/test. Use when a component's…

원문 언어: 영어

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.

원문 언어: 영어

making-ui-changes

Read before changing any component, page, or styles. Five moves to change UI without silently breaking another screen - reuse before you create, cover every state, check the blast radius, prove it with a visual test, kill flake at the source.

원문 언어: 영어

next-cache-components-adoption

Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the `cacheComponents` flag, work through a flood of blocking-prerender / instant validation…

원문 언어: 영어

next-dev-loop

Verify Next.js runtime behavior after editing app code. Use this skill to confirm a change actually works in a running app — not just that it compiles or type-checks. Combines /_next/mcp (Next.js's view) with agent-browser (the browser's view). Requires a…

원문 언어: 영어

next-partial-prefetching-adoption

Turn on Partial Prefetching in a Next.js app and work through the insights it surfaces. Use when the user wants to enable or adopt Partial Prefetching, flip the `partialPrefetching` flag, opt routes in with `export const prefetch = 'partial'`, audit `<Link…

원문 언어: 영어

review-docs

Review and fix ChatJS Blume documentation and MDX files. Use when checking docs for correctness, broken links, stale examples, unclear prose, or consistency with the implementation.

원문 언어: 영어

strategic-testing

Decide whether a change warrants new tests and choose proportionate verification. Use before adding tests, when planning validation, or when reviewing whether a proposed test protects meaningful behavior.

원문 언어: 영어

triage-visual-changes

Triage a UI Verify build from your coding agent via the UI Verify MCP — bucket a build's changed stories into real regressions vs cosmetic reflow vs rendering noise, summarize the real regressions for a PR comment, and accept baselines in bulk. Use after a UI…

원문 언어: 영어

trpc-patterns

Implement ChatJS tRPC routers, TanStack Query hooks, mutations, and cache invalidation. Use when adding or changing tRPC procedures or their React consumers in apps/chat.

원문 언어: 영어

vitest-visual-testing

Make @uiverify/vitest (Vitest browser-mode) captures deterministic so component visual tests stop coming back "changed" without a real change (flaky diffs). Use when setting up or debugging visual tests over Vitest browser-mode component tests. Focuses only…

원문 언어: 영어

generate-code-snippet

Generate a concise, shareable code snippet URL for code.franciscomoretti.com. Use when preparing a code image or short snippet for Twitter, X, social sharing, or a presentation.

원문 언어: 영어