Skills Collection

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

Injects retrieved context into prompts correctly — covers context formatting, source attribution, context window budget management, and relevance filtering. Use when building RAG pipelines, document Q&A, search-augmented generation, or any artifact where retrieved chunks must be fed into a Claude prompt reliably.

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.

Implements chunking strategies for documents before embedding or retrieval — covers fixed-size, semantic, recursive, and sliding window approaches with overlap and metadata preservation. Use when building RAG pipelines, document ingestion, vector store population, or any artifact where documents must be split before embedding.

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.

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.

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.

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.

Compress prompts to reduce token count without degrading output quality. Use this skill when the user wants to shorten a system prompt, user prompt, or instruction block; when they say a prompt is "too long", "hitting token limits", or "too expensive to run"; when they want to audit a prompt for bloat; or when they want to make a prompt leaner before scaling it to production. Trigger even if the user says "clean up my prompt" or "tighten this up" — compression is almost always part of what they mean.

Evaluates RAG pipeline quality end-to-end. Use when measuring retrieval precision/recall, answer faithfulness, hallucination rate, or comparing RAG configurations. Trigger for any task involving RAG quality assessment, LLM-as-judge evaluation, RAGAS metrics, groundedness checks, or A/B comparison of retrieval or generation changes.

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.

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.

Parses structured output from LLM responses. Use when extracting JSON from markdown-fenced LLM output, handling partial or streamed JSON, recovering from malformed model responses, or building robust pipelines that consume Claude/OpenAI structured outputs. Trigger for any task involving LLM output parsing, JSON extraction from model responses, stream parsing, or structured output error recovery.

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.

Implements optimized retrieval strategies for RAG and search pipelines. Use when building or improving document retrieval, choosing between similarity search, hybrid search, reranking, or MMR, diagnosing retrieval quality issues, or tuning recall/precision tradeoffs in LLM-powered search. Trigger for any task involving vector search, embedding retrieval, semantic search, BM25, reranking, or RAG pipeline optimization.

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.

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.

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.

Implements the agentic tool execution loop for Anthropic API artifacts — covers tool call detection, dispatch to handler, result injection, and multi-turn continuation until the model signals completion. Use this skill when building any AI-powered artifact that needs Claude to call tools (web search, MCP, custom functions) and loop until a final text response is produced.

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.

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.

Fix incorrect or missing useEffect dependency arrays, handling exhaustive-deps issues, stale closures, and intentional omissions. Use when effects re-run incorrectly, read stale values, or trigger eslint warnings across useEffect, useCallback, or useMemo.

Keep API docs in sync with implementation by generating or validating OpenAPI/Swagger specs, detecting undocumented routes, and fixing spec drift. Use when the user asks to generate docs, validate a spec, find undocumented endpoints, or update stale API documentation.

Generate integration tests for REST API endpoints covering auth, validation, success and error responses, and DB side effects. Use when testing endpoints end-to-end or verifying route behavior and data persistence.

Implement API versioning with URL or header strategies, deprecation handling, and backward compatibility. Use when the user asks about versioning, managing breaking changes, evolving APIs, supporting multiple versions, or handling v1/v2 migrations.

Test async UI components (e.g., React) covering loading, success, error, and retry states using proper async queries. Use when testing data-fetching components or avoiding act-related issues.

Implement cache invalidation strategies for data consistency. Use when handling stale data, invalidating on updates, designing cache flows, or working with SWR, cache tags, or event-driven invalidation across Redis, CDNs, or client caches.

Write tests against a real test database to verify CRUD operations, queries, constraints, transactions, and migrations. Use when validating DB logic, ORM/repository layers, or data integrity without mocks.

Implement correct transaction handling with proper isolation levels, retries, and rollback on failure. Use when dealing with concurrency issues, deadlocks, inconsistent data, or transaction design (e.g., SELECT FOR UPDATE, locking strategies).

Write E2E tests for full auth flows (register, login, logout, reset, protected routes) with session reuse. Use when testing authentication, session handling, or protected route access end-to-end.

Identify and write E2E tests for the most critical user flows (top 3–5) that impact revenue or retention. Use when defining smoke tests or deciding what to test first.

