asmyshlyaev177

@asmyshlyaev177 source repo

27 skills
0 followers
4 hours ago last updated

▌
Impeccable 2 · asmyshlyaev177 bundle
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. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.

0
installs
▌
Impeccable 3 · asmyshlyaev177 bundle
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. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.

0
installs
▌
Bedframe · asmyshlyaev177 bundle
Work in a Bedframe browser extension project. Use when the repository contains AGENTS.md, src/_config/bedframe.config.ts, src/manifests/*, or the task involves the Bedframe CLI, @bedframe/core, browser manifests, extension pages, Vite config, or release flow.

0
installs
▌
Bedframe Your Skill Name · asmyshlyaev177
Replace with a description of what this skill does and when an agent should use it.

0
installs
▌
Ringfence · asmyshlyaev177 bundle
A brief description of what this skill does

0
installs
▌
SEO Audit · asmyshlyaev177 bundle
When the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tags review," "SEO health check," "my traffic dropped," "lost rankings," "not showing up in Google," "site isn't ranking," "Google update hit me," "page speed," "core web vitals," "crawl errors," or "indexing issues." Use this even if the user just says something vague like "my SEO is bad" or "help with SEO" — start with an audit. For building pages at scale to target keywords, see programmatic-seo. For adding structured data, see schema-markup. For AI search optimization, see ai-seo.

0
installs
▌
Proxy Setup · asmyshlyaev177 bundle
Set up test-proxy-recorder for any Playwright project. Covers the proxy CLI (test-proxy-recorder <target> --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, testInfo, mode, { url }), HAR browser-side recording via url pattern, .mock.json server-side recording, record/replay/ transparent modes, the record-once→commit→CI-replay lifecycle, automatic secret redaction of Authorization/Cookie/Set-Cookie headers (--no-redact, --redact-headers, --redact-body), an optional config file (test-proxy-recorder.config.ts via defineConfig, --config) with CLI-overrides- config precedence, and parallel test execution with fullyParallel. Load this skill when installing test-proxy-recorder, writing Playwright fixtures, or configuring record/replay.

0
installs
▌
Tanstack Start · asmyshlyaev177 bundle
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); createHeadersWithRecordingId and getRecordingId are the patch-free per-call options. Covers the vite build + node .output/server/index.mjs vs vite dev caveat, TEST_PROXY_RECORDER_ENABLED, the server BACKEND_URL vs browser import.meta.env.VITE_API_URL split, TanStack Query SSR prefetch (ensureQueryData / useSuspenseQuery), and the real-auth pattern (transparent-mode login, Bearer redaction, localStorage-token vs cookie session). Load this when setting up test-proxy-recorder in a TanStack Start (Vite + Nitro) app that makes server-side or authenticated API calls.

0
installs
▌
Typing Flows · asmyshlyaev177
Soak a form field or text input with playwright-soak without the run failing on Chromium's own bookkeeping. Covers calibrateTypingCost, the TypingGesture signature, the typingCost threshold on expectNoLeak, and passing the measured cost to formatSoak. Load when a soak test that types into an input reports accumulating DOM nodes, when a typing or form soak test is called flaky, or when a flow uses fill / pressSequentially / press inside the soak loop.

0
installs
▌
Writing Soak Tests · asmyshlyaev177
Write a Playwright memory-leak soak test with playwright-soak. Covers attachCDP, soak({ client, flow, iterations, warmup, sampleEvery }), getPageMetrics, shaping a flow that survives repetition, and the playwright.config.ts a few-hundred-iteration run needs (Chromium-only projects, raised timeout, production build rather than dev server). Load when adding a memory leak or soak test, repeating a user flow to detect detached DOM nodes, event listener growth or heap climb, or when a soak run times out or errors instead of reporting a verdict.

0
installs
▌
Interpreting Results · asmyshlyaev177
Decide whether a playwright-soak run actually leaked and which threshold to move. Covers expectNoLeak, checkLeaks, LeakFinding, LeakThresholds (nodes, listeners, documents, typingCost, heapRatio, heapNoise), reading the formatSoak log block, and the heapHalves / metricHalves / metricStretches helpers behind the verdict. Load when a soak test fails and it is unclear whether the growth is real, when tuning leak thresholds for an application, when a soak test is called flaky, or when asserting on one metric rather than the whole result.

0
installs
▌
Menu Setup · asmyshlyaev177
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 width, spacing via gap on the scroll container, hiding the scrollbar). Load when creating a category row, tab strip, chip filter, or any horizontal scrolling list, or when a menu renders vertically, arrows do nothing, or item visibility is not tracked.

0
installs
▌
Menu Recipes · asmyshlyaev177 bundle
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), load-more with a loader item (items.last()?.visible in onUpdate), one item per scroll (getPrevElement/getNextElement), hiding arrows, multiple menus, tab switching. Load when asked for autoplay, looping, carousel-like behavior, infinite scroll, or any feature missing from the props table — inventing an autoplay/loop/snap prop generates dead code.

0
installs
▌
Menu Migration · asmyshlyaev177
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), missing dist/styles.css import (required since v4), CJS require of the ESM-only package (v5), transitionDuration/transitionBehavior silently ignored after the v8 noPolyfill flip, the misleading 8.1.0 changelog BREAKING block, and >=8.2.2 for TypeScript moduleResolution node16/bundler. Load when upgrading versions or whenever generated or reviewed code uses any of those removed APIs.

0
installs
▌
Menu Scrolling · asmyshlyaev177 bundle
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 slidingWindow + getItemsPos. Load when scrolling to an item on mount or selection, controlling the menu from outside, scrolling after adding items dynamically, or when scrollToItem silently does nothing or the whole page jumps to the menu.

0
installs
▌
Menu Visibility · asmyshlyaev177
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 once, menuVisible gating, non-reactive isFirstItemVisible reads). Load when disabling arrows at the edges, styling items by visibility, building progress indicators, or debugging flickering or dead arrows.

0
installs
▌
Menu Testing Ssr · asmyshlyaev177
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)), transpilePackages for older Next.js, Jest moduleNameMapper to dist/index.cjs for "Cannot use import statement outside a module" plus an IntersectionObserver class mock for jsdom (ReferenceError on mount without it), and async poll-based assertions (Playwright preferred). Load when integrating with Next.js / TanStack Start, fixing hydration flicker, or writing tests for the menu.

0
installs
▌
Menu Interactions · asmyshlyaev177
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 drag-to-scroll with the DragDealer pattern and dragging guard, onMouseLeave to stop drags, body-scroll locking, touchpad-vs-wheel detection, desktop swipe. Load when adding drag-to-scroll or custom wheel behavior, or when fixing clicks firing after drags or "Unable to preventDefault inside passive event listener".

0
installs
▌
Menu Transitions Rtl · asmyshlyaev177
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 noPolyfill={false} (string 'smooth' | 'auto' behaviors still reach native scrollIntoView); the RTL prop (only a direction: rtl CSS class) and its limits — never combine RTL with transition props. Load when scroll animation speed/easing has no effect, when customizing transitions, or when building RTL menus.

0
installs
▌
Nextjs Ssr · asmyshlyaev177
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 — Pages Router is not supported. Load this skill for any use of state-in-url/next or anytime URL state must be correct on first paint.

0
installs
▌
Astro Setup · asmyshlyaev177
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 no client router involved. Load this skill when the project is Astro, with React islands, Preact islands (compat), or no client framework at all.

0
installs
▌
Input Handling · asmyshlyaev177
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 second where binding setUrl directly to onChange causes perceived lag or wasted URL writes.

0
installs
▌
Impeccable · asmyshlyaev177 bundle
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. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.

0
installs
▌
Feature State Hook · asmyshlyaev177
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 filters, tabs, drawers, selections, paginators, or any UI state that should survive reloads and be shareable by URL, and when a link to another route has to carry that state with it.

0
installs
▌
Shared State No Url · asmyshlyaev177
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 setup. Load this skill when the user wants shared state but specifies "no URL", or for state that is sensitive, ephemeral, or too large to live in the URL.

0
installs
▌
Form Library Integration · asmyshlyaev177
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 values through the URL — filter forms, search forms, multi-step wizards with shareable draft links.

0
installs
▌
React Router Remix Setup · asmyshlyaev177
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 skill when wiring useUrlState into any non-Next.js React router or migrating from an older import path.

0
installs

27 published skills