Works with the AI tools you already use

    CClaude CodeCCursorCCodex CLIGGitHub CopilotGGemini CLIVVS CodeWWindsurf+15 more

    Frontend Motion Wizard

    by tudor

    7

    * Constructs High-Fidelity UI Physics: Upgrades rigid layouts into production-grade, highly interactive responsive applications.

    Free

    60 installs5.0 (2 reviews)

    See it in action

    You say

    Refactor this static mobile side-navigation drawer to slide in seamlessly from the left edge when opened, scale down smoothly on touch tap interaction, and make sure it doesn't break layout rules on desktop screens.

    Your agent does

    > M0/M3 MULTI-BREAKPOINT OPTIMIZATION PASS COMPLETE > FILE: `src/components/NavigationDrawer.tsx` > CAUSE: Unwrapped layout states causing visual snapping and shifting across different viewport breakpoints. > FIX: Upgraded layout wrappers to use hardware-accelerated `` configurations with responsive, condition-gated percentage offsets (`x: "-100%"`), ensuring high-performance compilation and flawless desktop scaling."

    About this skill

    What it does

    • Constructs High-Fidelity UI Physics: Upgrades rigid layouts into production-grade, highly interactive responsive applications.
    • Responsive Breakpoint Adapters: Configures layout transitions to match mobile-first setups, avoiding horizontal viewport breakage or structural shifts.
    • Smooth Layout Highlights: Dynamically moves active selection capsules seamlessly along navigation rails using shared layout tracking matrices.
    • GPU-Optimized Frame Preservation: Locks animation parameters strictly to hardware-accelerated vectors to protect battery and rendering frames.
    frontend
    framer-motion
    tailwind-css
    react-components
    mirco-interactions
    web-performance
    layout-transitions
    mobile-responsive

    How to install

    Drop the file into your AI Agent. Works with Claude, Cursor, ChatGPT, and 20+ more.

    Reviews

    5.0
    2 reviews
    5
    2
    4
    0
    3
    0
    2
    0
    1
    0

    60 people have installed this skill.

    Verified Download
    about 1 month ago
    Samuel Rose
    Verified Download
    about 2 months ago

    actually very useful!

    Mihai Danciu

    Trust & safety

    Security scanned

    Verified clean 1 month ago

    • Free forever, no account required

    Installs60
    Listed1 month ago

    Creator

    tudor.ai

    I'm a young guy who is passionate about CS, maths and ML development. I love learning important algorithms, software dev practices, technologies, and also brainstorming and implementing full projects using AI. I use various skills and practices when prompting, to create different types of services with AI agents like Claude, Cursor and want to share some of my skills, which include UI, but also backend and AI development. I'm interested in creating RAG vector retrieval chatbots that get trained on any knowledge base for a niche, and I want to share my .md files that help build them fast and complex.

    Frequently Asked Questions

    Popular in Frontend & Design

    Award Winning Design: Turn Claude Into a World Class Designer

    Award Winning Design: Turn Claude Into a World Class Designer

    v2 of Design Philosophy — a senior-designer brain for your agent. Industry-specific, award-caliber UI plus six pro UX reasoning modules. Same prompt, radically better design.

    $7.99
    144.5(2)
    Cinematic Landing Page Builder

    Cinematic Landing Page Builder

    Turn any business URL into a high-end animated landing page with 4K AI assets and GSAP animations via Cloudflare.

    $19
    165.0(1)
    ui-component-architect

    ui-component-architect

    Generates stunning, mobile-responsive Tailwind CSS components and modern landing pages.

    Free
    19

    Design System MD — Brand-Quality UI via DESIGN.md

    Apply world-class design systems to any UI project in one step using getdesign.md CLI

    Free
    2

    Free