Write tests for error paths, including exceptions, rejected promises, fallback behavior, and invalid inputs. Use when the user wants to cover failure modes, edge cases, or “unhappy paths.”

Implement JWT auth on the backend, including token generation, validation, refresh rotation, revocation, and secure storage. Use when building token-based auth, securing endpoints, or handling expiry and access/refresh flows.

Implement safe database migrations with zero-downtime patterns, rollbacks, and strategies for large schema changes without data loss. Use when the user asks about migrations, schema updates, backfills, column/table changes, or tools like Flyway, Liquibase, Alembic, or ActiveRecord.

Create reusable mock or stub factories that generate configurable, typed fakes for tests. Use when mocks are repetitive, hard to maintain, or need per-test customization.

Detect and fix N+1 query patterns using eager loading, batching, or dataloader approaches. Use when queries run in loops, ORM lazy loading causes repeated DB calls, or the user reports slow endpoints or N+1 issues. Also trigger when the user shares code with loops that call .find(), .load(), .fetch(), or any ORM relation access inside an iteration, or when query logs show the same query repeated with different IDs.

Implement efficient pagination using offset, cursor, or keyset strategies. Use when fixing slow or deep pagination, high offsets, infinite scroll, or designing list endpoints.

Test that users cannot access others’ resources, covering IDOR, role violations, and ownership checks. Use when validating authorization, access control, or multi-tenant isolation.

Optimize slow SQL queries using plan analysis, indexing, join tuning, subquery/CTE simplification, and pagination improvements. Use when the user shares slow queries, EXPLAIN output, or reports high execution time, sequential scans, or inefficient joins.

Write tests for background jobs and queue workers covering processing logic, retries, and failure handling. Use when testing workers, job processors, or queue consumers and their behavior.

Create typed fixture and factory systems for test data with sensible defaults and per-test overrides. Use when tests repeat large objects or need reusable data builders.

Fix test isolation by removing shared state, global side effects, and order dependencies. Use when tests are flaky, fail in CI, or pass individually but fail together.

Write tests for third-party integrations using mocks, fixtures, or sandboxes to verify API calls, webhooks, retries, and failure handling without hitting live services.

Generate unit tests covering happy paths, edge cases, boundaries, and error conditions with meaningful assertions. Use when the user asks to write tests, improve coverage, or verify behavior of a function or module.

Build a production-grade outbound webhook system with retries, signing, failure tracking, and re-delivery. Use when implementing webhook delivery, event subscriptions, or handling webhook failures and reliability.

Enforce a strict monochrome UI with a single high-contrast accent color, removing generic tech gradients and “AI-style” palettes. Use when the user wants minimal, anti-AI, or non-generic aesthetics, or says the UI looks too techy or generic.

Evaluate how logic handles edge cases and extreme inputs. Use when checking robustness, debugging failures, or testing boundaries like empty input, zero values, or limits

Normalizes rounded corners across a file so buttons, inputs, cards, modals, badges, and all UI elements share the exact same curvature. Use this skill whenever the user mentions inconsistent border radii, wants to unify rounded corners, asks to make UI elements look more cohesive, or says things like "make the corners match", "fix the rounding", "unify border radius", "standardize my rounded corners", or "buttons and cards don't match". Also trigger when the user pastes a CSS/HTML/JSX/TSX file and asks for a design consistency pass, border radius is one of the first things to normalize.

Align all spacing (padding, margins, gaps) to a consistent 4pt/8pt grid. Use when spacing feels off, inconsistent, cramped, or unbalanced, or when the user asks for a spacing scale or alignment fix.

State the likely root cause before writing code. Use when debugging bugs, errors, or failing tests to enforce hypothesis-driven fixes.

Add polished CSS micro-interactions like hover effects, transitions, and feedback states to improve UI feel. Use when the user asks for animations, better UX, or when the interface feels static, plain, or unresponsive.

Sort Tailwind CSS utility classes into a clear, consistent order (layout, spacing, sizing, typography, visual). Use when classes are messy, hard to read, or when the user asks to clean up or organize Tailwind code.

Improve typography by adjusting font sizes, weights, spacing, and contrast to create clear visual hierarchy and readability. Use when text feels flat, unstructured, or when the user asks to refine headings, type scale, or overall readability.

