Loading...
Loading...
Found 69 Skills
Build bulletproof React components that survive SSR, hydration, concurrent rendering, portals, transitions, and future React changes. Nine essential patterns from Shu Ding's guide. Use when writing reusable React components, fixing hydration mismatches, handling SSR edge cases, or building component libraries.
Angular SSR with @angular/ssr, hydration, and prerendering. Covers server-side rendering setup, transfer state, and deployment. USE WHEN: user mentions "Angular SSR", "server-side rendering", "Angular Universal", "@angular/ssr", "hydration", "prerendering", "Angular SEO" DO NOT USE FOR: Next.js SSR - use `nextjs`, Nuxt SSR - use `vue-composition`, SvelteKit SSR - use `svelte`
Implement server-side rendering and hydration in Angular v20+ using @angular/ssr. Use for SSR setup, hydration strategies, prerendering static pages, and handling browser-only APIs. Triggers on SSR configuration, fixing hydration mismatches, prerendering routes, or making code SSR-compatible.
SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.
React performance optimization and best practices. Use when writing React components, hooks, or JSX; refactoring React code; optimizing re-renders, memoization, or state management; reviewing React code for performance issues; fixing hydration mismatches; or implementing transitions, lazy initialization, or effect dependencies. Covers React 19+ features including useEffectEvent, Activity component, and ref props.
Nuxt 4 app patterns for hydration safety, performance, route rules, lazy loading, and SSR-safe data fetching with useFetch and useAsyncData.
TanStack Query v5 expert guidance - migration gotchas (v4→v5 breaking changes), performance pitfalls (infinite refetch loops, staleness traps), and decision frameworks (when NOT to use queries, SWR vs React Query trade-offs). Use when: (1) debugging v4→v5 migration errors (gcTime, isPending, throwOnError), (2) infinite refetch loops, (3) SSR hydration mismatches, (4) choosing between React Query vs SWR vs fetch, (5) optimistic update patterns not working. NOT for basic setup (see official docs). Focuses on non-obvious decisions and patterns that cause production issues. Triggers: React Query, TanStack Query, v5 migration, refetch loop, stale data, SSR hydration, query invalidation, optimistic updates debugging.
Full end-to-end tRPC setup for Next.js App Router. Covers route handler with fetchRequestHandler (GET + POST exports), TRPCProvider with QueryClientProvider, createTRPCOptionsProxy for RSC prefetching, HydrateClient/HydrationBoundary for hydration, useSuspenseQuery for Suspense, and server-side callers.
Build, review, debug, migrate, or plan TanStack Query v5 React server-state code with current docs. Use for @tanstack/react-query, QueryClient, QueryClientProvider, useQuery, useMutation, useInfiniteQuery, useQueries, queryOptions, mutationOptions, query keys, cache defaults, staleTime, gcTime, invalidation, optimistic updates, SSR, hydration, prefetching, router integration, suspense, persistence, devtools, ESLint rules, testing, TypeScript, and v4-to-v5 migrations.
Construir e revisar sites Astro com renderização, content collections, ilhas de interatividade, actions, integrações, imagens, SEO e performance. Use quando houver astro.config ou dependência astro e a tarefa tocar páginas, layouts, componentes, endpoints ou conteúdo; use também para decidir a diretiva de hidratação correta de uma ilha; não use para lógica interna do framework de UI hidratado numa ilha React — aí combine com a skill React.
Debug Nuxt.js issues systematically. Use when encountering SSR errors, Nitro server issues, hydration mismatches like "Hydration text/node mismatch", composable problems with useFetch or useAsyncData, plugin initialization failures, module conflicts, auto-import issues, or Vue-specific runtime errors in a Nuxt context.
Debug Next.js issues systematically. Use when encountering SSR errors, hydration mismatches like "Text content did not match", routing issues with App Router or Pages Router, build failures, dynamic import problems, API route errors, middleware issues, caching and revalidation problems, or performance bottlenecks. Covers both Pages Router and App Router architectures.