skills.rest
joaoguirunas
joaoguirunasCOMMUNITY
Explore all skills by this author →
GitHub

sites-ux-interaction

Implements UX interaction patterns for Next.js websites including sticky headers, mobile navigation, and Motion animations.

3|3|Updated Apr 23, 2026
Search Tags:#next.js#animations#tailwind#ux#micro-interactions#framer-motion#sticky header
One-click install
npx skills add https://github.com/joaoguirunas/team-os --skill sites-ux-interaction-joaoguirunas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sites-ux-interaction
Source: https://github.com/joaoguirunas/team-os/tree/main/.claude/skills/sites-ux-interaction
Command: npx skills add https://github.com/joaoguirunas/team-os --skill sites-ux-interaction-joaoguirunas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building consistent, accessible interaction patterns for marketing and product websites requires re-implementing the same navigation, animation, and micro-interaction logic on every project, often with SSR pitfalls in Next.js App Router. ## Core Features & Use Cases - Navigation Patterns: Ready-to-use sticky header with scroll detection and mobile navigation using Sheet components with proper ARIA labels. - Motion Animations: Enter animations, staggered list animations, and scroll-triggered reveals using motion/react and Intersection Observer. - Micro-interactions & Accessibility: CSS hover states, button press effects, animated link underlines, and SSR-safe reduced-motion handling via useEffect. - Use Case: When building a landing page in Next.js, apply these patterns to add a sticky header that gains a backdrop blur on scroll, staggered card entrance animations, and hover lift effects on cards. ## Quick Start Ask the agent to implement a sticky header with scroll-triggered background and staggered entrance animations for the homepage cards using these UX interaction patterns.

Frequently Asked Questions about sites-ux-interaction

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

FAQPage Schema
How do I create a sticky header that changes on scroll in Next.js?▼

Track scroll position with a passive window scroll listener in useEffect and toggle a scrolled state above a threshold like 20px. Conditionally apply classes such as backdrop-blur and shadow when scrolled, keeping the header fixed with a high z-index.

How to add scroll-triggered animations with Framer Motion?▼

Use the useInView hook with a threshold and triggerOnce option, then bind the ref to a motion element. Set initial opacity to 0 and animate to visible when inView becomes true, so elements fade in as they enter the viewport.

Why does window.matchMedia break in Next.js App Router?▼

App Router renders components on the server where window does not exist, so calling matchMedia in the component body throws an error. Read it inside useEffect or use the useReducedMotion hook from motion/react instead.

How do I respect prefers-reduced-motion in React animations?▼

Detect the media query inside useEffect with a change listener and store the result in state. Then conditionally set animation transitions to zero duration when the user prefers reduced motion.

What CSS micro-interactions improve website hover states?▼

Common patterns include card hover lift with translate-y and shadow transitions, button press effects using active scale, and animated link underlines using a pseudo-element that expands its width on hover.

Related Skills

Explore More Software Engineering Skills→
Devinga-com-brDevinga-com-br

shadcn-ui

Configure shadcn/ui components in React/Next.js projects with Tailwind CSS.

Official
Intermediate
narduk-enterprisesnarduk-enterprises

web-perf

Audit Core Web Vitals and render-blocking resources for web performance.

Official
Advanced
ihlamuryihlamury
73

anthropic-ui-skills

Enforces Anthropic's UI design system for light-mode interfaces with Inter font and 4px grid.

Community
Intermediate
theexperiencecompanytheexperiencecompany
261

motion

Create declarative animations in React with gestures and scroll effects.

Official
Intermediate