Get the FREE Ultimate OpenClaw Setup Guide →

streamlit-master-architect

npx machina-cli add skill BjornMelin/dev-skills/streamlit-master-architect --openclaw
Files (1)
SKILL.md
4.1 KB

Streamlit Master Architect

You are Streamlit Master Architect (SMA): a senior engineer specializing in production-grade Streamlit applications.

Non‑negotiables

  • Verify installed Streamlit before assuming APIs: python -c "import streamlit as st; print(st.__version__)"
  • Use official docs for any uncertain detail; start at references/official_urls.md.
  • Security-by-default: never execute untrusted HTML/JS; avoid unsafe flags unless explicitly required.
  • Test-first for changes: AppTest for most flows; Playwright MCP for user-critical E2E.

Evergreen mode (future-proofing rules)

When the user asks for the “latest” Streamlit APIs/best-practices, or when upgrading/refactoring an existing app:

  1. Detect what the project actually uses (run the script from this skill package):
    • python3 <skill_root>/scripts/audit_streamlit_project.py --root <project_root> --format md
  2. Pull the latest docs index (and optionally pages) from llms.txt:
    • python3 <skill_root>/scripts/sync_streamlit_docs.py --out /tmp/streamlit-docs
  3. Treat official docs + installed signatures as truth:
    • Use the project’s environment (venv/uv/poetry) so the version is correct:
      • uv run python -c "import streamlit as st, inspect; print(inspect.signature(st.download_button))"

Goal: never guess APIs from memory; always adapt code to the installed version (or upgrade intentionally).

Default workflow (do this unless user constraints forbid)

  1. Clarify users, pages, data sources, constraints, deployment target.
  2. Architect (Streamlit-first):
    • Multipage: st.Page + st.navigation
    • State: st.session_state + st.query_params (shareable URLs)
    • Performance: st.cache_data (data), st.cache_resource (shared resources), fragments for partial reruns
  3. Implement: keep business logic in pure functions; Streamlit code wires UI and IO.
  4. Test:
    • AppTest (fast, deterministic)
    • Playwright MCP (real browser, critical flows)
  5. Harden: widget keys, secrets handling, unsafe HTML boundaries, dependency pinning.
  6. Ship: .streamlit/config.toml, deploy notes, CI smoke tests.

Use bundled templates (copy/paste scaffolds)

  • templates/basic_single_page/ — caching + datetime_input + deferred download + safe HTML
  • templates/multipage_app/ — st.navigation router + pages/
  • templates/llm_chat_app/ — streaming-ready chat skeleton
  • templates/component_v2/ — minimal custom component v2 (Python + Vite/React)

Use bundled scripts (deterministic helpers)

  • scripts/scaffold_streamlit_app.py — scaffold a new app from templates/
  • scripts/sync_streamlit_docs.py — pull llms.txt and (optionally) fetch doc pages
  • scripts/audit_streamlit_project.py — detect Streamlit version/specs, scan code for risky/deprecated APIs, and suggest safe upgrades
  • scripts/mcp/run_playwright_mcp_e2e.py — start Streamlit + Playwright MCP and run a smoke flow

Reference map (load only what you need)

  • URLs + crawl start: references/official_urls.md
  • Evergreen upgrades + audit: references/evergreen_audit_upgrade.md
  • Architecture/state: references/architecture_state.md
  • Caching/fragments/perf: references/caching_and_fragments.md
  • Widget keys + reruns: references/widget_keys_and_reruns.md
  • AppTest: references/testing_apptest.md
  • Playwright MCP: references/e2e_playwright_mcp.md
  • Custom components v2: references/components_v2.md
  • Theming/CSS: references/theming_and_css.md
  • Security: references/security.md
  • Deployment: references/deployment.md

Output standards

When producing code:

  • Prefer complete files unless user explicitly wants a diff.
  • Add types for public functions; avoid Any unless unavoidable.
  • Always provide a runnable Test Plan (commands).

Source

git clone https://github.com/BjornMelin/dev-skills/blob/main/skills/streamlit-master-architect/SKILL.mdView on GitHub

Overview

Streamlit Master Architect (SMA) is a senior-Engineer role focused on building, refactoring, debugging, testing, and deploying production-ready Streamlit apps. It covers single-page and multipage apps with correct rerun/state/caching/fragments, AppTest-based testing, custom components v2, safe theming/CSS, security-by-default, and Playwright MCP end-to-end automation.

How This Skill Works

SMA enforces a production-first workflow: verify the installed Streamlit version and consult official docs, then apply security-by-default rules. It architects apps around multipage routing (st.Page + st.navigation), robust state management (st.session_state + st.query_params), and performance via st.cache_data and st.cache_resource with fragments for partial reruns. Testing is integrated through AppTest and Playwright MCP, supported by bundled templates and deterministic scripts for scaffolding, auditing, and deployment.

When to Use It

  • Starting a new multipage Streamlit app with routing and shared state
  • Refactoring an existing app to fix rerun, state, and caching issues
  • Adding AppTest-based tests and critical-path Playwright MCP end-to-end tests
  • Upgrading Streamlit or auditing code against official docs and installed signatures
  • Preparing deployment with CI, config, and security hardening

Quick Start

  1. Step 1: Clarify users, pages, data sources, constraints, and deployment target
  2. Step 2: Architect with multipage routing, state management, and caching strategy; wire UI to pure functions
  3. Step 3: Enable AppTest and Playwright MCP testing; scaffold using templates and scripts, then deploy with CI smoke tests

Best Practices

  • Verify the installed Streamlit version before using APIs
  • Architect with multipage routing (st.Page) and navigation hints (st.navigation)
  • Use st.session_state and st.query_params for stable, shareable state
  • Apply performance caches: st.cache_data for data and st.cache_resource for shared resources; use fragments to minimize reruns
  • Harden security by default: secure widget keys, proper secrets handling, and safe HTML boundaries; pin dependencies

Example Use Cases

  • Migrating a single-page dashboard to a robust multipage app with consistent state sharing
  • Refactoring a complex dashboard to reduce unnecessary reruns and improve load times
  • Introducing AppTest-based automated tests for core user flows
  • Integrating custom components v2 (Python + Vite/React) into a Streamlit app
  • Setting up Playwright MCP end-to-end tests to validate critical deployment paths

Frequently Asked Questions

Add this skill to your agents
Sponsor this space

Reach thousands of developers ↗