Results for “scroll”

Instruments and workflow for debugging the VirtualList — the chat transcript (`InfiniteList`) and the sidebar (`FiniteList`). Covers the built-in consistency checker, the on-screen overlay, the five `?vl*` URL flags, the touch-gesture rig, the frame recorder, attaching to a real Android device over CDP, and how to read a trace without being fooled by a measurement artifact. Use when the list jumps while scrolling, blanks, sticks on skeletons, or the overscroll/bounce misbehaves. The component's specification is `docs/ui/virtual-list.md`; this skill is only how to *measure* it. Pairs with /debug-ui (browser side) and /server-loop (server side).

The English summary is being prepared. Showing the original description.

Build React animations with Motion (Framer Motion) - gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG. Bundle: 2.3 KB (mini) to 34 KB (full). Use when: drag-and-drop, scroll animations, modals, carousels, parallax. Troubleshoot: AnimatePresence exit, list performance, Tailwind conflicts, Next.js "use client".

The English summary is being prepared. Showing the original description.

Control and interact with a live browser session on any scraped page — click buttons, fill forms, navigate flows, and extract data using natural language prompts or code. Use when the user needs to interact with a webpage beyond simple scraping: logging into a site, submitting forms, clicking through pagination, handling infinite scroll, navigating multi-step checkout or wizard flows, or when a regular scrape failed because content is behind JavaScript interaction. Also useful for authenticated scraping via profiles. Triggers on "interact", "click", "fill out the form", "log in to", "sign in", "submit", "paginated", "next page", "infinite scroll", "interact with the page", "navigate to", "open a session", or "scrape failed".

The English summary is being prepared. Showing the original description.

Use when designing, implementing, or reviewing frontend interaction motion, page transitions, scroll animation, Framer Motion, GSAP, Lottie, CSS animation, motion intensity, animation performance, reduced-motion behavior, or cinematic but accessible UI motion. Do not use for SVG-only path drawing, Canvas/WebGL rendering, or ordinary hover states; Chinese triggers include motion design, interactive effects, page transitions, scroll animation, Framer Motion, GSAP.

The English summary is being prepared. Showing the original description.

Make a web app feel native on a phone — the small CSS and meta-tag fixes that separate "a website in a browser" from something that feels installed. Covers sticky hover states, tap highlight flashes, the 100vh bug, inputs that zoom the page, laggy taps, pull-to-refresh hijacking scroll, content under the notch, long-press selecting button text, carousels that scroll the wrong way, mismatched status bars, and the rule that you test on real hardware. Use when a web app is being built for or reviewed on mobile, when something "works in Chrome but feels wrong on my phone", when building a PWA, a bottom sheet, a carousel, a full-screen layout, or any touch interaction. For motion itself use animate; for React Native use animate-expo.

The English summary is being prepared. Showing the original description.

Use when building a frontend and the user wants a distinctive / animated / "wow" UI element in React + Tailwind - e.g. a laptop-opening-on-scroll, 3D tilt card, spotlight hero, animated beams/background, marquee, bento grid, interactive globe, meteor/particle background, shimmer button, or scroll/reveal motion. Fetches the showpiece component LIVE at build time from code libraries (Aceternity, Magic UI, Cult UI, ReactBits, 21st.dev) via their shadcn registry command (or WebFetch fallback), then adapts it to brand tokens. Also covers plain components (button, form, modal, table, etc.) as a fallback. Triggers on "make it pop", "something flashy", "animated [X]", "like [cool site]", "build a [showpiece] section". NOT for non-React stacks. Inspiration galleries (Dribbble/godly) are visual reference only - never code.

The English summary is being prepared. Showing the original description.

Build React animations with Motion (Framer Motion) - gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG. Bundle: 2.3 KB (mini) to 34 KB (full). Use when: drag-and-drop, scroll animations, modals, carousels, parallax. Troubleshoot: AnimatePresence exit, list performance, Tailwind conflicts, Next.js "use client".

The English summary is being prepared. Showing the original description.

Transforms data into compelling visual narratives by applying narrative structure, annotation techniques, scrollytelling patterns, and honest framing to data journalism, presentations, and infographics. Use when creating data-driven articles or reports, designing infographics with narrative, building scrollytelling experiences, annotating charts to guide interpretation, or when user mentions data storytelling, presentation design, annotated chart, narrative visualization.

The English summary is being prepared. Showing the original description.

