UI Interaction and State Behavior Review
Finds missing loading, empty and error states, unsafe destructive actions, and broken focus or form behavior, with exact fixes.
Before & after
Same prompt, same agent — the only difference is the skill.
That's a good UX question. There are a few different patterns you could use—virtualization, pagination, infinite scroll. It really depends on what your users are trying to do with the data. Are they scanning for one record or comparing across many? How often do they need to jump to a specific row? Do they have a search or filter? Understanding the use case would help me recommend the right approach. You could also do some user testing to see what feels natural. Happy to walk through the pros and cons of each pattern if that helps.
DATA TABLE INTERACTION PATTERNS FOR LARGE SETS
GOAL: Display 10,000+ rows without degrading performance
PATTERN 1: Virtualization (Recommended for 10k+ rows)
• Render only visible rows (40-60 on screen at a time)
• User experience: Smooth scrolling, instant load, no lag
• Implementation: React Window or ag-Grid with virtual scrolling
• Best for: Scanning, filtering, sorting within large datasets
• Avoid: Complex nested content per row (slow to render)
PATTERN 2: Pagination (Best for export, comparison)
• Show 50 rows per page, next/previous buttons
• User experience: Deliberate navigation, clear checkpoint
• Implementation: Simple HTML buttons, minimal JavaScript
• Best for: Reports, where users want to download or bookmark a page
• Avoid: If users need to compare rows across pages (context loss)
PATTERN 3: Infinite Scroll (NOT recommended for tables)
• Auto-load more rows as user scrolls down
• Problem: Can't scroll back to top, no context anchor
• Use only for: Unstructured feeds (Twitter, Instagram)
• Avoid: Tables (users lose place)
ACCESSIBILITY & STATES
• Empty state: "No results match your filters" (help text included)
• Loading state: Skeleton loaders for each row (not spinner)
• Error state: "Connection lost. Retry?" (clear action button)
• Keyboard nav: Arrow keys move between cells, Enter to expand row detail
• Screen reader: Table announces current page ("Showing 51-100 of 5,000")
RECOMMENDED SOLUTION
• Virtualization + filter bar at top (search by name, date, status)
• "Rows per page" option (25, 50, 100) to balance detail vs. performance
• Sticky header (stays visible while scrolling)
• Click row to expand detail panel (side drawer, not modal)About this skill
Your AI-generated UI looks finished in the screenshot. Then someone double-clicks Submit, the request fails, the list comes back empty, or someone opens it on a tablet, and it breaks. This skill follows every action through its full lifecycle and tells you exactly which behavior is missing or wrong, and what to replace it with.
What it does
- Lists every action on the screen and classifies it by frequency, reversibility, latency, and blast radius, then judges each one against that
- Builds a state matrix that catches missing loading, empty (first-use vs no-results vs cleared), partial, error, and permission states
- Matches safety to stakes: undo for frequent reversible actions, named confirmations for costly ones, type-to-confirm for irreversible ones
- Fixes form behavior: when to validate, how to word errors, double-submit protection, why a disabled submit button hurts, and input types and autofill
- Checks modal and focus handling, toast misuse, hover-only controls, touch target size, keyboard parity, and whether scroll, filters, and tabs survive Back navigation
- When you share code, patches it directly for the blockers
What you get
A list of findings, most severe first. Each one names a concrete scenario where the UI breaks and gives an exact fix: copy, timings, and where focus goes. A state-coverage table follows. If you ask for a new flow, you get a behavior spec instead.
Best for
Frontend developers and product designers shipping AI-generated or quickly built React/web UIs who want them to hold up on real users, slow networks, keyboards, and touch screens.
SKILL.md preview
---
name: ui-interaction-state-review
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.