36 tagged framer motion, measured the same way as everything else here.
Browse within: agent-teams 8animation 8autonomous-development 8explainer 8tailwindcss 6gsap 5nextjs 5
Skill Claude CodeCodex
Use this skill when users want to add, customize, or troubleshoot Magic UI components in React/Next.js projects. It covers component selection, shadcn registry installation (@magicui/), integration patterns, and practical quality checks for accessibility and maintainability.
Skill Claude CodeCodex
Install and use goey-toast — a gooey, morphing React toast component built on Sonner with Framer Motion. Use when adding toast/notification UI to a React app (success/error/warning/info/promise toasts), or when the user mentions goey-toast / gooey toast.
Skill Claude CodeCodex
Use this skill when users want to add, customize, or troubleshoot UI Beats components in React/Next.js projects. It covers component selection, shadcn registry installation from uibeats.com, the UI Beats MCP server, motion and reduced-motion handling, and integration patterns for animated sections.
Skill Claude CodeCodex
Opinionated creative skill for building stunning 3D, particle, and generative visual components. Use when building any Three.js, Canvas, WebGL, or visually complex component. Provides specific visual recipes, mathematical patterns, and creative direction — not API docs.
Skill Claude CodeCodex
Expert motion and interaction design auditor based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Use when reviewing UI animations, transitions, hover states, or any motion design work. Provides per-designer perspectives with context-aware weighting.
Skill Claude CodeCodexCursor
Complete fullstack development mastery covering modern web architectures, automation tools, AI integration, and production deployment practices.
Skill Claude CodeCodexCursor
Comprehensive MCP server development guide covering FastMCP 2.14.3 features, Anthropic standards, ecosystem integration, and production deployment across all agentic IDEs.
Skill Claude CodeCodex
Generate a complete SVG file from a natural language description using SEP-1577 multi-step sampling.
MustBeSimo/cinematic-scroll-skill
Skill Claude CodeCodex
Build cinematic, scroll-driven websites — pinned chapter reveals, multi-depth parallax, 3D tilt, and environment-morphing backgrounds, from a single self-contained HTML section to a full Next.js release site. The motion grammar is the constant; the aesthetic is always the user's.
MustBeSimo/cinematic-scroll-skill
Skill Claude CodeCodex
Build cinematic scroll-driven, 3D-tilt, parallax, and environment-morphing websites — pinned chapter reveals, hero parallax, depth-image figures, hover-tilt cards, background-morphing layouts, release/launch pages, product story pages, or editorial commerce microsites. From a single self-contained scroll section (Mode…
Skill Claude CodeCodex
Use when building a frontend and the user wants a distinctive / animated / "wow" UI element in React + Tailwind - e.g. a laptop-opening-on-scroll, 3D tilt card, spotlight hero, animated beams/background, marquee, bento grid, interactive globe, meteor/particle background, shimmer button, or scroll/reveal motion.…
Skill Claude CodeCodex
This skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.
Skill Claude CodeCodex
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development…
Skill Claude CodeCodex
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash…
Skill Claude CodeCodex
Generate cinematic launch-video-style React presentations with shared-layout (FLIP) morph transitions between stages. Outputs live React deck, PPTX with Morph transitions, or Playwright-recorded MP4. Use when the user asks for a pitch deck, launch video, demo storyboard, kpi dashboard tour, or any cinematic…
solinkz/micro-interactions-skill
Skill Claude CodeCodex
Expert micro-interaction architect for mobile apps, web applications, and responsive websites. Use this skill when the user asks to add, build, fix, audit, or consult on micro-interactions, animations, transitions, motion design, gesture feedback, haptics, loading states, skeleton screens, pull-to-refresh, swipe…
Luispitik/salgadoia-web-design-engineer-pro
Skill Claude CodeCodex
Skill end-to-end para construir webs y landings profesionales con Next.js 16, React 19, Tailwind CSS v4, shadcn/ui y Framer Motion. Pensada para que un usuario sin conocimientos técnicos pueda PREVISUALIZAR estilos en su navegador antes de elegir, y completar la página de principio a fin (intake, brief, diseño, build…
Skill Claude CodeCodex
Retro arcade-inspired design with pixel fonts, dotted borders, playful high-contrast colors, and 8-bit game aesthetics.
Skill Claude CodeCodex
Design, redesign, build, audit and validate distinctive production websites with cinematic scroll reveals, product films, burst or exploded-view effects, reference-led design systems, purposeful motion and multi-pass refinement. Use for landing pages, product sites, portfolios, interactive storytelling, premium or…
lexs32/ultimate-design-engineer
Skill Claude CodeCodex
The master design engineering skill encoding Emil Kowalski's polish philosophy, Apple's fluid interface principles, Anime.js 3D/timeline motion, Motion spring physics, Kokonut UI component aesthetics, and Backlit UI dark-mode charts. Use when designing, animating, or reviewing web UIs to achieve high-precision craft…
deveshpunjabi/3d-website-skill
Skill Claude CodeCodex
Expert skill for designing, building, and deploying modern premium websites with advanced animations and 3D interactive experiences using Three.js, React Three Fiber, GSAP, and Framer Motion. Use this skill whenever the user wants to build a website with 3D elements, create an immersive web experience, add interactive…
Skill Claude CodeCodex
Reviews code changes for bugs, style issues, and best practices. Use when reviewing PRs or checking code quality.
Skill Claude CodeCodex
Build UI components, sections, and pages for the Friendship Corner Daycare website with proper theming, animations, i18n, SEO, and responsive design. Use for: creating new components, adding page sections, building new pages, recreating UI layouts from design inspiration, ensuring theme compatibility across 5 themes…
Skill Claude CodeCodex
Add animations to web components using Framer Motion, GSAP, CSS animations, and modern scroll effects. Use for: hero entrance animations, card hover effects, scroll progress indicators, staggered list animations, parallax scrolling, magnetic button effects, page transitions, scroll-triggered reveals, loading states…