Build hyper-personalized, narrative-driven, single-file portfolio/pitch websites in the style of anass.pro. Use when the user asks for a "site like anass.pro", a one-recipient candidacy/pitch site, a behavioral-engineering landing page, a single-file storytelling portfolio with a pixel-art game hero, custom cursor, typewriter text, procedural Web Audio SFX, scroll-revealed scenes, or a dark purple narrative interface that addresses one named reader. Trigger on phrases like "personal pitch site", "one-page candidacy", "narrative portfolio", "scrollytelling pitch", "pixel-art hero", "interactive landing for X", or any request to recreate / clone / adapt anass.pro.

The English summary is being prepared. Showing the original description.

Audits SwiftUI performance: rendering, scrolling, CPU and memory, unnecessary view updates, body re-evaluations, and layout thrashing, with Instruments guidance when code review is inconclusive. Use when a SwiftUI screen stutters, scrolls poorly, or uses too much CPU.

The English summary is being prepared. Showing the original description.

Control and interact with a live browser session on any scraped page — click buttons, fill forms, navigate flows, and extract data using natural language prompts or code. Use when the user needs to interact with a webpage beyond simple scraping: logging into a site, submitting forms, clicking through pagination, handling infinite scroll, navigating multi-step checkout or wizard flows, or when a regular scrape failed because content is behind JavaScript interaction. Also useful for authenticated scraping via profiles. Triggers on "interact", "click", "fill out the form", "log in to", "sign in", "submit", "paginated", "next page", "infinite scroll", "interact with the page", "navigate to", "open a session", or "scrape failed".

The English summary is being prepared. Showing the original description.

Mouse, keyboard, and scroll primitives for cua_click / cua_type / cua_key / cua_scroll. Reference for action shapes, modifier keys, key chord syntax, and screenshot-driven targeting workflows.

The English summary is being prepared. Showing the original description.

Declarative animation patterns using flutter_animate v4.5.x with composable effects (fade, scale, slide, shimmer, shake, blur), GLSL fragment shaders, and scroll-synchronized animations. Use this skill for adding UI animations and transitions, building staggered or sequenced effects, creating custom animation effects, fixing animation jank or performance issues, implementing shimmer loading states, or adding scroll-driven animations. Supports delays, curves, adaptive effects, and easy extension method chaining (.animate()).

The English summary is being prepared. Showing the original description.

Build React animations with Motion (Framer Motion) - gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG. Bundle: 2.3 KB (mini) to 34 KB (full). Use when: drag-and-drop, scroll animations, modals, carousels, parallax. Troubleshoot: AnimatePresence exit, list performance, Tailwind conflicts, Next.js "use client".

The English summary is being prepared. Showing the original description.

Animation, morphing, and shader best practices for Liquid Glass and SwiftUI motion on iOS 26+/macOS 26+ through iOS 27. Use when animating glass or building UI motion: glassEffectID, @Namespace morphing, GlassEffectContainer spacing, glassEffectUnion, glassEffectTransition (.matchedGeometry/.materialize), withAnimation, springs, UnitCurve, PhaseAnimator, KeyframeAnimator, @Animatable, matchedTransitionSource, navigationTransition zoom, scrollTransition, visualEffect, Metal shaders (colorEffect, distortionEffect, layerEffect, [[stitchable]]), accessibilityReduceMotion gating, Instruments/xctrace profiling of hangs and animation hitches. Also fires on symptoms: glass morph not animating, view pops in instead of morphing, glass fades instead of materializing, morph flickers with Reduce Motion, menu glass morphs as a rectangle, animation runs on insert but not removal, PhaseAnimator loops forever or fires once, shader shows clipped edges (maxSampleOffset), animation hitches or main-thread hangs while scrolling glass chrome. For static glass, availability gating, toolbars, UIKit/AppKit glass, or accessibility of the material itself use the liquid-glass skill first.

The English summary is being prepared. Showing the original description.

Implement, review, or improve SwiftUI Liquid Glass effects for iOS 26+. Covers glassEffect modifier, GlassEffectContainer, glass button styles, glass toolbar, glass tab bar, morphing transitions, translucent material, vibrancy, tinting, interactive glass, ToolbarSpacer, scrollEdgeEffectStyle, backgroundExtensionEffect, and availability gating. Use when asked about Liquid Glass, glass buttons, glassEffect, GlassEffectContainer, GlassEffectTransition, glassEffectID, glassEffectUnion, scroll edge effects, or adopting iOS 26 design.

The English summary is being prepared. Showing the original description.

MUST USE whenever the user wants to automate a real desktop or sandbox - clicking, typing, scrolling, screenshotting, running an OS shell command, or handing a high-level 'open browser and do X' task to an autonomous computer-use agent. Wraps the trycua/cua Python toolkit via its `cua` CLI - pynput-based, cross-platform (macOS / Linux / Windows). NO custom tools are registered; you call `cua` through pi's built-in bash and read screenshots back through the Read tool. Triggers: cua, computer use, computer-use, GUI automation, screenshot the desktop, click on the screen, type into the active app, scroll the page, control my computer, drive my browser, sandbox, docker sandbox, QEMU sandbox, Lume sandbox, ComputerAgent, cua do, cua sandbox, 컴퓨터 자동화, 스크린샷 찍어, 내 컴퓨터 조작, 브라우저 열어서, 샌드박스, 화면 자동화, 마우스로 클릭, 키보드 타이핑, computer use 위임, 자동으로 클릭, 자율 에이전트로 처리.

The English summary is being prepared. Showing the original description.

Framer Motion React animation library skill — declarative animations, gestures, layout transitions, scroll-triggered animations, variants, AnimatePresence, and performance optimization.

The English summary is being prepared. Showing the original description.

Use this skill whenever helping someone build, design, or troubleshoot layouts in Elementor Pro V4 using the visual editor. Triggers on ANY mention of Elementor, page builder, Flexbox widget, Div block, section layout, widget configuration, responsive breakpoints, dark mode, scroll animations, Interactions tab, Variables Manager, Class Manager, Custom Code snippets, or any visual design work inside the Elementor panel. Also trigger when someone asks how to position elements, set spacing, apply typography, configure dark mode, prevent FOUC, or build scroll-triggered effects in Elementor. ALWAYS use this skill before suggesting any Elementor V4 implementation — it contains critical V4-specific panel structure, common AI mistakes to avoid, and production-tested patterns.

The English summary is being prepared. Showing the original description.

Assesses what a page's heatmap is telling you and recommends concrete changes. Pulls click / rageclick / scroll-depth data for a URL, names the hot elements by cross-referencing autocapture events on the same page, and can create a saved heatmap the user opens in PostHog, then summarizes the behavior and proposes improvements. TRIGGER when: user asks what a heatmap shows, why people aren't clicking something, where users rage-click, how far they scroll, what to change on a page based on heatmap/click data, or to 'analyze/assess/review the heatmap' for a URL. DO NOT TRIGGER when: the user only wants to create a saved heatmap screenshot with no analysis (use heatmaps-saved-create directly), or is asking about session replay in general (use investigating-replay).

The English summary is being prepared. Showing the original description.

Motion (旧 Framer Motion) アニメーションライブラリ リファレンス。motion/react, vanilla JS, Vue 版 motion-v (v-motion ディレクティブ)。 AnimatePresence, AnimateView, LayoutGroup, LazyMotion, MotionConfig, Reorder, useAnimate, useScroll, useSpring, useTransform, useMotionValue, useInView, motionValue。 animate, animateView, scroll, inView, hover, press, stagger, spring, timeline, transitions, styleEffect, threeEffect。Motion+ Carousel, Cursor, Ticker, Typewriter, AnimateNumber。 layout, drag, gestures, SVG, Tailwind, Lenis 連携。accessibility, performance, bundle 最適化, troubleshooting。

The English summary is being prepared. Showing the original description.

Build premium scroll-driven web pages and product showcases inspired by high-end app, hardware, and product interaction patterns. Use for Raycast-like, Apple-like, NVIDIA-like, RTX/GPU, SaaS, AI browser, parallax, sticky scroll, pinned reveal, Three.js GLB model, Web Audio sound effect, responsive accessibility, and performance-safe frontend requests.

The English summary is being prepared. Showing the original description.

Skill for scroll-animations tasks.

The English summary is being prepared. Showing the original description.

Make a web app feel native on a phone — the small CSS and meta-tag fixes that separate "a website in a browser" from something that feels installed. Covers sticky hover states, tap highlight flashes, the 100vh bug, inputs that zoom the page, laggy taps, pull-to-refresh hijacking scroll, content under the notch, long-press selecting button text, carousels that scroll the wrong way, mismatched status bars, and the rule that you test on real hardware. Use when a web app is being built for or reviewed on mobile, when something "works in Chrome but feels wrong on my phone", when building a PWA, a bottom sheet, a carousel, a full-screen layout, or any touch interaction. For motion itself use animate; for React Native use animate-expo.

The English summary is being prepared. Showing the original description.