wow-elements

Add brand-aligned micro-interactions and motion polish to JoyJoin screens with accessibility guardrails.

Updated Dec 24, 2025
One-click install
npx skills add https://github.com/JoyJoin-Tech-Limited/JoyJoin_app_v0.1 --skill wow-elements-joyjoin-tech-limited
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wow-elements
Source: https://github.com/JoyJoin-Tech-Limited/JoyJoin_app_v0.1/tree/main/.github/skills/wow-elements
Command: npx skills add https://github.com/JoyJoin-Tech-Limited/JoyJoin_app_v0.1 --skill wow-elements-joyjoin-tech-limited

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires framer-motion, and includes references (resource) components.

What problem does it solve? Key user moments like completions, reveals, and empty states often feel flat or generic, and ad-hoc animation attempts risk jank, accessibility failures, and off-brand results. This Skill provides a disciplined workflow for adding crafted micro-interactions that respect performance budgets, reduced-motion preferences, and JoyJoin's warm, restrained brand personality. ## Core Features & Use Cases - Iterative polish workflow: A four-pass pattern (functional baseline, polish the key moment, systemize repeats, grill-me review) that keeps decoration out and intent in. - Element catalog and examples: Reference tables for pulse, shimmer, stagger, and fade effects with easing curves, spring physics parameters, and Taro mini-program implementation notes, plus TypeScript/React code examples. - Stress-test checklist: A grill-me interview covering intent, performance (transform/opacity only, duration limits), accessibility (prefers-reduced-motion fallbacks), and emotional-value scoring. - Use Case: When polishing an onboarding completion screen, score the moment against the emotional-value rubric, add a restrained checkmark reveal with a reduced-motion fallback, then run the grill-me checklist before shipping. ## Quick Start Ask the AI to polish the completion moment of a screen using the wow-elements skill, for example: make the match reveal feel premium with a staggered entrance and a reduced-motion fallback.

Frequently Asked Questions about wow-elements

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

FAQPage Schema
How do I add micro-interactions to a React app without hurting performance?▼

Animate only transform and opacity properties, never layout-triggering properties like height, width, or margin. Keep routine feedback under 200ms and emotional reveals under 500ms, and verify on a mid-range device rather than only a fast development machine.

How to implement staggered entrance animations with Framer Motion?▼

Wrap each element in a motion component with an initial opacity and translateY offset, then apply delays of 50 to 80 milliseconds between children. Limit the stagger to two or three key elements so the reveal reads as one composed moment rather than a slow sequence.

Does Framer Motion respect prefers-reduced-motion settings?▼

Not automatically. Wrap animations with the useReducedMotion hook and either skip the initial animation state or set the transition duration to zero when the preference is active. The static fallback must remain fully readable and understandable.

Can I use CSS hover effects in a Taro WeChat mini-program?▼

No, browser-only effects like CSS hover and backdrop-filter have no direct Taro equivalent. Use the hover-class attribute, WXSS transitions, or the Taro Animation API to translate the intent of the effect into native mini-program primitives.

When should I not add animation to a user interface?▼

Avoid animation on low-traffic operational screens, during data fetching, and when it cannot be maintained as a shared pattern. Motion that does not improve comprehension of system state or shift how the user feels about themselves is decoration and should be removed.