Design & UX Skill
Accessibility Compliance
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns…
$15
Interaction Design
Design and implement microinteractions, motion design, transitions, and user feedback patterns.
A practical toolkit for designing microinteractions, motion, transitions, and user feedback that communicate rather than decorate. It pairs ready React and CSS patterns with timing scales, easing curves, and accessibility rules so every animation has purpose and stays at 60fps.
$15 one-time
Add to a kit → Prices include 20% VAT. · Forged on real agency work · one-time, no lock-in
- Type Skill
- Category Design & UX
- Delivery Email · instant
- License One-time
Inside the run · no black box
See the actual work before you buy it.
Every animation must earn a job: feedback, orientation, focus, or continuity. Decorative motion gets cut, durations come from a fixed timing scale, and any frame over 16ms counts as jank to be fixed.
- Assigns each animation a job before it is written: feedback (confirming an action happened), orientation (where elements come from and go), focus (directing attention) or continuity. Decorative motion with no job gets cut.
- Sets durations from a fixed timing scale: 100-150ms for micro feedback like hovers and clicks, 200-300ms for toggles and dropdowns, 300-500ms for modals and page changes, with ease-out on entry and ease-in on exit.
- Implements the core interaction patterns: skeleton screens that preserve layout while loading, spring-physics toggles and buttons, AnimatePresence page transitions, ripple click feedback, swipe-to-dismiss gestures with a 100px threshold.
- Enforces the 60fps performance budget: only GPU-accelerated transform and opacity are animated; width, height, top and left are off limits because they trigger layout recalculation and visible jank.
- Wires prefers-reduced-motion at both CSS and JS level, so every animation collapses to an instant state change for users who disable motion, with color or icon swaps carrying the same information.
- Profiles the result in the browser Performance panel: any frame over 16ms counts as jank and gets a root-cause fix before the interaction ships.
One power source. 6 lines out.
interaction-design · core
core active · 6 lines
- ✓ adding microinteractions…
Adding microinteractions like button taps and ripple effects for instant feedback
- ✓ building skeleton screens
Building skeleton screens and progress indicators for loading states
- ✓ designing smooth page and
Designing smooth page and component transitions
- ✓ creating gesture interac…
Creating gesture interactions such as swipe-to-dismiss cards
- ✓ implementing accessible…
Implementing accessible toggle, dropdown, and notification animations
- ✓ respecting reduced-motio…
Respecting reduced-motion preferences across an entire app
Yours to keep.
Drag time forward. Watch what stays.
Forever
That's what owning means.
The rented stack
ai writing tool: subscription
expired · access lostanalytics suite: subscription
expired · access lostdesign platform: subscription
expired · access lost(nothing left)
Your forge
-
Make interfaces feel polished and trustworthy with purposeful motion
license: perpetual -
Avoid janky animation by sticking to GPU-friendly transform and opacity
license: perpetual -
Reduce abandonment with loading states that communicate progress, not anxiety
license: perpetual -
Stay accessible by default with built-in reduced-motion handling
license: perpetual
subscriptions expire · deeds don't
Everything in the box.
Pick a piece up. Watch it work.
Timing scale and easing-function reference for consistent motion
6 parts · one working system · ships instantly by email
This wasn't forged for everyone.
- Not for you if you'd rather rent a tool than own one.
- Not for you if you want someone else to run your stack.
- Not for you if you're happy guessing.
Front-end developers and UI designers adding motion and feedback polish to web interfaces without sacrificing performance or accessibility.
then this was forged for you.Works with
Universal by design: these run in any AI. Delivered in the open Agent Skills + MCP format (native in Claude); ChatGPT, Gemini, Cursor and Copilot adapt the same files their own way.
- Claude Native format
- ChatGPT Adapts via open standards
- Gemini Adapts via open standards
- Cursor Adapts via open standards
- Copilot Adapts via open standards
Catch what's on your mind.
the air is clear. nothing between you and the forge.
catch a spark: the forge will answer
-
We don't use Framer Motion, just plain CSS. Still useful?
Yes. Most patterns ship with both Framer Motion and CSS variants, and the timing scale plus easing-function reference is library-agnostic. Skeleton screens, progress indicators, and reduced-motion handling all work in plain CSS.
-
How does it keep animations at 60fps?
By restricting motion to GPU-friendly transform and opacity, and explicitly flagging layout-triggering properties in the anti-pattern list. Reduced-motion preferences are handled in both CSS and JavaScript by default, so accessibility never becomes an afterthought.
-
Will it design a motion identity for my brand?
No. This is a toolkit of microinteractions, transitions, and feedback patterns whose job is communication, not decoration. Brand-specific motion language and art direction are a separate design effort.
-
How is it delivered?
By email right after purchase: ready to run, downloaded instantly, no setup wait.
-
One-time or subscription?
A one-time purchase; no subscription or hidden fees. VAT (20%) is included.
-
Can I get a refund?
As a digital product, it can’t be refunded once downloaded. That’s why we show exactly what’s inside and who it’s for, right here.