skills.rest
Emasoft
EmasoftCOMMUNITY
Explore all skills by this author →
Website𝕏@fmuaddibGitHub

amw-vecui

Provides vecui vec2 and rect API reference for JS-driven layout math.

Updated Jul 8, 2026
Search Tags:#layout#javascript#animation#vecui#vector math#rect#absolute positioning
One-click install
npx skills add https://github.com/Emasoft/ai-maestro-webdesign --skill amw-vecui-emasoft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: amw-vecui
Source: https://github.com/Emasoft/ai-maestro-webdesign/tree/main/skills/amw-vecui
Command: npx skills add https://github.com/Emasoft/ai-maestro-webdesign --skill amw-vecui-emasoft

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? When a UI layout has constraints CSS cannot express, developers must position elements absolutely and compute coordinates in JavaScript, which quickly becomes error-prone vector arithmetic. This Skill supplies the authoritative vecui API reference (vec2 + rect math) so those computations use the real signatures, overloads, and immutability model instead of guessed methods. ## Core Features & Use Cases - Vector API lookup: Exact signatures and overloads for vec() constructors and operators like add, sub, mul, div, dot, cross, rotRad, rotDeg, norm, len, lookAt, and angleTo, taken from the source lib/main.ts. - Rect API and DOM bridge: rect() constructor overloads (including getBoundingClientRect() input) plus as.styleObject() and as.cssText() for applying computed boxes to absolutely-positioned elements or React style props. - Layout recipes: Canonical patterns such as centering a box, aligning a second element to its right edge with vertical centering, expanding on hover, and rotating an element to look at the cursor. - Use Case: You need a tooltip positioned 16px to the right of a centered card and vertically centered against it. The Skill gives you the chained expression anchorRect.o.add(anchorRect.d.x, 0).add(padding, anchorRect.d.sub(otherRect.d).div(2).y) and the styleObject() call to apply it. ## Quick Start Ask how to position one absolutely-placed element relative to another using vecui vector math, or ask for the exact signature of any vecui vec or rect operator.

Frequently Asked Questions about amw-vecui

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

FAQPage Schema
How do I position one element relative to another with vecui?▼

Model each element as a rect with an origin and dimension vector, then chain offsets from the anchor's origin, such as anchorRect.o.add(anchorRect.d.x, 0).add(padding, 0). Apply the result with rect.as.styleObject() on an absolutely-positioned element.

What vector operators does vecui support?▼

vecui supports add, sub, mul, div, dot, cross, len, norm, rotRad, rotDeg, angleTo, lookAt, isInRect, equals, map, and reduce, most accepting either a Vec or loose (x, y) scalars. There is no lerp, scale, 3D, matrix, or mutable setter.

Does vecui work with React and framer-motion?▼

Yes, vecui is framework-agnostic TypeScript with no required runtime peer dependencies. Spread rect.as.styleObject() into a React style prop or a framer-motion animate prop; the upstream demo uses framer-motion, but it is not a vecui requirement.

How do I interpolate between two vectors without a lerp method?▼

vecui has no lerp, so interpolate by hand with a.add(b.sub(a).mul(t)) where t is the 0-1 progress. Scaling uses mul(scalar) and distance uses b.sub(a).len().

Why does my positioned element not move after applying styleObject?▼

as.styleObject() only emits left, top, width, and height, so the element must have position absolute or fixed for those values to take effect. Also give the parent position relative if you want a local coordinate space.

Why does vec(100) not create a one-axis vector?▼

Calling vec with a single number sets both components, so vec(100) produces {x: 100, y: 100}. For a one-axis vector use vec(100, 0) or vec(0, 100) explicitly.

Related Skills

Explore More Design & Creative Skills→
henrycashe26henrycashe26

frontend-ui-quality

Audit frontend components against 8pt grids and semantic color tokens.

Community
Intermediate
BintzGavinBintzGavin
94

example-lottie

Synchronize Lottie animations with the Helios timeline using goToAndStop.

Community
Intermediate
Dzakiamriz22Dzakiamriz22
1

spacing

Enforce 4px and 8px spacing grids on component margins, padding, and gaps.

Community
Intermediate
PriyanshKuniyalPriyanshKuniyal

responsive-design

Implement responsive layouts with CSS Grid, Flexbox, and container queries.

Community
Advanced