ReactやNext.jsで、ドラッグ操作、スワイプ、文字やSVGのアニメーションを実装します。複数段階の動きや読み込み表示まで扱い、用途に合うAPI選びも支えるスキル。
- ドラッグで閉じる画面や並べ替えリストの実装
- 単語ごとの文字表示や数値アニメーション
- SVGの線描画や円形の進捗表示
52 件 ・ 関連度順
概要と使いどころ
ReactやNext.jsで、ドラッグ操作、スワイプ、文字やSVGのアニメーションを実装します。複数段階の動きや読み込み表示まで扱い、用途に合うAPI選びも支えるスキル。
Implement, review, or improve SwiftUI gesture handling. Use when adding tap, long press, drag, magnify, or rotate gestures, composing gestures with simultaneously/sequenced/exclusively, managing transient state with @GestureState, resolving parent/child gesture conflicts with highPriorityGesture or simultaneousGesture, building custom Gesture protocol conformances, or migrating from deprecated MagnificationGesture to MagnifyGesture or using the newer RotateGesture.
日本語の概要は準備中です。原文の説明を表示しています。
Implement, review, or improve SwiftUI gesture handling. Use when adding tap, long press, drag, magnify, or rotate gestures, composing gestures with simultaneously/sequenced/exclusively, managing transient state with @GestureState, resolving parent/child gesture conflicts with highPriorityGesture or simultaneousGesture, building custom Gesture protocol conformances, or migrating from deprecated MagnificationGesture to MagnifyGesture or using the newer RotateGesture.
日本語の概要は準備中です。原文の説明を表示しています。
Improve or implement purposeful motion systems, micro-interactions, gestures, and transition behavior for production-grade UI. Use when the user mentions animation, motion, transitions, micro-interactions, hover states, drawers, toasts, gestures, or making the UI feel more alive.
日本語の概要は準備中です。原文の説明を表示しています。
React Native Gesture Handler - gesture types, GestureDetector, gesture composition, state machine, platform-specific gestures, swipeable rows, hover gestures
日本語の概要は準備中です。原文の説明を表示しています。
Framer Motion React animation library skill — declarative animations, gestures, layout transitions, scroll-triggered animations, variants, AnimatePresence, and performance optimization.
日本語の概要は準備中です。原文の説明を表示しています。
Motion アニメーションライブラリ (旧 Framer Motion) リファレンス。 React コンポーネント motion, AnimatePresence, AnimateView, LayoutGroup, LazyMotion, MotionConfig, Reorder。hooks useAnimate, useScroll, useSpring, useTransform, useMotionValue, useInView。 vanilla JS API animate, scroll, inView, hover, press, stagger, spring, timeline, motionValue。Vue 版 (motion-v) v-motion ディレクティブ, useScroll 等の composable, Motion+ 限定コンポーネント (Carousel, Cursor, Ticker, Typewriter, AnimateNumber)。transitions / layout / drag / gestures / SVG / scroll アニメーション、accessibility, performance, bundle 最適化, troubleshooting。
iOS Simulator control from inside Orca, with the live device view in Orca's emulator pane. Use when driving a booted Apple Simulator on macOS: taps, gestures, typing, hardware buttons, rotation, and the accessibility tree, or when an iOS change needs simulator evidence. For an Android device or emulator use the Android emulator skill; build and install the app with xcodebuild or simctl first.
日本語の概要は準備中です。原文の説明を表示しています。
Design gesture interactions for touch and pointer — swipe, drag, long-press, and their discoverability. Use when input is gestural. For OS-standard gestures on iOS and Android, use `platform-conventions` (ui-design).
日本語の概要は準備中です。原文の説明を表示しています。
Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use `animate`.
日本語の概要は準備中です。原文の説明を表示しています。
Author SVG figures for Grida docs — diff-able, version-controlled vector diagrams embedded in doc pages instead of screenshots. Provides reusable primitives (selection chrome, size badges, anchor pins, resize cursors, click ripples), color/typography tokens, a starter template, and finished examples to crib from. Canvas user docs (docs/editor/) are the first consumer; the kit is meant to generalize to any product's docs. Use when drawing diagrams that explain UI behaviour — gestures, alignment, before/after states — that a screenshot alone can't capture. Trigger phrases: "svg diagram", "draw a figure", "visual for docs", "explain this gesture visually", "before/after diagram".
日本語の概要は準備中です。原文の説明を表示しています。
Web testing with Playwright, Vitest, k6. E2E/unit/integration/load/security/visual/a11y testing. Use for test automation, flakiness, Core Web Vitals, mobile gestures, cross-browser.
日本語の概要は準備中です。原文の説明を表示しています。
Scene and sequence craft (场景/段落/细节/道具/悬念/情趣) — merged from Robert McKee's scene design and five-step scene analysis (value turn, beats, text/subtext, turning points, pacing, image systems), McKee's Dialogue scene types (balanced, comic, asymmetric, indirect, reflexive, minimal), Syd Field's sequence and scene elements, Neill Hicks (less is more, enter late leave early, energy), Richard Walter (action over talk, small gestures, avoid phones/cars/restaurants, list twelve alternative locations), Wendy Henson (action paragraphs, transitions, story-doing), Julian Hoxter (scene beats, objectives and tactics), Mei Feng's value test, and Lu Jun's chapters 意趣要足 (suspense, delay, wit), 细节要妙, 道具要精, 场景要当. Use when writing or fixing a single scene, choosing a location, building a sequence, planting a prop or detail, designing suspense and delay, cutting a scene that "nothing happens" in, or turning talk into action.
日本語の概要は準備中です。原文の説明を表示しています。
Use when building, fixing, or improving ANY SwiftUI UI — views, navigation, layout, animations, gestures, debugging, iOS 26 features, iPhone Duo, view-level performance, feature architecture.
日本語の概要は準備中です。原文の説明を表示しています。
Build iOS augmented reality and 3D experiences with RealityKit and ARKit. Use when adding RealityView content, loading entities or USDZ models, anchoring objects to planes or world positions, distinguishing entity hit tests from ARKit real-world raycasts, handling AR camera availability, world tracking, scene updates, or RealityKit entity gestures and interactions.
日本語の概要は準備中です。原文の説明を表示しています。
Compose screen and interaction traps: navigation, adaptive layout, window insets, pagers, toolbars, sheets, list drag and selection, sliders, text fields, settings UI, one-shot effects. Use when layout, gestures or navigation misbehave.
日本語の概要は準備中です。原文の説明を表示しています。
Generate and structure MATLAB unit tests using matlab.unittest and matlab.uitest features, including class-based tests, parameterized testing, fixtures, mocking, and app testing with gestures. Use when writing, generating, or adding tests, creating test classes, adding test methods, parameterizing tests, setting up fixtures, mocking dependencies, or testing App Designer apps. Do NOT use for running tests, collecting coverage, or CI/CD configuration.
日本語の概要は準備中です。原文の説明を表示しています。
Web testing with Playwright, Vitest, k6. E2E/unit/integration/load/security/visual/a11y testing. Use for test automation, flakiness, Core Web Vitals, mobile gestures, cross-browser.
日本語の概要は準備中です。原文の説明を表示しています。
Modern animation library for React and JavaScript. Create smooth, production-ready animations with motion components, variants, gestures (hover/tap/drag), layout animations, AnimatePresence exit animations, spring physics, and scroll-based effects. Use when building interactive UI components, micro-interactions, page transitions, or complex animation sequences.
日本語の概要は準備中です。原文の説明を表示しています。
Apply motion design principles for mobile apps covering timing curves, transitions, gestures, and performance-conscious animations. Use when implementing screen transitions, gesture-driven interactions, shared-element animations, or optimizing animation frame rates on iOS, Android, or Flutter.
日本語の概要は準備中です。原文の説明を表示しています。
SwiftUI animation foundations - withAnimation, transitions, matchedGeometryEffect, PhaseAnimator, KeyframeAnimator, springs, gestures.
日本語の概要は準備中です。原文の説明を表示しています。
Jetpack Compose animation foundations - animate*AsState, AnimatedVisibility, Crossfade, updateTransition, SharedTransitionLayout, gestures.
日本語の概要は準備中です。原文の説明を表示しています。
Mobile-specific UX principles - touch targets, hover-less doctrine, thumb zones, safe areas, gestures, mobile perf budgets. Cross-platform (web mobile, iOS, Android).
日本語の概要は準備中です。原文の説明を表示しています。
Framer Motion / Motion sub-skill - AnimatePresence, layout animations, gestures, motion values.
日本語の概要は準備中です。原文の説明を表示しています。