mobile-touch — mobile-touch install mobile-touch, pixelflow, community, mobile-touch install, ide skills, Disney's 12 principles for mobile, mobile gesture animation, haptics and native app motion, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

About this Skill

Perfect for Frontend Agents needing to create engaging mobile experiences with Disney's 12 animation principles. mobile-touch is a skill that brings Disney's 12 animation principles to mobile interactions, enhancing gestures, haptics, and native app motion with techniques like rubber-banding and momentum scrolling.

Features

Applies Squash & Stretch principle with rubber-banding and bounce on scroll limits
Utilizes Anticipation principle with peek before reveal and long-press preview
Employs Staging principle with sheet presentations and focus states
Supports Straight Ahead and Pose to Pose principles with gesture-driven and preset transitions
Implements Follow Through and Overlapping principles with momentum scrolling

# Core Topics

mobile-touch install Disney's 12 principles for mobile mobile gesture animation haptics and native app motion
flavioGonz flavioGonz
[0]
[0]
Updated: 3/8/2026

Agent Capability Analysis

The mobile-touch skill by flavioGonz is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance. Optimized for mobile-touch install, Disney's 12 principles for mobile, mobile gesture animation.

Ideal Agent Persona

Perfect for Frontend Agents needing to create engaging mobile experiences with Disney's 12 animation principles.

Core Value

Empowers agents to design intuitive mobile interactions using rubber-banding, bounce on scroll limits, and gesture-driven transitions, while leveraging principles like Squash & Stretch, Anticipation, and Staging to enhance native app motion and haptics.

↓ Capabilities Granted for mobile-touch

Implementing squash and stretch effects for mobile gestures
Creating anticipation animations for peek before reveal and long-press preview interactions
Designing staging presentations for sheet presentations and focus states

! Prerequisites & Limits

  • Requires understanding of Disney's 12 animation principles
  • Limited to mobile-touch implementations
  • Native app development experience necessary
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

mobile-touch

Install mobile-touch, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

Mobile Touch Animation

Apply Disney's 12 animation principles to mobile gestures, haptics, and native app motion.

Quick Reference

PrincipleMobile Implementation
Squash & StretchRubber-banding, bounce on scroll limits
AnticipationPeek before reveal, long-press preview
StagingSheet presentations, focus states
Straight Ahead / Pose to PoseGesture-driven vs preset transitions
Follow Through / OverlappingMomentum scrolling, trailing elements
Slow In / Slow OutiOS spring animations, Material easing
ArcSwipe-to-dismiss curves, card throws
Secondary ActionHaptic pulse with visual feedback
TimingTouch response <100ms, transitions 250-350ms
ExaggerationBounce amplitude, haptic intensity
Solid DrawingRespect safe areas, consistent anchors
Appeal60fps minimum, gesture continuity

Principle Applications

Squash & Stretch: Implement rubber-band effect at scroll boundaries. Pull-to-refresh should stretch content naturally. Buttons compress on touch.

Anticipation: Long-press shows preview before full action. Drag threshold provides visual hint before item lifts. Swipe shows edge of destination content.

Staging: Use sheet presentations to maintain context. Dim and scale background during modal focus. Hero transitions connect views meaningfully.

Straight Ahead vs Pose to Pose: Gesture-following animations (drag, pinch) are straight ahead—driven by touch input. System transitions (push, present) are pose to pose—predefined keyframes.

Follow Through & Overlapping: Content continues moving after finger lifts (momentum). Navigation bar elements animate slightly after main content. Lists items settle with stagger.

Slow In / Slow Out: iOS uses spring physics—configure mass, stiffness, damping. Android Material uses standard easing: FastOutSlowIn. Never use linear for user-initiated motion.

Arc: Thrown cards follow parabolic arcs. Swipe-to-dismiss curves based on velocity vector. FAB expand/collapse follows natural arc path.

Secondary Action: Pair haptic feedback with visual response. Button ripple accompanies press. Success checkmark triggers light haptic.

Timing: Touch acknowledgment: <100ms. Quick actions: 150-250ms. View transitions: 250-350ms. Complex animations: 350-500ms. Haptic should sync precisely with visual.

Exaggeration: Pull-to-refresh stretches beyond natural—makes feedback clear. Error shake is pronounced. Success animations celebrate appropriately.

Solid Drawing: Respect device safe areas during animation. Maintain consistent transform origins. Account for notch/dynamic island in motion paths.

Appeal: Minimum 60fps, target 120fps on ProMotion displays. Gesture-driven animation must feel connected to finger. Interruptible animations essential.

Platform Patterns

iOS

swift
1// Spring animation with follow-through
2UIView.animate(withDuration: 0.5,
3               delay: 0,
4               usingSpringWithDamping: 0.7,
5               initialSpringVelocity: 0.5,
6               options: .curveEaseOut)
7
8// Haptic pairing
9let feedback = UIImpactFeedbackGenerator(style: .medium)
10feedback.impactOccurred()

Android

kotlin
1// Material spring animation
2SpringAnimation(view, DynamicAnimation.TRANSLATION_Y)
3    .setSpring(SpringForce()
4        .setStiffness(SpringForce.STIFFNESS_MEDIUM)
5        .setDampingRatio(SpringForce.DAMPING_RATIO_MEDIUM_BOUNCY))
6    .start()

Haptic Guidelines

ActioniOSAndroid
Selection.selectionEFFECT_TICK
Success.successEFFECT_CLICK
Warning.warningEFFECT_DOUBLE_CLICK
Error.errorEFFECT_HEAVY_CLICK

Haptics are secondary action—always pair with visual confirmation.

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is mobile-touch?

Perfect for Frontend Agents needing to create engaging mobile experiences with Disney's 12 animation principles. mobile-touch is a skill that brings Disney's 12 animation principles to mobile interactions, enhancing gestures, haptics, and native app motion with techniques like rubber-banding and momentum scrolling.

How do I install mobile-touch?

Run the command: npx killer-skills add flavioGonz/pixelflow/mobile-touch. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for mobile-touch?

Key use cases include: Implementing squash and stretch effects for mobile gestures, Creating anticipation animations for peek before reveal and long-press preview interactions, Designing staging presentations for sheet presentations and focus states.

Which IDEs are compatible with mobile-touch?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for mobile-touch?

Requires understanding of Disney's 12 animation principles. Limited to mobile-touch implementations. Native app development experience necessary.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add flavioGonz/pixelflow/mobile-touch. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use mobile-touch immediately in the current project.

Related Skills

Looking for an alternative to mobile-touch or another community skill for your workflow? Explore these related open-source skills.

View All

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

★ 138.4k
⑂ 0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI