Jan Szewczyk

Implement UI components, style with Tailwind CSS, integrate with design systems, build React components, and fix UI bugs. Use proactively for any frontend-related tasks.

Implement backend logic for Next.js applications including server actions, route handlers, API endpoints, database operations, and authentication flows. Use proactively after completing backend implementations.

Use this skill to create or refactor React + TypeScript + Tailwind CSS + CVA components following design system conventions. It provides the canonical file structure, per-component styles pattern, types, context, store, barrel exports, and Storybook story templates that are specific to this codebase. Invoke whenever the user wants to build a new UI component, add CVA variants or sub-components, set up component context or store, create barrel exports, write component stories, or restructure an existing component directory — even for tasks that seem straightforward like "create a Button" or "add a variant", because the skill ensures correct file placement and naming conventions.

Comprehensive error handling for Next.js applications — use whenever adding or fixing error handling, building database or service layer operations, writing server actions, or making an app production-ready. Covers ServiceError (typed error contract for any external service: DB, API, network), tuple return pattern [error, data], ActionResponse for server actions, React error boundaries, toast notifications, retry with exponential backoff, and circuit breaker patterns. Trigger on: "add error handling", "handle database errors", "handle service errors", "retry failed requests", "error boundary", "handle action errors", "toast on error", "log errors", "circuit breaker", "graceful degradation", "categorizeServiceError", "ServiceError".

React 19 patterns and React Compiler optimization guidance. Understand when to use manual memoization vs letting the compiler optimize, and leverage new hooks like useActionState and useFormStatus.

Create Next.js Server Actions with TypeScript following best practices for validation, error handling, auth, and React integration. Use this skill whenever writing or modifying Server Actions in a Next.js project — form submissions, data mutations, CRUD operations, auth-gated actions, redirect flows. Trigger even when the user says "create a server action", "add form handling", "handle form submit on the server", "validate form with Zod", "add server-side mutation", or asks about useActionState / useTransition with actions. Targets Next.js 15/16+ with App Router.

Structured logging patterns with Pino for Next.js applications. Covers log levels, context enrichment, child loggers, and production best practices.

Comprehensive reference for building UI with @szum-tech/design-system — a React component library built on Tailwind CSS 4+ and Radix UI. Use this skill whenever working in a project that imports from @szum-tech/design-system, when building or reviewing UI components, when choosing colors, typography, or layout styles, when deciding which component to use, or when creating new components following this design system's patterns. Covers the full color palette (OKLCH semantic tokens), all typography utility classes, every available component with its variants and props, animation classes, icon imports, and the CVA-based styling system. Always use this skill when the user asks about design tokens, Tailwind classes, or component APIs in the context of this library.

Type-safe environment variable validation with @t3-oss/env-nextjs and Zod. Build-time validation ensures all required env vars are present and correctly typed.

Tailwind CSS v4 patterns with CSS-first configuration, @theme directive, design system integration, and utility-first styling for Next.js applications.

Cookie-based toast notification system for Next.js. Use when user asks to "show toast", "toast notification", "user feedback after action", "toast after redirect", "success message", "error message after form submit", "setToastCookie", "notify user", "flash message", "toast from server action", "show notification after redirect", "display toast after delete".