메뉴
Emil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers on tasks involving transitions, easing, gestures, toasts, drawers, or motion.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Create MDX documentation files with proper frontmatter, imports, and component integration. Apply when creating or updating Fumadocs documentation pages in content/docs/.
Integrate the @remcostoeten/auth-drawer React library (a sign-in/sign-up drawer or modal) into a consumer app. Use this whenever the user wants to add a login/signup/auth surface, an "auth drawer" or "auth modal", wrap their app in AuthProvider, render <AuthDrawer>, call useAuth(), pick or write an auth adapter (Better Auth, Supabase, Clerk, NextAuth, Firebase, custom JWT/REST, Passport, or createMockAdapter), or configure auth triggers/theming for that package. Use it even if the user only mentions the auth backend (e.g. "add a Supabase login drawer") and doesn't name the package, as long as @remcostoeten/auth-drawer is or will be the UI. Do NOT use it for unrelated drawer/sheet UI, for configuring an auth backend with no auth-drawer UI, or for other auth UI kits.
Ultra-compressed communication mode. Cuts output tokens 65% (measured) by speaking like caveman while keeping full technical accuracy. Supports intensity levels: lite, full (default), ultra, wenyan-lite, wenyan-full, wenyan-ultra. Use when user says "caveman mode", "talk like caveman", "use caveman", "less tokens", "be brief", or invokes /caveman. Also auto-triggers when token efficiency is requested.
When the user wants to write, rewrite, or improve marketing copy for any page — including homepage, landing pages, pricing pages, feature pages, about pages, or product pages. Also use when the user says "write copy for," "improve this copy," "rewrite this page," "marketing copy," "headline help," "CTA copy," "value proposition," "tagline," "subheadline," "hero section copy," "above the fold," "this copy is weak," "make this more compelling," or "help me describe my product." Use this whenever someone is working on website text that needs to persuade or convert. For email copy, see emails. For popup copy, see popups. For editing existing copy, see copy-editing. For the offer underneath the copy (bonuses, guarantees, value framing), see offers.
Scaffold and implement authentication in TypeScript/JavaScript apps using Better Auth. Detect frameworks, configure database adapters, set up route handlers, add OAuth providers, and create auth UI pages. Use when users want to add login, sign-up, or authentication to a new or existing project with Better Auth.
Configure email verification, implement password reset flows, set password policies, and customise hashing algorithms for Better Auth email/password authentication. Use when users need to set up login, sign-in, sign-up, credential authentication, or password security with Better Auth.
| name | emilkowal-animations |
| description | Emil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers on tasks involving transitions, easing, gestures, toasts, drawers, or motion. |
Comprehensive animation guide for web interfaces based on Emil Kowalski's teachings, open-source libraries (Sonner, Vaul), and his animations.dev course. Contains 43 rules across 7 categories, prioritized by impact.
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Easing Selection | CRITICAL | ease- |
| 2 | Timing & Duration | CRITICAL | timing- |
| 3 | Property Selection | HIGH | props- |
| 4 | Transform Techniques | HIGH | transform- |
| 5 | Interaction Patterns | MEDIUM-HIGH | interact- |
| 6 | Strategic Animation | MEDIUM | strategy- |
| 7 | Accessibility & Polish | MEDIUM | polish- |
ease-out-default - Use ease-out as your default easingease-custom-curves - Use custom cubic-bezier over built-in CSSease-in-out-onscreen - Use ease-in-out for on-screen movementease-spring-natural - Use spring animations for natural motionease-ios-drawer - Use iOS-style easing for drawer componentsease-context-matters - Match easing to animation contexttiming-300ms-max - Keep UI animations under 300mstiming-faster-better - Faster animations improve perceived performancetiming-asymmetric - Use asymmetric timing for press and releasetiming-tooltip-delay - Delay initial tooltips, instant subsequent onestiming-drawer-500ms - Use 500ms duration for drawer animationsprops-transform-opacity - Animate only transform and opacityprops-hardware-accelerated - Use hardware-accelerated animations when main thread is busyprops-will-change - Use will-change to prevent 1px shiftprops-avoid-css-variables - Avoid CSS variables for drag animationsprops-clip-path-performant - Use clip-path for layout-free revealstransform-scale-097 - Scale buttons to 0.97 on presstransform-never-scale-zero - Never animate from scale(0)transform-percentage-translate - Use percentage values for translateYtransform-origin-aware - Make animations origin-awaretransform-scale-children - Scale transforms affect childrentransform-3d-preserve - Use preserve-3d for 3D transform effectsinteract-interruptible - Make animations interruptibleinteract-momentum-dismiss - Use momentum-based dismissalinteract-damping - Damp drag at boundariesinteract-scroll-drag-conflict - Resolve scroll and drag conflictsinteract-snap-points - Implement velocity-aware snap pointsinteract-friction-upward - Allow upward drag with frictioninteract-pointer-capture - Use pointer capture for drag operationsstrategy-keyboard-no-animate - Never animate keyboard-initiated actionsstrategy-frequency-matters - Consider interaction frequency before animatingstrategy-purpose-required - Every animation must have a purposestrategy-feedback-immediate - Provide immediate feedback on all actionsstrategy-marketing-exception - Marketing sites are the exceptionpolish-reduced-motion - Respect prefers-reduced-motionpolish-opacity-fallback - Use opacity as reduced motion fallbackpolish-framer-hook - Use useReducedMotion hook in Framer Motionpolish-dont-remove-all - Don't remove all animation for reduced motionpolish-blur-bridge - Use blur to bridge animation statespolish-clip-path-tabs - Use clip-path for tab transitionspolish-toast-stacking - Implement toast stacking with scale and offsetpolish-scroll-reveal - Trigger scroll animations at appropriate thresholdpolish-hover-gap-fill - Fill gaps between hoverable elementspolish-stagger-children - Stagger child animations for orchestration| Value | Usage |
|---|---|
cubic-bezier(0.32, 0.72, 0, 1) | iOS-style drawer/sheet animation |
scale(0.97) | Button press feedback |
scale(0.95) | Minimum enter scale (never scale(0)) |
200ms ease-out | Standard UI transition |
300ms | Maximum duration for UI animations |
500ms | Drawer animation duration |
0.11 px/ms | Velocity threshold for momentum dismiss |
100px | Scroll-reveal viewport threshold |
14px | Toast stack offset |
| File | Description |
|---|---|
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |