skills.rest
cajias
cajiasCOMMUNITY
Explore all skills by this author →
GitHub

streamlit-ui-visual-verification

Verify Streamlit dashboards by inspecting the rendered browser UI.

Updated Nov 18, 2025
Search Tags:#dashboard#playwright#browser testing#streamlit#visual verification#ui validation
One-click install
npx skills add https://github.com/cajias/claude-skills --skill streamlit-ui-visual-verification
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: streamlit-ui-visual-verification
Source: https://github.com/cajias/claude-skills/tree/main/plugins/testing/skills/streamlit-ui-visual-verification
Command: npx skills add https://github.com/cajias/claude-skills --skill streamlit-ui-visual-verification

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents false confidence when a Streamlit app appears healthy from the server side but the user interface is still broken, empty, or missing newly added options.

Core Features & Use Cases

  • Visual UI validation: Confirms the rendered page actually shows the expected tabs, dropdowns, charts, and error states.
  • Streamlit-specific failure detection: Catches cases where HTTP 200, successful imports, or clean logs hide broken UI wiring.
  • Iframe widget gotchas: Helps verify third-party Streamlit components such as tab bars and cookie managers that can drift from module logic.
  • Use case: After adding a new data source, strategy, or dashboard control, use this Skill to make sure the new option appears and functions in the browser before marking the task complete.

Quick Start

Ask Claude to launch the Streamlit app, open it in a browser, and visually verify that the new UI feature is present and working.

Frequently Asked Questions about streamlit-ui-visual-verification

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

FAQPage Schema
How do I verify Streamlit UI changes in a real browser instead of just checking server health?▼

To verify Streamlit UI changes in a real browser, you need browser-based inspection to check the rendered page, review the accessibility tree, and scan for console errors. This confirms the interface is actually correct rather than just returning HTTP 200.

Why does my Streamlit dashboard show a successful import but the UI widgets are still broken or empty?▼

Streamlit dashboards can show successful imports and clean logs while UI widgets remain broken due to divergent server health and user-visible behavior. Visual verification catches these cases where HTTP 200 responses hide broken UI wiring or missing dropdown options.

How do I test Streamlit dropdown population and tab widgets after adding new components?▼

To test Streamlit dropdown population and tab widgets after adding new components, use browser-based visual UI validation. This confirms the newly added options actually appear and function in the rendered interface before marking the task complete.

Can I use Playwright to catch Streamlit iframe widget issues like third-party component drift?▼

Yes, using Playwright for browser testing helps verify Streamlit iframe widgets such as tab bars and cookie managers. It catches third-party component drift by inspecting the rendered accessibility tree and checking for console errors where module logic diverges from visible behavior.

What is visual verification for Streamlit dashboards and when do I need it?▼

Visual verification for Streamlit dashboards is the process of checking the rendered browser UI to confirm expected tabs, dropdowns, and charts are displayed. You need it when server-side checks like HTTP probes or import success do not guarantee the user interface is actually correct.

Does HTTP 200 status guarantee my Streamlit component-driven screen is working correctly?▼

No, an HTTP 200 status does not guarantee a Streamlit component-driven screen is working correctly. Server health can diverge from user-visible behavior, meaning you must perform browser-based inspection and console-error checks to confirm the interface is actually correct.

Related Skills

Explore More Software Engineering Skills→
smriksmrik
1

local-dashboard-playwright

Automate Streamlit dashboard UI validation and snapshot testing with Playwright.

Community
Intermediate
CoalSeenseiCoalSeensei

qa-tester

Automate QA test execution for Modular RAG MCP Server via Python scripts.

Community
Advanced
tech-with-sethtech-with-seth
4

playwright-cli

Automate browser UI tests using Playwright CLI commands.

Official
Advanced
mistakeknotmistakeknot

runtime-diagnostics

Scaffold a diagnostic HTTP server and CLI for Tauri and Electron apps.

Community
Advanced