asmyshlyaev177

asmyshlyaev177/react-horizontal-scrolling-menu

Skill Claude CodeCodex

Wire mouse, wheel and touch input for react-horizontal-scrolling-menu: onWheel/onScroll are plain (api, event) => void callbacks, while ALL mouse/touch props (onMouseDown, onMouseUp, onMouseMove, onMouseLeave, onTouchStart, onTouchMove, onTouchEnd) are handler factories (api) => (event) => void. Covers mouse…

asmyshlyaev177/react-horizontal-scrolling-menu

Skill Claude CodeCodex

Detect and upgrade pre-v8 react-horizontal-scrolling-menu patterns that agents trained on older data still generate: destructured visibleElements/isFirstItemVisible/isLastItemVisible/initComplete (removed v6), Separator items, separatorClassName and getPrevItem/getNextItem (removed v7), the Arrows prop (removed v3)…

asmyshlyaev177/react-horizontal-scrolling-menu

Skill Claude CodeCodex

Recipes composed on the react-horizontal-scrolling-menu public API — NOT props: autoplay (setInterval + scrollNext gated on menuVisible), infinite loop/carousel (clone head/tail + scrollLeft teleport at seams), center on click (scrollToItem 'center'), save/restore scroll position (onUpdate, onInit, scrollContainer)…

asmyshlyaev177/react-horizontal-scrolling-menu

Skill Claude CodeCodex

Imperative scrolling for react-horizontal-scrolling-menu: scrollToItem(getItemById(id), behavior, inline, block), scrollNext/scrollPrev, apiRef for controlling the menu from outside (fire methods, never read data), getItemElementById/getItemElementByIndex for just-added items, and page-at-a-time navigation with…

asmyshlyaev177/react-horizontal-scrolling-menu

Skill Claude CodeCodex

Build a working react-horizontal-scrolling-menu: install, the mandatory 'react-horizontal-scrolling-menu/dist/styles.css' import, ScrollMenu with a unique itemId per child, arrow components via VisibilityContext with useLeftArrowVisible/useRightArrowVisible, Header/Footer slots, and CSS customization (fixed item…

asmyshlyaev177/react-horizontal-scrolling-menu

Skill Claude CodeCodex needs its repo

Server rendering and testing for react-horizontal-scrolling-menu: the library is client-only ('use client' required in React Server Components, else "createContext is not a function"), SSR first paint is controlled by the useIsVisible defaultValue argument (canonical ('first', true) / ('last', false))…

asmyshlyaev177/react-horizontal-scrolling-menu

Skill Claude CodeCodex

Animate react-horizontal-scrolling-menu scrolling and build right-to-left menus: noPolyfill defaults to true since v8, so transitionDuration (default 500), a custom-easing-function transitionBehavior, and per-call ScrollOptions { duration, boundary } on scrollToItem/scrollNext/scrollPrev are silently ignored unless…

asmyshlyaev177/react-horizontal-scrolling-menu

Skill Claude CodeCodex

Track which react-horizontal-scrolling-menu items are on screen: useIsVisible(itemId | 'first' | 'last', defaultValue), useLeftArrowVisible/useRightArrowVisible, the options prop (ratio, rootMargin, threshold), items.getVisible()/subscribe/unsubscribe, and the async IntersectionObserver truth model (items must be seen…

asmyshlyaev177/state-in-url

Skill Codex needs its repo

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states.…

asmyshlyaev177/state-in-url

Skill Claude CodeCodex needs its repo

Set up useUrlState in Astro (state-in-url/astro) inside React islands, and keep state in the URL on pages with no client framework at all through encodeState/decodeState in the frontmatter. Covers the searchParams island prop for a matching server render, sharing state between islands, and the replace/push choice with…

asmyshlyaev177/state-in-url

Skill Claude CodeCodex

Define typed, module-scoped state and wrap useUrlState in a feature-scoped custom hook so unrelated React components share the same URL-synced state. Covers drawer/modal open-state, tab switching, multi-select toggles, reset/defaults semantics, and the object-identity-based sharing model. Load this skill when storing…

asmyshlyaev177/state-in-url

Skill Claude CodeCodex

Use the URL as a form draft store by pairing useUrlState with react-hook-form (or formik). Share one module-scoped defaults object between both libraries; hydrate useForm.defaultValues from urlState; push form changes back into setUrl via RHF subscribe() (NOT watch()). Load this skill when a form should round-trip its…

asmyshlyaev177/state-in-url

Skill Claude CodeCodex

Reconcile instant local input feedback with URL write throttling. setState updates internal state synchronously (instant re-render); setUrl is throttled and asynchronous (URL catches up on the next tick). Use this skill for text inputs, search boxes, sliders, range pickers, and any control that fires many updates per…

asmyshlyaev177/state-in-url

Skill Claude CodeCodex

SSR-safe useUrlState in Next.js App Router. Forward searchParams from server pages (awaiting the Promise in Next.js 15+) rather than calling useSearchParams(), decide between useHistory true/false, keep pages prerenderable, and use a Proxy (formerly middleware) to expose query params to server layouts. App Router only…

asmyshlyaev177/state-in-url

Skill Claude CodeCodex

Put state in the URL in a plain React app with no router — Vite, Create React App, a widget mounted into someone else's page — with useUrlState from state-in-url/react. Covers why no useUrlState is exported from the package root (every one is tied to a framework), the cross-component sharing model that makes prop…

asmyshlyaev177/state-in-url

Skill Claude CodeCodex

Set up useUrlState for React Router v7 (state-in-url/react-router), React Router v6 (state-in-url/react-router6 — moved here in 6.0.0), and Remix v2 (state-in-url/remix). The hook API is identical across all three; only the import path and per-call NavigateOptions (preventScrollReset, state, replace) differ. Load this…

asmyshlyaev177/state-in-url

Skill Claude CodeCodex

Use useSharedState (from state-in-url, NOT a framework subpath) as a framework-agnostic cross-component state primitive when URL sync is explicitly NOT wanted. Same module-scoped default-state-identity rule as useUrlState. A lightweight Context.Provider replacement that works in React, Next.js, Vite, Remix without…

asmyshlyaev177/test-proxy-recorder

Skill Claude CodeCodex

Tag server-side fetches with the x-test-rcrd-id session header so SSR is recorded under the correct Playwright test session. Lead with registerProxyFetch (patch global fetch in the root layout, any runtime) and registerProxyAxios (per-axios-instance interceptor); createHeadersWithRecordingId is the patch-free per-call…

asmyshlyaev177/test-proxy-recorder

Skill Claude CodeCodex needs its repo

Set up test-proxy-recorder for any Playwright project. Covers the proxy CLI (test-proxy-recorder --port --dir), package.json scripts for the three-service architecture (UI app → proxy → backend API), playwright.config.ts webServer block pointing to /control, per-test fixtures using playwrightProxy.before(page…

asmyshlyaev177/test-proxy-recorder

Skill Claude CodeCodex needs its repo

Record and replay TanStack Start SSR with test-proxy-recorder. Tag server-side fetches (route loaders, server functions, server routes) with the x-test-rcrd-id session header so parallel replay stays correct. Lead with registerProxyFetch (patch global fetch once at the top of src/router.tsx)…