Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+21 more

    UI Modal & Dialog Planner

    1

    Architect accessible modals, drawers, and dialogs with specific keyboard, focus, and dismissal logic.

    $5

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned
    UI Modal & Dialog Planner

    UI Modal & Dialog Planner

    Example session with this skill installed

    I need to add a feature for users to edit their profile information (name, bio, and avatar) on a mobile-first dashboard. Help me plan the interaction.

    • Read your context and instructions
    • Compiled the ui modal

    I have analyzed the profile editing task for your mobile-first dashboard. Given the need for context preservation while managing several inputs, a Side Drawer is the most effective pattern.

    UI Modal & Dialog Plan

    Pattern Recommendation

    • Recommended pattern: Side Drawer (Right-aligned)

    Why it fits: On mobile, a drawer provides more vertical space for forms than a centered modal. It keeps the dashboard context partially visible while focusing the user on the edit task.

    • Alternative considered: Full Page (Rejected to maintain state in the background dashboard).

    Use Case

    • User goal: Update personal identity markers quickly.
    • Task complexity: Medium (3-4 fields + file upload).
    • Context: Dashboard stats should remain visible in the background.

    Content Hierarchy

    1. Title: Edit Profile
    2. Description: Update your public information and avatar.
    3. Main content: Avatar upload, Name field, Bio textarea.
    4. Actions: Save Changes (Primary), Cancel (Secondary).

    Action Specification

    • Primary action: "Save Changes" (Solid button, disabled if no changes detected).
    • Secondary action: "Cancel" (Ghost button).
    • Loading state: Replace button text with a spinner; disable all fields during submission.

    Dismissal Specification

    • Close button: 'X' icon in the top right corner.
    • Escape: Close drawer immediately.
    • Outside click: Trigger "Discard changes?" confirmation dialog if fields are dirty.
    • Unsaved changes: Intercept dismissal if the form has been modified.

    Keyboard & Focus Specification

    • Initial focus: The "Name" input field.
    • Tab behavior: Cycle through form fields, then to Save, then to Cancel, then to Close icon.
    • Escape: Closes the drawer.
    • Enter: Triggers "Save Changes" if focus is in a text field.
    • Focus return: Returns to the "Edit Profile" button on the dashboard.

    Quick UX Checklist

    • Is the task short enough for an overlay? Yes.
    • Is the primary action obvious? Yes, specific labeling used.
    • Are unsaved changes protected? Yes, via confirmation intercept.
    • Is it suitable for mobile? Yes, drawer pattern scales better than modals.

    Next steps

    1. Implement a focus-trap library (like focus-trap-react) for the drawer container.
    2. Ensure the background dashboard has aria-hidden="true" when the drawer is open.
    3. Hook the form "dirty" state to the dismissal logic to prevent data loss.

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

    About this skill

    The problem

    Modals are often used as a junk drawer for complex tasks, leading to broken navigation and poor mobile experiences. Developers struggle to balance accessibility requirements like focus traps and keyboard behavior with fast feature delivery.

    What it does

    • Evaluates task complexity to recommend modals, drawers, popovers, or full-page views.
    • Structures content hierarchy to ensure primary actions remain visually dominant.
    • Defines technical dismissal logic, including outside-click behavior and unsaved-change protection.
    • Maps keyboard interaction specs, including focus traps, tab order, and ARIA-compliant focus return.
    • Generates a UX checklist to validate mobile suitability and accessibility before coding starts.

    Why this beats prompting it yourself

    Generic prompts often miss critical UX failure points like accidental data loss or focus management. This skill enforces a systematic audit of interaction patterns and accessibility requirements that are frequently overlooked in standard UI generation.

    Use cases

    • Deciding whether a multi-step form belongs in a modal or a new page.
    • Planning destructive action confirmations to prevent accidental data loss.
    • Designing keyboard-accessible overlays for complex data tables.
    • Mapping out mobile-friendly drawer interactions for filter menus.

    Requires manual implementation of the accessibility logic in code. Visual styling is not provided beyond hierarchy and action placement.

    How to use

    1. 1

      Connect your agent to the Agensi MCP

      Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup

    2. 2

      Sign in to Agensi

      Your agent shows a sign-in link. Sign in and click Allow.

    3. 3

      Ask for what you need

      Your agent loads this skill and uses it on your task. It always asks before any payment.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill goes through the trust checks below.

    Security scanned

    Checked by our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Money-back guarantee

    Doesn't do what its page promises? You get your money back.

    Trust & safety

    Security scan

    Security scan passed 1 month ago

    Permissions

    No special permissions declared or detected

    Listed1 month ago

    What's inside

    Frequently Asked Questions

    This skill functions as a specialized logic layer that evaluates your UI requirements to produce technical specifications for focus traps, ARIA roles, and keyboard navigation, ensuring your overlays are fully WCAG compliant.

    You will receive a comprehensive interaction blueprint, including content hierarchy recommendations, dismissal logic protocols, and a UX checklist specifically designed to prevent data loss and mobile navigation errors.

    Absolutely; the skill analyzes the complexity of your workflow to recommend the most user-friendly container, whether that is a sliding drawer for mobile filters or a full-page view for multi-step forms.

    This skill is a plug-and-play logic module compatible with leading AI agents and LLMs; simply import the skill into your preferred workspace to begin the architectural audit.

    Unlike generic prompts, this skill uses a systematic audit framework that enforces technical constraints—like focus return and unsaved-change protection—that are typically missed by standard AI generations.

    New in UX & UI Design