creative-uilisted

Turns a brief into an interface that looks designed rather than generated: real layout craft, a considered type and colour system, and motion that means something. Picks its own approach from the request, sources what already exists instead of rebuilding it, holds an accessibility and performance floor, and verifies the result before reporting. Use for landing pages, portfolios, product pages, marketing sites and redesigns — and for "make this look premium", "this looks like a template", "make it feel expensive", "award quality", "animate this page", "smooth scroll", "parallax", "pinned section", "horizontal scroll", "scroll animation", "scrollytelling", "text reveal", "page transition", "3D hero", "make the landing page move", or any request where an interface has to look and move like someone with taste built it.
ansh2807/creative-ui · ★ 0 · Web & Frontend · score 73

Install: claude install-skill ansh2807/creative-ui

# creative-ui Motion is not decoration bolted onto a finished page. It is the second half of the layout: it tells the visitor what is related, what just changed, and where they are. A page whose motion was added last always reads as added last. Everything the build needs is in `engine/`, read on demand rather than all at once. **Operating discipline: the engine is internal.** Do not list these files, name the libraries as a menu, or explain the machinery to the user unless they ask a direct technical question. Report what you built and what you verified, not which reference you opened. The output is the product; the stack is an implementation detail. ## The one-screen stack map Pick by **job**, not by preference. Mixing all five animation libraries in one project is the most common failure in this space. | The job | Reach for | Never | |---|---|---| | Scroll drives a timeline (pin, scrub, snap, horizontal rail) | **GSAP + ScrollTrigger** — [timeline.md](engine/timeline.md) | CSS `animation-timeline` alone in production; Safari support is still partial | | The wheel should feel weighted, not notchy | **Lenis** — [smooth.md](engine/smooth.md) | Two smooth-scroll libraries at once | | Inheriting a `data-scroll` / `data-scroll-speed` codebase | **Locomotive Scroll** — [legacy.md](engine/legacy.md) | Starting a new project on it — v5 wraps Lenis; use Lenis directly | | Component enter/exit, layout shifts, gestures, React state to motion | **Motion** — [state.md](engine/state