ankyr-ux

Guides tactile feedback, motion, overlays, and library selection for interactive web UIs.

1|Updated May 21, 2026
One-click install
npx skills add https://github.com/GuyErreich/AI_Agents --skill ankyr-ux-guyerreich
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ankyr-ux
Source: https://github.com/GuyErreich/AI_Agents/tree/main/plugins/ankyr-web/skills/ankyr-ux
Command: npx skills add https://github.com/GuyErreich/AI_Agents --skill ankyr-ux-guyerreich

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Interactive web surfaces often ship with dead-feeling taps, instant-unmounting dialogs, mismatched animation libraries, and missing reduced-motion support. This Skill enforces a consistent quality bar for press feedback, overlay dismiss lifecycles, motion feel, and pickers before any UI ships. ## Core Features & Use Cases - Interaction quality bar: Defines required behaviors for press feedback, focus-visible rings, overlay exit animations, and prefers-reduced-motion handling. - Library decision matrix: Provides a situation-to-tool matrix covering CSS transitions, Framer Motion, GSAP, View Transitions, Radix, Vaul, Embla, and dnd-kit, with a strict one-library-per-concern rule. - Viewport-routed references: Routes tasks to shared, mobile, or desktop reference docs covering sheets, wheel pickers, tab indicators, edge stagger, and generative Web Audio sound. - Use Case: When adding a mobile bottom sheet with drag dismiss and a wheel date picker, load the overlay-patterns and pickers-and-scrollers references to implement portal placement, a shared exit animation across all dismiss paths, and snap-wheel selection. ## Quick Start Ask the agent to add a bottom sheet with proper dismiss animation and press feedback to a React component using the ankyr-ux guidance.

Frequently Asked Questions about ankyr-ux

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a bottom sheet with dismiss animation in React?▼

Use Vaul or Radix Dialog with motion, render in a portal above fixed chrome, and keep the sheet mounted through its exit animation. Route every dismiss path (close button, backdrop, drag, Escape) through one close handler with transitionend plus a timeout fallback.

Framer Motion vs GSAP vs CSS for UI animations?▼

Use CSS transitions for sheet slides, tab indicators, and press states; Framer Motion for React mount/unmount and AnimatePresence route transitions; GSAP for scroll-linked scenes and long choreographed timelines. Never stack two libraries on the same concern.

How do I fix the rectangular tap highlight on rounded buttons?▼

Set -webkit-tap-highlight-color to transparent on interactive elements, style keyboard focus with :focus-visible box-shadow matching the border-radius, and add an :active scale or background shift for tactile response.

What should I use for a mobile date or month picker?▼

Use a snap wheel column with CSS scroll-snap for month/year or hour/minute selection, or react-mobile-picker if hand-rolling is costly. Avoid plain select elements or raw scroll lists for primary mobile flows.

How do I handle prefers-reduced-motion in animated UIs?▼

Shorten or replace motion with opacity-only crossfades when reduced motion is requested, using useReducedMotion in Framer or a matchMedia check. Never skip the functional dismiss itself; only the animation is reduced.

When should I add a new animation or overlay dependency?▼

Only after checking package.json for an installed library and confirming CSS plus headless semantics cannot meet the quality bar. Add one focused library per concern and remove any existing library covering the same concern first.