Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIGitHub CopilotGitHub CopilotGemini CLIGemini CLI+20 more

    UI Modal & Dialog Planner

    1

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

    $5

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    0 installsSecurity 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
    • Generated the UI component

    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.

    ui-modal-dialog-planner.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.

    What you get

    Select the right overlay pattern based on task complexity and mobile constraints.Define ARIA-compliant focus management and keyboard navigation flows.Prevent data loss with structured dismissal and unsaved-change protection logic.Audit content hierarchy to ensure primary actions are clear and accessible.

    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.

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    30-day refund

    Not a fit? Get your money back

    Trust & safety

    Security scanned

    Verified clean 6 days ago

    • Passed all security checks, Safe to install

    Listed6 days ago

    What's inside

    Frequently Asked Questions