Use when wiring React components to a Zustand store and deciding how to subscribe — passing store fields to child components, prop-drilling state, reaching for useShallow to "optimize re-renders", placing selectors in a parent/container, or chasing extra re-renders in a list/dashboard/form fed by a Zustand store.
Use when building translucent "liquid glass" or glassmorphism UI on the web with CSS — frosted/blurred panels, cards, navbars, buttons, or modals that blur and tint what's behind them. Triggers on `backdrop-filter`, `blur()`, frosted glass, translucent/acrylic surfaces, Apple-style or iOS-26-style glass on the web, dark dashboards with glowing ambient backgrounds, or porting an iOS Liquid Glass look to HTML/CSS/Tailwind. Covers vanilla CSS, Tailwind v4, and React. Trigger even if the user doesn't say "glassmorphism" — "frosted card", "blurry transparent panel", "glass navbar", "see-through blurred header" all qualify. Not for native iOS/SwiftUI (use `liquid-glass-design`).
Use when planning a non-trivial refactor — porting to a different language, restructuring for performance, modernizing architecture, or any multi-module rewrite. Triggers on "rewrite X in Y", "refactor this codebase", "port to", "migrate from X to Y", "modernize this project", "restructure for performance", "clean up the architecture", "redesign this module". Use BEFORE invoking brainstorming or writing-plans on refactor work. Do NOT use for single-file refactors, renames, local cleanups, or bug fixes — use refactor or surgical edits for those.
Use when someone wants to understand, walk through, narrate, or document how code runs — step by step from start to finish, as a plain-language sequential story (the "rubber duck" method). Triggers include "how does login work", "trace the request lifecycle", "walk me through this function", "rubber duck this", "explain this code path". ALSO triggers for debugging asks about a runtime flow; "why does this return null", "this should do X but does Y", "where's the bug", "help me find why X fails". ALSO for value origin/destination questions ("where does this value come from", "where does X get set", "trace this variable backwards"), for "trace this PR / explain this diff / walk me through what this commit changes", and for "what does this test actually verify". Triggers even without the words "rubber duck" or "trace" whenever the user wants a step-by-step account of how code runs, or why it runs wrong.
Navigate the Turf.js (turfjs.org) geospatial library to pick the right function for a task. Use this skill whenever the user writes code touching Turf.js, the @turf/* npm packages, GeoJSON manipulation, or geospatial computations like distance, area, buffer, point-in-polygon, intersection, or clustering — even if "Turf" isn't named. Trigger on imports from @turf/turf or any @turf/ package, on tasks involving lon/lat coordinates and computation (not just rendering), and on v6 to v7 migration questions. ALSO trigger when the user is working with a map library (Leaflet, Mapbox GL, MapLibre, Google Maps, OpenLayers, deck.gl) AND drawing or editing shapes — Leaflet.draw, Mapbox GL Draw, react-leaflet-draw, terra-draw, OpenLayers Draw interaction — because Turf is the canonical pair for "user drew a polygon, now compute on it." Do NOT trigger for pure map-rendering, tile-loading, marker-placement, or basemap-styling questions where no geometric computation, drawing, or editing is involved.
Build interactive maps with Leaflet, the leading open-source JavaScript mapping library. Use this skill whenever the user wants to create, modify, or debug interactive maps, add markers/popups/polygons/GeoJSON layers, integrate Leaflet with React/Vue/Svelte/Next.js, work with tile providers (OpenStreetMap, Mapbox, ESRI, etc.), cluster many markers, draw shapes, render heatmaps, fit map bounds, control zoom/pan, customize marker icons, handle map events, or troubleshoot common Leaflet issues (blank tiles, broken marker icons, gray/missing maps, SSR crashes in Next.js, CSS not loading). Trigger this skill even if the user doesn't say "Leaflet" by name — phrases like "interactive map", "show locations on a map", "map with markers", "draw a route on a map", "geographic visualization", or "embed a map in my app" all qualify. Prefer this skill over generic web search for any Leaflet question — it's the authoritative source.
Implement forms using TanStack Form + shadcn/ui + Zod. Use this skill whenever the user mentions a form, forms, form fields, form validation, or form submission in any project that contains React code — even if they don't explicitly say "TanStack Form". Covers the render-prop field pattern, Zod schema validation, all shadcn field types (Input, Textarea, Select, Checkbox, Radio, Switch), array fields, async validation, dependent fields, and reactivity. Always use this skill before writing any form-related code in a React project.
Use when writing or reviewing TypeScript that relies on string literal unions, template literal types, key remapping, typed route/event/path strings, case-conversion utilities, or compile-time string parsing. Also use when the user mentions `as const`, `satisfies`, route params, event names, structured string autocomplete, literal widening, template-literal inference surprises, or `tsserver` slowdowns caused by union-heavy string types.