Foundations

The five cross-cutting modules: motion principles, the design audit, the UI/UX dataset, and the mobile and desktop platform layers.

These five are not tied to a framework. They carry the parts of the craft that transfer between web, Apple and Android.

motion-principles

The foundation, loaded on every single invocation. It is the reason a spring in Compose and a transition in CSS come out of the same pipeline feeling related.

It carries a duration table keyed by context rather than by taste (micro-interactions 100 to 150ms, UI transitions 200 to 300ms, route transitions 300 to 500ms, scroll-driven work progress-based with no duration at all), and the frequency rule: the more often an animation plays, the shorter and subtler it has to be.

Easing is chosen by direction. Entering elements decelerate, exiting elements accelerate, elements moving between states ease both ends, scroll-synced motion is linear because anything else reads as lag. Exit is always more subtle than enter.

It also carries a cross-platform equivalence table, so cubic-bezier(0.2, 0, 0, 1), SwiftUI’s .snappy, and Compose’s spring(stiffness = StiffnessMedium, dampingRatio = 0.85f) are understood as the same intent expressed three ways.

Finally it carries five prohibitions, each with the wrong and right form in all three stacks: never animate width, height, top or left; never scale to zero; never ease-in on an entrance; never exceed 500ms on a UI interaction; never skip reduced motion. Those are spelled out in Principles.

design-audit

The closing checkpoint. It greps rather than guesses, which is what makes it catch things a read-through misses.

It looks for conditional renders with no exit animation, :hover rules with no transition on the base selector, mapped lists with no stagger, dynamic inline styles with no transition, and Framer Motion initial props with no matching exit.

On accessibility it treats a total absence of reduced-motion handling in an animated project as a critical failure, and checks contrast at 4.5:1 including mid-transition, where fading text tends to drop below the line. It flags any outline: none without a :focus-visible replacement, any clickable div or span without a role and keyboard handling, and any decorative animation missing aria-hidden.

On performance it flags transitions on layout properties, excessive permanent will-change, animation loops built on setTimeout or setInterval, and animation libraries that are oversized for what the project actually uses.

It also runs a consistency sweep. A well-designed project uses three to five durations and three to five named easings. Fifteen distinct duration values is a finding, not a style.

ui-ux-pro-max

A searchable design-system dataset with a CLI: 84 styles, 192 palettes, 74 font pairings, 25 chart types and 99 UX guidelines across 22 stacks. paint loads it during the design-system phase to ground palette and typography choices in something with structure rather than in invention.

Internal, and not invokable on its own.

mobile-principles

Loads when the target is mobile web or native iOS or Android.

Touch target minimums, the no-hover doctrine (hover cannot be the only way to reach anything, and press states have to carry the feedback instead), thumb zones and what belongs in reach, safe areas, canonical gesture patterns and the conflicts between them, mobile performance budgets, and a unified cross-platform account of reduced motion.

desktop-principles

Loads for macOS or for desktop web with no mobile indicators.

Hover states as mandatory rather than decorative, pointer precision and what it allows that touch does not, keyboard shortcuts as first-class rather than optional, multi-window state coherence, focus management, information density, and the subtle-animation doctrine: desktop motion is shorter and quieter than mobile motion because it fires far more often.