Validate that function inputs match the expected shape. Use when debugging unexpected behavior, null errors, type issues, or incorrect arguments.

Audit endpoints for missing or bypassable authorization checks. Use when the user asks about access control, route protection, ownership checks, IDOR, privilege escalation, or whether one user can access another user’s data.

Audit and fix CORS configuration. Use this skill when the user mentions CORS, cross-origin requests, Access-Control headers, wildcard origins, preflight, OPTIONS requests, credentials with CORS, or gets a CORS error — including "how do I fix CORS?" or "is my CORS config safe?".

Audit a GraphQL API for security issues. Use this skill when the user mentions GraphQL, query depth, introspection, batching abuse, field-level authorization, resolver security, N+1 in security context, or asks "is my GraphQL API secure?" or "how do I lock down GraphQL?".

Identify and fix Insecure Direct Object Reference (IDOR) vulnerabilities. Use this skill when the user mentions IDOR, sequential IDs, guessable IDs, object reference, users accessing other users' data, or asks "can a user access another user's resource?" or "are my IDs safe to expose?".

Add a centralized input validation layer at all system entry points. Use this skill when the user mentions input validation, schema validation, request validation, Zod, Joi, Yup, sanitizing API input, validating webhooks, form submissions, or asks "how do I validate incoming data?" or "where should validation live?".

Implement or audit role-based access control (RBAC). Use when the user asks about roles, permissions, admin restrictions, route protection, permission checks, or validating existing RBAC for gaps.

Audit frontend or backend for XSS vulnerabilities and fix them. Use this skill when the user mentions XSS, cross-site scripting, innerHTML, dangerouslySetInnerHTML, unsanitized input, output encoding, CSP headers, script injection, or asks "is this safe to render?" or "how do I sanitize user input?".

Audit or implement JWT authentication flows. Use when the user asks about JWTs, tokens, refresh tokens, storage, signing algorithms, or revocation, even if only one part of the auth flow is mentioned.

Implement or audit OAuth 2.0 authorization code flow. Use this skill for OAuth, PKCE, authorization codes, token exchange, scopes, redirect URIs, state parameter, social login, or "login with Google/GitHub/etc." — including narrow questions like "do I need PKCE?" or "what scopes should I request?".

Find and replace `any` types in TypeScript with precise types, generics, or `unknown` plus narrowing. Use when improving type safety, fixing implicit `any`, removing `any`, or migrating code to strict TypeScript.

Detect and resolve circular import chains that cause undefined values, runtime errors, or build/test warnings. Use when the user reports circular dependency warnings, undefined imports, or order-dependent test failures. Also trigger when shared imports suggest a dependency cycle.

Refactor classes or modules with too many responsibilities into smaller, cohesive units that follow the Single Responsibility Principle (SRP). Use when the user asks to split a god object, fat class, or bloated module, or when a file clearly handles multiple concerns.

Refactor long or multi-purpose functions into smaller, single-responsibility functions with clear names. Use when a function is large, complex, hard to read/test, or when the user asks to split, clean up, or reduce function complexity. Also trigger if pasted code contains an obviously large function.

Identify overly large or tightly coupled modules and split them into well-bounded units with clear public interfaces. Use when the user asks to reorganize modules, fix circular dependencies, separate concerns, or define module boundaries. Also trigger when shared code structure shows god modules, cross-cutting imports, or tight coupling.

Audit and refactor unclear, abbreviated, or misleading identifiers across a codebase, including variables, functions, parameters, files, and modules. Use this skill when the user asks to rename things, improve naming, audit identifiers, or fix cryptic names like `d`, `tmp`, `handleStuff`, or `doTheThing`. Also trigger for requests like "better names", "clearer code", or when poor naming likely causes readability issues.

Flatten deeply nested conditionals using guard clauses, early returns, or patterns like strategy, without changing behavior. Use when the user asks to simplify conditional logic, reduce nesting/indentation, or clean up “pyramid of doom” style code. Also trigger when pasted code shows 3+ levels of nesting.

Replace brittle snapshot tests with focused, meaningful assertions that verify behavior. Use when improving test reliability, fixing flaky tests, or migrating away from `toMatchSnapshot` / `toMatchInlineSnapshot`.

