responsive ui review assistant

    1

    Evidence-first responsive UI review agent for diagnosing layout constraints and component behavior across viewports.

    Free

    3 installsSecurity scanned

    Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    responsive ui review assistant

    Example session with this skill installed

    Run a FULL review on this navigation component code. It's a horizontal bar with 6 links and a logo. How should it behave on mobile? [CSS/HTML attached]

    • Read your context and instructions
    • Compiled the responsive ui review
    • Generated the UI component

    I have completed a FULL responsive review of the navigation component based on the provided HTML and CSS.

    Responsive Navigation Analysis

    ViewportStateLayout StrategyObserved Constraint
    Desktop (>1024px)ExpandedHorizontal FlexOBSERVED: Total width of links (620px) + Logo (120px) fits container.
    Tablet (768px-1024px)CompressedFlex Wrap / JustifyCALCULATED: Gap reduces to 8px to prevent overflow.
    Mobile (<767px)DisclosureHamburger MenuRECOMMENDATION: Links exceed 320px width; switch to vertical drawer.

    Component Behavior Matrix

    • Logo: Remains fixed-width (120px) but shifts to center-aligned on mobile (RECOMMENDATION).
    • Links: 6 items transition from display: flex to display: block within a hidden checkbox-triggered drawer.

    Touch Targets: Current links are 14px high.

    RISK: Mobile targets must increase to 44px height for ergonomic compliance.

    Implementation Recommendations

    1. ID-01 (Priority: P0): Implement a CSS media query at 768px to hide the horizontal list and show a toggle button.
    2. ID-02 (Priority: P1): Use overflow-y: auto on the mobile drawer to prevent content cutoff on short viewports.

    Next steps

    • Apply the suggested 768px breakpoint in your nav.css.
    • Increase link padding for mobile view to ensure 44px touch targets.
    • Verify the drawer toggle works with keyboard navigation (Tab/Enter).

    responsive-ui-review-assistant.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

    The problem

    Static design handoffs and raw CSS often fail to account for how layouts actually break under pressure. Developers frequently rely on "device folklore" breakpoints that don't fit the actual content constraints, leading to overflow issues and broken user flows on mobile.

    What it does

    • Analyzes HTML, CSS, and screenshots to identify layout failure points where content no longer fits.
    • Maps component state transitions across desktop, intermediate, and compact viewports.
    • Audits content priority to ensure critical user tasks aren't buried or hidden on smaller screens.
    • Diagnoses risks in touch targets, typography wrapping, and grid behavior.
    • Generates implementation-ready handoff requirements with explicit acceptance criteria.

    Why this beats prompting it yourself

    Generic prompts often hallucinate browser behavior or suggest arbitrary breakpoints. This skill uses a structured evidence-first model that separates observed facts from inferences, ensuring recommendations are grounded in your actual code and design constraints rather than generic best practices.

    Use cases

    • Conducting a pre-deployment responsive QA audit to find edge-case overflow issues.
    • Translating a desktop-only design into a mobile-first implementation plan.
    • Reviewing legacy CSS to identify rigid layout constraints preventing modern responsiveness.
    • Generating precise technical requirements for component behavior across different screen sizes.

    Known limitations

    Cannot prove actual runtime rendering, browser-specific engine differences, or real-time animation performance without live browser access.

    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

    3 installs

    Downloaded by developers to date

    Free forever

    No account required to browse

    Trust & safety

    Security scanned

    Verified clean 14 days ago

    • Free to download with an account

    Listed14 days ago

    What's inside

    Frequently Asked Questions