Native Feel

Condensed from: emilkowalski/skills (https://github.com/emilkowalski/skills): apple-design, mobile-native, animate-expo, write-swift, break-ui, pick-ui-library, ask-sonner

Apple-grade interaction

• Respond on press: highlight on pointerdown/:active, commit on release. Feedback is continuous during a drag, never only at the end.
• 1:1 tracking: setPointerCapture, keep the grab offset (no snapping to center). ~10px of movement before committing to a direction.
• Interruptible always: never lock input mid-transition; restart from the live on-screen value; separate X and Y springs.
• Springs (damping ratio / response): default 1.0 / 0.3-0.4 (no overshoot); after a flick 0.8 / 0.4; sheet 0.8 / 0.3. Reanimated: { duration: 400, dampingRatio: 1 }, sheet { duration: 300, dampingRatio: 0.8, velocity }, overshootClamping: true at hard edges.
• Velocity handoff: pass release velocity into the spring. Project momentum, then snap to the nearest point:

const project = (v, d = 0.998) => (v / 1000) * d / (1 - d); // v in px/s
const rubberband = (over, dim, c = 0.55) => (over * dim * c) / (dim + c * Math.abs(over));

• Decide commit vs cancel from velocity sign, not position. Rubber-band at edges; never a hard wall.
• Hit areas: 44×44pt iOS, 48dp Android. Grow with hitSlop/padding, not the visual.
• Haptics (expo-haptics): selectionAsync() for detents/pickers; impactAsync(Light) for snaps/commits; Medium for heavy or destructive; notificationAsync(Success|Error) for outcomes. Same frame as the visual, one per action, never the only feedback.
• Materials: translucent chrome with content scrolling under it.

.bar { background: rgb(255 255 255 / .6); backdrop-filter: blur(20px) saturate(180%);
       border-top: 1px solid rgb(255 255 255 / .4); }
@media (prefers-reduced-transparency: reduce) { .bar { background: #fff; backdrop-filter: none; } }

Never glass on glass. Bigger surface = more blur + deeper shadow. Modal task: scrim + push background back; parallel panel: no scrim. Fade a blur mask at scroll edges instead of 1px dividers. Text on glass: heavier weight, higher contrast. Materialize (blur + scale), don't just fade.

• Type: system font first (system-ui); tracking by size (display -0.02em, body 0); line-height ~1.05 display, ~1.5 body; spacing in rem so Dynamic Type scales layout. HIG default sizes (pt): Large Title 34, Title 28/22/20, Headline 17 semibold, Body 17, Callout 16, Subhead 15, Footnote 13, Caption 12/11.
• Sheets: native first (presentation: 'formSheet' in Expo Router). Web: Vaul, or translateY(100%) + cubic-bezier(0.32, 0.72, 0, 1) 500ms. Stacked sheets dim and push back each parent.
• Expo/RN: Reanimated, not core Animated; Gesture.Pan(), not PanResponder; no setState in gesture/scroll handlers; scheduleOnRN only in onEnd; tabs never slide; navigation uses native stack transitions; judge on a release build on the slowest device; set CADisableMinimumFrameDurationOnPhone for 120fps.
• SwiftUI: start withAnimation in the synchronous gesture callback (same frame); open a Task only for the slow work after.
• A11y: honor prefers-reduced-motion (crossfade instead of slide/spring), prefers-reduced-transparency, prefers-contrast: more.

Web app that feels installed

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0a0a0a">

html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
input, textarea, select { font-size: 16px; }            /* stops iOS zoom */
button, a, [role="button"] { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.app { height: 100dvh; }  .hero { min-height: 100svh; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
.carousel { touch-action: pan-y; }                      /* or scroll-snap-type: x mandatory */
@media (hover: hover) and (pointer: fine) { /* every :hover rule */ }

• Never user-scalable=no; never user-select: none on body. Set inputmode, enterkeyhint, autocapitalize="none" on code/username fields. theme-color matches the header, not the brand. Test on real hardware (emulation hides sticky hover, tap delay, keyboard, safe areas).

Break the UI before shipping

Feed realistic worst cases through the same data boundary (fixture/props), behind a dev-only "Demo / Worst case / Empty / One / 1,000 rows" toggle. Check at the real container width, 320px, widest, 200% zoom, dark, RTL, touch.

Fixes: flex-shrink: 0 on avatars/icons/badges/trailing actions; min-width: 0 on text columns (minmax(0, 1fr)); overflow-wrap: anywhere on emails/URLs; align-items: flex-start once text wraps; tabular-nums; Intl.NumberFormat, Intl.PluralRules, Intl.RelativeTimeFormat; initials via Intl.Segmenter; object-fit: cover + aspect-ratio; skeletons sized like real content; virtualize big lists. Wrap identifying text, end-truncate secondary text (with a tooltip), middle-truncate file names, line-clamp previews, never truncate numbers.

Pick the library, don't hand-roll

Check package.json first and don't churn an existing competitor.

Read by your agent through get_guide("native-feel") in the taste MCP.