Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    Frontend Motion Wizard

    8

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

    Free

    279 installs4.3 (6 reviews)
    frontend-motion-wizard

    frontend-motion-wizard

    Example session with this skill installed

    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.

    • Read your context and instructions
    • Compiled the frontend-motion-wizard
    • Generated the UI component

    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 <motion.aside> configurations with responsive, condition-gated percentage offsets (x: "-100%"), ensuring high-performance compilation and flawless desktop scaling."

    NavigationDrawer.tsx

    TSX · React component

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    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.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    Reviews

    4.3
    6 reviews
    5
    4
    4
    1
    3
    0
    2
    1
    1
    0

    Trust & safety

    Security scanned

    Verified clean 4 months ago

    • Free to download with an account

    Listed4 months ago

    What's inside

    Frequently Asked Questions