ui-state-loading-check

Detect UI state, loading, and disabled-status issues in React and Flutter apps.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/catowabisabi/Agentic-RAG-LLMs-API --skill ui-state-loading-check
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-state-loading-check
Source: https://github.com/catowabisabi/Agentic-RAG-LLMs-API/tree/main/.claude/skills/ui_state_loading_checking_skill
Command: npx skills add https://github.com/catowabisabi/Agentic-RAG-LLMs-API --skill ui-state-loading-check

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

專門檢查 UI、State、Loading、Disabled 狀態及快速操作問題。

Core Features & Use Cases

  • Checks UI behavior: Loading states, Disabled states, Double-click issues, 缺少視覺提示, State 未更新(成功/失敗後)
  • For Flutter Web App testing: Use start_flutter_skill to start the application
  • Simulated scenarios: slow network, rapid clicks, user navigation away during operation

Quick Start

Start the Flutter Web App with start_flutter_skill and then verify UI, state, loading, and disabled states at http://localhost:8899.

Frequently Asked Questions about ui-state-loading-check

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check loading states and disabled controls in a Flutter Web App?

To check loading states and disabled controls in a Flutter Web App, start the application using start_flutter_skill and access it at http://localhost:8899. The tool then detects missing visual cues and incomplete state updates.

What is UI state testing for double-click issues and missing visual cues?

UI state testing for double-click issues verifies rapid user interactions do not trigger duplicate actions or leave controls improperly disabled. It ensures applications provide correct visual feedback during slow network scenarios and rapid clicks.

Does this UI testing approach work for both React and Flutter applications?

Yes, this UI testing approach works for both React and Flutter applications. It coordinates with start_flutter_skill for Flutter Web App testing and applies to React UI testing scenarios to detect loading indicators and disabled status issues.

How do I simulate slow network conditions to test loading indicators?

To simulate slow network conditions and test loading indicators, run your application and trigger operations under simulated slow network scenarios. The tool verifies loading indicators appear correctly and state updates complete after success or failure.

Why does my UI state not update correctly after a failed network request?

Your UI state might not update correctly after a failed network request due to incomplete state updates. Automated UI checks detect these missing visual cues and verify disabled controls are re-enabled after operation failures.

Can I integrate automated UI check findings with existing review references?

Yes, you can integrate automated UI check findings with existing review references. The tool produces structured findings covering UI behavior and disabled status issues suitable for integration with your current review workflows.