Specializes in clean code principles, SOLID design patterns, and modern software engineering best practices. Analyze and refactor the provided code to improve its quality, maintainability, and performance.

Explain complex or legacy code in plain English, including what it does, why it likely exists, and how it can be safely modified or refactored. Use when users paste confusing, messy, undocumented, or inherited code and ask what it does, how to change it, what might break, or request comments/documentation. Outputs a structured, human-readable breakdown rather than just inline comments

Analyze a component and determine when and how to split it based on size, responsibility, and reuse signals, producing a refactored structure with clear boundaries. Use when users share large, mixed-concern, or hard-to-test components, or ask about splitting, refactoring, or improving component architecture.

Refactor a monolithic UI component into a compound component pattern with a clean consumer API (e.g., `<Tabs><Tab /></Tabs>`), using React context to share state between subcomponents. Use when users want a composable, prop-light API for complex widgets or mention compound components, headless patterns, or components like Tabs, Accordion, Dropdown, Modal, or similar UI primitives.

Identify and fix unnecessary React re-renders caused by Context by splitting providers or memoizing values. Use when users report slow React performance, excessive re-renders, or Context-related lag, or ask how to optimize useContext or large Context providers.

Audit React form components for mixed controlled and uncontrolled inputs and normalize them to a consistent pattern with clear reasoning. Use when users mention controlled vs uncontrolled issues, input warnings, value vs defaultValue conflicts, or ask to review or refactor form code.

Document how data flows through a feature or system from user action to API to state to UI — producing a step-by-step trace and Mermaid diagram. Use whenever a user wants to map, trace, or document data movement - "how does X work end-to-end", "document this feature", "trace what happens when a user does Y", or when they share code and ask how it works.

Design and document a complete Git workflow for a team, including branching strategy, commit conventions, pull request process, merge rules, CI requirements, and release strategy. Use when creating Git workflow docs, CONTRIBUTING guidelines, or defining version control processes for a project.

Audit a React component tree and classify state as local, shared, or server state, then recommend a refactored structure. Use when users ask about state management, prop drilling, global stores, or where state should live, especially when reviewing component trees or state architecture.

Generate a clear, structured PR description from a diff, commit list, branch name, or change summary. Use when users want to write or improve a pull request description, fill a PR template, or document code changes for review. Includes what changed, why, testing steps, risks, and follow-ups.

Identify prop drilling in React component trees and refactor it using the most appropriate pattern, such as lifted state, React Context, or component composition. Use when users mention passing props through many layers, prop drilling, or ask to simplify or refactor component communication.

Generate a structured, professional README.md from a project's files, such as file structure, manifests (e.g., package.json), and entry points. Use when users want to create or improve a README, document a project, or explain a codebase. Includes project purpose, tech stack, setup, usage, API/CLI reference, environment variables, folder structure, and contribution guidelines.

Profile and fix unnecessary React re-renders using memo, useCallback, and useMemo, explaining what changed and why. Use when users report slow React performance, frequent re-renders, laggy UI, or ask how to profile, memoize, or optimize components.

Generate structured REST API documentation for a set of endpoints. Use when users want API reference docs, endpoint documentation, or descriptions of HTTP routes. Trigger when endpoints, route definitions, controller code, or HTTP methods like GET, POST, PUT, PATCH, or DELETE are provided.

Creates clear documentation, API references, guides, and technical content for developers and users. Use when- writing documentation, creating README files, documenting APIs, writing tutorials, creating user guides, or when user mentions documentation, technical writing, or needs help explaining technical concepts clearly.

Write a comprehensive test plan for a feature or system. Use when users want to create a test plan, QA strategy, or testing checklist for a feature, bug fix, API, UI component, or release. Trigger when a feature, spec, PRD, or ticket is shared and the user asks what or how to test.

Manage large-scale refactoring with Cascade coordination. Activate when users mention "large refactoring", "codebase migration", "architecture refactor", "major refactoring", or "system-wide changes". Handles complex refactoring operations. Use when working with windsurf refactoring large functionality. Trigger with phrases like "windsurf refactoring large", "windsurf large", "windsurf".