franciscomoretti
- 16 skills
- 0 followers
- 15 hours ago last updated
- ▌ Review Docs · franciscomorettiReview 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.
- ▌ Next Dev Loop · franciscomorettiVerify 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 running `next dev`.
- ▌ Trpc Patterns · franciscomorettiImplement ChatJS tRPC routers, TanStack Query hooks, mutations, and cache invalidation. Use when adding or changing tRPC procedures or their React consumers in apps/chat.
- ▌ Worktree Ports · franciscomoretti bundleDiscover 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.
- ▌ Dev Auth Bypass · franciscomorettiAuthenticate 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.
- ▌ Making UI Changes · franciscomorettiRead 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.
- ▌ Strategic Testing · franciscomorettiDecide 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.
- ▌ Check Visual Changes · franciscomorettiCheck 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.
- ▌ Generate Code Snippet · franciscomorettiGenerate 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.
- ▌ Lazy Prefetch Pattern · franciscomorettiUse 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.
- ▌ Triage Visual Changes · franciscomorettiTriage 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 Verify build reports changes and you want the agent to review, summarize, or accept from the terminal instead of clicking through the dashboard. Triggers - "triage this build", "summarize the visual regressions", "accept all the new baselines".
- ▌ Vitest Visual Testing · franciscomorettiMake @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 on the run-to-run variation the capturer can't neutralize from outside your app — above all live/dynamic data, the highest-value step (freeze it with static fixtures and the whole content-noise class disappears), plus the clock, infinite JS animations, and non-Math.random randomness, and the one Vitest-specific trap - capturing before the component has settled.
- ▌ Create Vercel AI Issue · franciscomorettiCreate 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.
- ▌ Economical Visual Tests · franciscomorettiAuthor 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 variants/states are exploding into one snapshot per combination, when the visual-testing bill or noise is driven by snapshot count, or when writing new stories/captures and you want the cheapest layout that still covers every variant. Covers gallery/matrix stories, data-driven states, and the coarse-granularity tradeoff.
- ▌ Next Cache Components Adoption · franciscomoretti bundleTurn 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 errors, run the `cache-components-instant-false` codemod, or decide between opting routes out with `export const instant = false` and fixing them in place.
- ▌ Next Partial Prefetching Adoption · franciscomorettiTurn 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 prefetch={true}>` calls, or resolve the link-prefetch-partial and instant-shell-url-data insights.