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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
Generates complete, production-ready CRUD (Create, Read, List, Update, Delete) API endpoints for any entity or resource. Use this skill whenever the user asks to scaffold API routes, generate REST endpoints, build a backend for a resource, or says things like "generate CRUD for X", "make API endpoints for X", "build…
Generative Engine Optimization (GEO) skill for optimizing landing pages, SaaS websites, product pages, and marketing copy for AI discoverability. Trigger for product-facing web content, schema markup, LLM visibility, or requests to optimize for ChatGPT, Perplexity, Gemini, and similar AI search tools. This skill is…
Forces AI to write conversion-focused copy using the PAS (Problem-Agitate-Solve) framework before generating frontend code for landing pages, MVPs, waitlist pages, launch pages, or product one-pagers. Trigger whenever the user wants to build a product-focused website or homepage, even if they directly ask for the code…
Refactors messy or MVP-stage database schemas into clean, production-ready structures by normalizing relations, removing redundancy, adding indexes, and generating safe migration SQL or ORM migrations without data loss. Trigger for any schema cleanup, database refactoring, normalization, indexing, migration, or data…
Decide when to use React.memo, useMemo, and useCallback based on cost vs benefit, referential equality, and re-render behavior. Use when optimizing React performance, fixing unnecessary re-renders, or evaluating memoization patterns.
Build polymorphic React components using an as prop with full TypeScript support for prop inference, ref forwarding, and prop conflict resolution. Use when typing components that render different elements, handling refs, or fixing TS issues with polymorphic patterns.
Implement TanStack Query mutations with proper optimistic updates, including cancel → snapshot → update → rollback sequencing, cache invalidation, and loading/error handling. Use when working with useMutation, fixing rollback issues, or is invalidating too early/late.
Move React state to the appropriate level, lifting it for shared use, pushing it down when local, and avoiding unnecessary global state. Use when dealing with prop drilling, misplaced state, or deciding between local state, context, or global stores.
Audit useEffect hooks for proper cleanup, including removing listeners, canceling subscriptions, clearing timers, aborting fetches, and disconnecting observers. Use when debugging memory leaks, duplicate effects, or state updates on unmounted components.
★not rated 2 3mo agoA51 tokens
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: