fixing-motion-performance
Fix animation performance issues.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
motion
|
studio-sdk
Use when user asks to "connect to Studio", "set up Studio SDK", "add Studio analytics", "send events to Studio", "configure studio bridge", "studio storage sync", or needs help with @flowsterix/studio package, createStudioBridge, event serialization, batched transport, or Studio ingest integration.
dialog-integration
Radix dialog integration for Flowsterix tours using useRadixTourDialog and useRadixDialogAdapter. Use when tour steps target elements inside Radix UI dialogs, or when managing dialog open/close state during tours.
flow-definitions
Step definitions, element targeting, advance rules, waitFor patterns, and target behavior in Flowsterix. Use when defining tour steps, targeting elements, configuring advance rules, or handling async content.
getting-started
Installation, first tour setup, and minimal working example for Flowsterix. Use when setting up Flowsterix, creating a tour, adding onboarding flows, or configuring CSS variables.
lifecycle-hooks
Lifecycle hooks (onEnter, onResume, onExit) for synchronizing UI state with tour progression in Flowsterix. Use when targeting elements inside collapsible panels, modals, drawers, accordions, or other dynamic UI during tours.
mobile-and-accessibility
Mobile drawer, snap points, gestures, internationalization (i18n), and accessibility features for Flowsterix. Use when configuring mobile tour experience, customizing button labels, adding i18n support, or handling reduced motion.
react-api
TourProvider configuration, useTour hook, TourHUD component, and React hooks API for Flowsterix. Use when configuring TourProvider props, accessing tour state, customizing TourHUD, or building custom tour controls.
routing
Route gating, router adapters, and route-based step patterns for Flowsterix. Use when integrating tours with TanStack Router, React Router, Next.js App Router, or Next.js Pages Router, or when creating route-dependent tour steps.
storage-and-versioning
Storage adapters, version management, migrations, and persistence patterns for Flowsterix. Use when configuring tour state persistence, implementing custom storage adapters, handling version migrations, or managing flow state across sessions.