Fullstack Skills

Keeps auth state in sync across browser tabs, page refreshes, and token expiry. Use when implementing cross-tab logout, silent token refresh, storage-event-driven auth, or any pattern where auth state must stay consistent without page reload. Triggers on - sync auth across tabs, logout all tabs, silent refresh, token expiry handling, auth state out of sync, refresh token rotation

Implement a data transformation layer that maps DB models → API DTOs and API responses → UI models without leaking internal fields. Use when separating DB schema from API contracts, building mappers/serializers, or shaping frontend-specific data. Trigger on DTOs, response shaping, presenter patterns, or preventing internal field exposure.

Implement deep linking so URL state drives UI (filters, modals, tabs, pagination), enabling shareable links and proper browser navigation. Use when syncing UI state to query params, preserving state on refresh, or fixing back/forward behavior.

Implement end-to-end file uploads with drag-and-drop UI, presigned URLs, direct-to-cloud uploads, progress handling, backend confirmation, and CDN delivery. Use when building scalable upload flows or avoiding server-side proxy uploads. Trigger on file uploads, S3/GCS presigned URLs, direct uploads, multipart uploads, or file storage/CDN setup.

Keep database schema, backend types, and frontend types in sync via codegen, migration hooks, and CI validation to prevent drift. Use when generating types from schemas, automating migrations, or enforcing schema/type consistency in CI.

Implement in-app notifications end-to-end with backend event generation, persistent storage, real-time delivery, and read/unread state. Use when building notification systems, notification UIs (bell/feed), or syncing backend events to users. Trigger on in-app notifications, unread counts, mark as read, notification center, or real-time user alerts.

Implement infinite scroll end-to-end with cursor-based pagination, IntersectionObserver, loading states, and scroll position preservation. Use when building feeds, “load more” lists, or replacing offset pagination with cursor-based loading.

Implement optimistic UI updates with instant state changes, rollback on failure, and user feedback. Use when making mutations feel immediate while handling errors, race conditions, and data consistency.

Handle edge cases in payment and subscription state sync beyond basic webhooks, including out-of-order event delivery, retries, and status reconciliation. Ensure accurate UI display for payment states, grace periods, and next actions. Use when debugging webhook ordering issues, syncing Stripe status with your system, or building reliable billing status pages. Trigger on out-of-order webhooks, stale or incorrect status, payment retries, subscription state mismatch, or billing UI inconsistencies.

Add real-time data sync between backend and frontend using WebSockets, SSE, or polling fallback, including reconnection handling and state reconciliation. Use when implementing live updates, push-based data flows, or syncing client state with server changes. Trigger on real-time features, WebSocket/SSE setup, live feeds, reconnect logic, or keeping UI in sync without manual polling.

Audit frontend API consumption against actual backend responses to detect mismatches such as assumed-but-missing fields, incorrect types, and unhandled null/undefined values. Use when fixing runtime crashes (e.g., “cannot read property of undefined”), validating response shapes, or hardening data handling. Trigger on signs like API mismatch, undefined fields at runtime, differing backend shapes, excessive optional chaining, or unstable UI due to inconsistent API data.

Implement end-to-end RBAC across frontend and backend using a shared permission model, avoiding duplicated logic. Use when adding route guards, UI gating, backend enforcement, or syncing role/permission checks. Trigger on RBAC, role-based access, admin-only routes, permission checks, or duplication between frontend and backend.

Implement route-level permission enforcement using guard composition and declarative route manifests, supporting nested and wildcard routes. Use when centralizing permissions, chaining guards, or enforcing access across dynamic or hierarchical routes.

Implement subscription billing end-to-end with plan selection UI, Stripe checkout, webhook lifecycle handling, plan-based access control, trials, and upgrade/downgrade/cancellation flows. Use when building or managing subscriptions, handling Stripe webhooks, enforcing plan limits, or syncing billing state with your app. Trigger on subscription billing, Stripe subscriptions, checkout sessions, webhooks, trial periods, billing portals, or subscription status changes.

Set up shared TypeScript types between frontend and backend to prevent type drift. Use this skill when the user wants to share types across a fullstack TypeScript project, set up a shared types package in a monorepo, generate types from an API schema or database, or eliminate runtime type mismatches between client and server. Trigger on phrases like "shared types", "type drift", "frontend and backend out of sync", "generate types from schema", "zod + trpc", "prisma types", or any request to create a shared types layer in a fullstack app.