jmgomezdev

Next.js 16 App Router patterns for Server Components, Server Actions, route handlers, caching, streaming, and version-sensitive request APIs. Trigger: Use when working in Next.js 16 App Router code with app/, layout.tsx, page.tsx, loading.tsx, generateMetadata, Server Actions, route.ts handlers, revalidatePath/revalidateTag, cookies()/headers()/params async APIs, middleware.ts vs proxy.ts naming, or RSC streaming and serialization issues.

Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling

React 19 patterns with Compiler-aware guidance, composition, refs, and effects. Trigger: When working with React components (.tsx, .jsx), effects, refs, context APIs, or render performance/memoization decisions.

Layer-aware testing strategies for Clean Architecture using Vitest, React Testing Library, MSW, and Cypress. Use when creating or reviewing unit, integration, component, architectural, or E2E test plans across `src/domain`, `src/application`, `src/infrastructure`, `src/interface`, and `src/presentation`, especially for mocking-boundary decisions, async reliability, and flaky-test prevention. Trigger keywords: test, vitest, cypress, e2e, mock, msw, renderHook, loader, query, router, zustand.

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

Advanced TypeScript decision patterns for strict typing: satisfies vs type annotations, exhaustiveness checks, const-derived unions, and performance-aware control/data flow. Trigger: Use when the task involves TypeScript modeling decisions (type vs interface, enum alternatives), strict mode/type errors, generics, utility types, or hot-path performance issues in branching/looping.

Architecture tests with ArchUnitTS for Clean Architecture boundaries and import rules. Trigger: When adding or updating architecture tests or enforcing layer dependency rules.

Workflow for repositories managed by ghcopilot-hub. Trigger: Use when the repository contains `.github/ghcopilot-hub.json`, managed files under `.github/agents/` or `.github/skills/`, or when the user asks to run ghcopilot-hub commands, add/remove packs or skills, inspect drift, update managed files, or customize a consumer repository safely.

Testing E2E strategies based on Clean Architecture layers with cypress. Trigger: Invoke when writing tests E2E or testing user flows, verifying full integration in realistic scenarios.

Standardizes how the application handles asynchronous states, errors, and feedback using TanStack Query/Router patterns. Trigger: Apply when building async UIs to implement Suspense, Skeletons, and Error Boundaries instead of manual loading states.

Tailwind CSS 4 patterns and best practices. Trigger: When styling with Tailwind - cn(), theme variables, no var() in className.

TanStack Query and Router patterns and best practices. Trigger: When implementing data fetching and routing with TanStack Query and Router.

Testing strategies based on Clean Architecture layers. Trigger: Invoke when writing tests to enforce layer-specific mocking strategies (Unit vs Integration)

TypeScript strict patterns and best practices. Trigger: When writing TypeScript code - types, interfaces, generics.

Zod 4 schema validation patterns. Trigger: When using Zod for validation - breaking changes from v3.

Zustand 5 state management patterns. Trigger: When managing React state with Zustand.