skills.rest
streamlit
streamlitOFFICIAL
Explore all skills by this author →
WebsiteGitHub

debugging-streamlit

Run combined Streamlit backend and frontend debug sessions with hot-reload.

45.5k|4.4k|Updated Aug 24, 2019
Search Tags:#debugging#screenshots#frontend#logging#playwright#streamlit#hot-reload
One-click install
npx skills add https://github.com/streamlit/streamlit --skill debugging-streamlit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: debugging-streamlit
Source: https://github.com/streamlit/streamlit/tree/main/.claude/skills/debugging-streamlit
Command: npx skills add https://github.com/streamlit/streamlit --skill debugging-streamlit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlit debugging workflows are complex and slow when changes span backend Python and frontend React, requiring coordinated restarts and manual log checks.

Core Features & Use Cases

  • Unified debug session: Start backend and frontend with hot-reload via a single command.
  • Log-driven troubleshooting: Centralized backend and frontend logs in work-tmp/debug for quick analysis.
  • Automated visuals: Optional Playwright-based screenshots to verify UI behavior during debugging.

Quick Start

Run make debug my_app.py to initiate a combined backend/frontend debug session and access the app at http://localhost:3000.

Frequently Asked Questions about debugging-streamlit

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

FAQPage Schema
How do I debug a Streamlit app with hot-reload for both backend and frontend?▼

Debug a Streamlit app with hot-reload by running `make debug my_app.py` to start a combined backend Python and frontend TypeScript/React environment, accessible at http://localhost:3000.

Where are Streamlit backend and frontend logs stored during a debug session?▼

Streamlit backend and frontend logs are stored centrally in the work-tmp/debug directory during a debug session, allowing you to quickly analyze outputs and troubleshoot UI bugs or code changes.

Can I take automated screenshots to verify UI behavior while debugging Streamlit?▼

You can take automated screenshots to verify UI behavior during Streamlit debugging using optional Playwright-based automated testing, capturing visual artifacts for screenshot-driven verification.

What is the best way to troubleshoot Streamlit UI bugs spanning Python and React code?▼

The best way to troubleshoot Streamlit UI bugs spanning Python and React is using a unified debug session with hot-reload, which coordinates restarts and centralizes logging for both backend and frontend code.

Do I need to manually restart the backend and frontend when validating Streamlit code changes?▼

You do not need to manually restart the backend and frontend when validating Streamlit code changes, as the debug session provides hot-reload to automatically apply updates across both environments.

Related Skills

Explore More Software Engineering Skills→
se1111thse1111th

package-management

Automate language toolchain and system dependency installation via Nix.

Community
Advanced
emmepraemmepra
1

verify-and-evidence

Identify and validate verification checks for code changes and CI readiness.

Community
Intermediate
RishabhupadhyaRishabhupadhya

webapp-testing

Automate local web app testing with Python-based Playwright scripts.

Community
Intermediate
rahul-s-bhattrahul-s-bhatt

debugging-streamlit

Run Streamlit debug sessions to inspect logs and validate UI behavior.

Community
Advanced