ChatJS tRPC patterns

SkillDev tools

Lets your agent write tRPC routers, TanStack Query hooks, and cache invalidation for the chat app.

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the ChatJS tRPC patterns skill

About this capability

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.

What this skill tells your AI

The instructions your AI receives, as published by franciscomoretti/chat-js in .agents/skills/trpc-patterns/SKILL.md and read by ahel’s review.

Backend

  • Add feature routers under apps/chat/trpc/routers/*.router.ts and register them in apps/chat/trpc/routers/_app.ts.
  • Use protectedProcedure for authenticated operations.
  • Validate inputs with Zod and verify ownership before mutations.
  • Keep database access in apps/chat/lib/db/queries.ts.

React queries

Use useTRPC() with TanStack Query:

const trpc = useTRPC();
const query = useQuery({
  ...trpc.feature.list.queryOptions(),
  enabled: Boolean(condition),
});

For mutations, use generated mutation options and invalidate related keys after success:

const trpc = useTRPC();
const queryClient = useQueryClient();

const mutation = useMutation(
  trpc.feature.update.mutationOptions({
    onSuccess: () =>
      queryClient.invalidateQueries({
        queryKey: trpc.feature.list.queryKey(),
      }),
  })
);

Handle loading and error states in the consumer.

Signals

GitHub stars
1k
Forks
122
Last commit
Sep 2026
Advanced
Catalog kind
skill
Gateway key
trpc-patterns
Source
github.com/franciscomoretti/chat-js