102 tagged motion, measured the same way as everything else here.
Browse within: nextjs 60accessibility 59codex-skills 59base-ui 11baseui 11charts 11data-visualization 11shadcn 11ui 10animation 9design 9video 5
Skill Claude CodeCodex
In-chat fallback for the Timeline Inspector Refine agent. Use when the user runs /refine live, asks to "refine live", "go live", or answer refine jobs — but ONLY when no persistent agent is wired (no npx transitions-refine live). Prefer npx transitions-refine live for run-and-forget (relay spawns agent per click, no…
Skill Claude CodeCodex
Production-ready CSS transitions for web apps. Use when implementing notification badges, dropdowns, modals, panel reveals, page transitions, card resizes, number pop-ins, text swaps, icon swaps, success checks, avatar group hovers, error state shakes, search/input clear, skeleton loaders, shimmer text, sliding tabs…
Skill Claude CodeCodex
Polish and refine existing motion against the transitions.dev motion-token scale — duration, distance, scale, blur, and easing — plus the rules for WHEN each token applies (open/close asymmetry, hover-in vs hover-out, stagger offsets, and intent delays). An add-on to the transitions-dev skill, focused on tuning what…
Skill Claude CodeCodex
This skill is for bklit-ui monorepo contributors taking a chart or component validated in Studio into production: published in the UI package, documented, and ready for users.
Skill Claude CodeCodex
Open a pull request the bklit-ui way: stage and commit with pre-commit hooks, run ultracite from the repo root, rebuild the shadcn registry, run a production test build, fix failures, push, and create a PR with a structured summary. Use when the user asks to commit, push, open a PR, "ship it", or run the full pre-PR…
Skill Claude CodeCodex
Bklit UI charts and data visualization for any project using the @bklit shadcn registry. Install, compose, theme, and animate charts correctly. Triggers when working with @bklitui/ui/charts, @bklit components, data visualization, dashboards, or chart theming. Also invoke manually for chart tasks.
Skill Claude CodeCodex
Choose, inspect, install, and compose licensed beUI Pro premium React blocks from the authenticated shadcn registry. Use when building or improving landing pages with beUI Pro, installing @beui-pro items, selecting premium heroes, features, pricing, social proof, CTAs, navigation, footers, or other page sections, or…
Skill Claude CodeCodex
Pick and install beUI (@beui) animated React components from the shadcn registry. Use when building motion UI, agent/chat interfaces, toasts, docks, bottom sheets, drawers, popovers, sliders, loaders, 404 pages, or any beui.dev component. Maps user intent to exact @beui install slugs instead of inventing custom…
Skill Claude CodeCodex
Design one-off HTML artifacts (landing, deck, prototype).
Skill Claude CodeCodex
Open Analytics' design language, extracted from the shipped product: an ink-derived neutral system, squircle surface anatomy, one small spring vocabulary, pixel-matched skeletons, and a plain-spoken copy voice, with type-checked component recipes. Use this whenever you build or restyle a dashboard, SaaS app, analytics…
Skill Claude CodeCodex
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
Skill Claude CodeCodex
Generate, explore, and develop original but useful possibilities when an ordinary answer would underserve the objective. Use for ideation, reframing, synthesis, invention, adaptation, creative problem-solving, or escaping fixation across writing, strategy, products, research, design, and technical work. Do not invoke…
Skill Claude CodeCodex
GSAP performance guidance — prefer transforms, avoid layout thrashing, use will-change selectively, and batch animation work. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.
Skill Claude CodeCodex
Determine what follows from explicit premises, rules, evidence, documentation, or observations by selecting and executing the appropriate inference structure. Use when validity, entailment, contradiction, causality, probability, explanation, or the exact strength of a conclusion is central. Do not invoke merely to…
OneYoungMean/KimodoUnityBridge
Skill Claude CodeCodex
Install KimodoUnityBridge and route Unity animation work through its cooperating capability tools.
Skill Claude CodeCodex
Build a web animation: whether it should animate at all, the purpose, the tool, the properties, the easing curve, the duration, interruption and exit. Writes the CSS or Motion code for dropdowns, modals, toasts, tooltips, accordions, press feedback, stagger and scroll reveals. Use to animate something or make a…
Skill Claude CodeCodex
Comprehensive UI design skill covering fundamentals, patterns, and anti-patterns. Layout, typography, color, spacing, accessibility, motion, and component design. Use when building any web interface, reviewing design quality, or creating distinctive UIs.
Skill Claude CodeCodex
Content-Derived Design — reads existing HTML and writes a stronger standalone page from headings, facts, names, dates, numbers, links, emails, and colors already in that file. CLI: npx reimagine-it --auto -i page.html -o out.html; also variations, lock, and audit. Use when the user says /reimagine-it, "reimagine it"…
deveshpunjabi/modern-frontend-skill
Skill Claude CodeCodex
How to design and build modern, premium-quality frontend interfaces that look like high-end SaaS products, modern AI tools, and award-winning design websites — not generic templates. Use this skill whenever the user asks to build a frontend, create a landing page, design a dashboard, scaffold a web app UI, build a…
Skill Claude CodeCodex
Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and layout — built on motion-foundations tokens and springs. Use when animating a specific UI element in React or Next.js — button, modal, toast, stagger, page transition, or scroll.
Skill Claude CodeCodex
Blank-canvas motion design with OpenKlip shaders, motion overlays, and export.
Skill Claude CodeCodex
Place and tune motion text and shader overlays on an OpenKlip timeline.
Skill Claude CodeCodex
Beat-synced motion short recipe using OpenKlip music BPM and motion templates.