Claude Streamlit skill: 10 data apps you can ship

The prompt

Scaffold a 3-page Streamlit app from `data/sales.csv` (columns: date, region, rep, product, amount). Use `st.navigation` with `st.Page` for Overview / Trends / Detail. Put a `load_data()` function behind `@st.cache_data` in a shared module so all three pages reuse it. Overview shows four `st.metric` cards (total revenue, deals, avg deal size, MoM delta). Trends shows `st.line_chart` of revenue by month. Detail shows a `st.dataframe` filtered by a `st.sidebar` region selectbox. Call `st.set_page_config(layout='wide')` once.

What slides.md looks like

# app.py
import streamlit as st

st.set_page_config(page_title="Sales", layout="wide")

pages = [
    st.Page("views/overview.py", title="Overview", icon=":material/dashboard:"),
    st.Page("views/trends.py", title="Trends", icon=":material/trending_up:"),
    st.Page("views/detail.py", title="Detail", icon=":material/table:"),
]
st.navigation(pages).run()

# data.py
import streamlit as st, pandas as pd

@st.cache_data
def load_data():
    return pd.read_csv("data/sales.csv", parse_dates=["date"])

Pairs with

The prompt

My app re-runs a slow `fetch_orders()` (a 2,000-row API pull) on every slider change, so the UI stutters. Refactor it: put `fetch_orders()` behind `@st.cache_data(ttl=600)` so it caches for ten minutes and reruns only when its arguments change. Add a 'Refresh data' button that calls `st.cache_data.clear()` then `st.rerun()`. Explain in a comment why the model loading must use `@st.cache_resource` instead of `@st.cache_data`.

What slides.md looks like

import streamlit as st

@st.cache_data(ttl=600)          # cached value, re-run on arg change
def fetch_orders(region: str):
    return api.get_orders(region)   # the slow 8s call

@st.cache_resource               # one shared object, never copied
def get_db():
    return create_engine(DB_URL)

region = st.selectbox("Region", REGIONS)
orders = fetch_orders(region)    # instant after first call
if st.button("Refresh data"):
    st.cache_data.clear()
    st.rerun()

Pairs with

The prompt

Build a 3-step wizard. Keep `st.session_state.step` (default 0) and `st.session_state.answers` (a dict). Step 0: a `st.form` with name + email. Step 1: a `st.form` with company + team size (`st.number_input`). Step 2: a review screen that prints `st.session_state.answers` and a Submit button. Each form's submit advances `st.session_state.step` by 1 and stores values into `answers`. Add a Back button that decrements the step. Guard against rerun loss by initializing state at the top.

What slides.md looks like

import streamlit as st

st.session_state.setdefault("step", 0)
st.session_state.setdefault("answers", {})

if st.session_state.step == 0:
    with st.form("step0"):
        name = st.text_input("Name")
        email = st.text_input("Email")
        if st.form_submit_button("Next"):
            st.session_state.answers |= {"name": name, "email": email}
            st.session_state.step = 1
            st.rerun()
elif st.session_state.step == 2:
    st.write(st.session_state.answers)
    st.button("Submit", type="primary")

Pairs with

The prompt

Build an upload-and-chart app. `st.file_uploader('Upload CSV', type='csv')` → read into a DataFrame with `pd.read_csv`. Show `st.dataframe(df.head())`. Auto-detect numeric columns with `df.select_dtypes('number')`; let the user pick an X column (`st.selectbox`) and one or more Y columns (`st.multiselect`). Render `st.line_chart(df, x=x_col, y=y_cols)`. Handle the empty state — if no file is uploaded, show `st.info('Upload a CSV to begin')` and `st.stop()`.

What slides.md looks like

import streamlit as st, pandas as pd

up = st.file_uploader("Upload CSV", type="csv")
if up is None:
    st.info("Upload a CSV to begin")
    st.stop()

df = pd.read_csv(up)
st.dataframe(df.head())

nums = df.select_dtypes("number").columns.tolist()
x = st.selectbox("X axis", df.columns)
ys = st.multiselect("Y axis", nums, default=nums[:1])
if ys:
    st.line_chart(df, x=x, y=ys)

Pairs with

The prompt

Build a revenue explorer with Plotly. Sidebar: a `st.multiselect` of regions and a `st.slider` date range. Filter the DataFrame on those, then build a `plotly.express` line chart of revenue over time, coloured by region. Render with `st.plotly_chart(fig, use_container_width=True)`. Add a `st.radio` to switch the chart between 'line' and 'area'. Keep the figure construction in a function so the cookbook reader can reuse it.

What slides.md looks like

import streamlit as st
import plotly.express as px

regions = st.sidebar.multiselect("Region", REGIONS, default=REGIONS)
view = df[df.region.isin(regions)]

kind = st.radio("Chart", ["line", "area"], horizontal=True)
fig = (px.area if kind == "area" else px.line)(
    view, x="date", y="amount", color="region",
)
fig.update_layout(margin=dict(l=0, r=0, t=10, b=0))
st.plotly_chart(fig, use_container_width=True)

Pairs with

The prompt

Build a chat app. Keep history in `st.session_state.messages` (a list of {role, content}). On load, replay every message with `st.chat_message(role)`. Read new input from `st.chat_input('Ask…')`; append the user turn, then call my `generate(prompt, history)` function (leave it as a stub I'll wire to an API). Stream the assistant reply with `st.write_stream` so tokens appear live, and append the final text to history. Add a sidebar button that clears the conversation.

What slides.md looks like

import streamlit as st

st.session_state.setdefault("messages", [])

for m in st.session_state.messages:
    with st.chat_message(m["role"]):
        st.markdown(m["content"])

if prompt := st.chat_input("Ask…"):
    st.session_state.messages.append({"role": "user", "content": prompt})
    with st.chat_message("user"):
        st.markdown(prompt)
    with st.chat_message("assistant"):
        reply = st.write_stream(generate(prompt, st.session_state.messages))
    st.session_state.messages.append({"role": "assistant", "content": reply})

Pairs with

The prompt

Build an editable table over a `products` table (sku, name, price, in_stock). Load it with a cached `read_products()`. Render `st.data_editor(df, num_rows='dynamic', key='editor')`. On a 'Save changes' button, compare the editor's current value to the original DataFrame, compute the changed/added/deleted rows, and run the corresponding UPDATE / INSERT / DELETE through SQLAlchemy in a transaction. Show `st.toast('Saved N changes')`. Keep the DB engine behind `@st.cache_resource`.

What slides.md looks like

import streamlit as st, pandas as pd

original = read_products()                       # cached
edited = st.data_editor(
    original, num_rows="dynamic", key="editor",
    column_config={"price": st.column_config.NumberColumn(format="$%.2f")},
)

if st.button("Save changes", type="primary"):
    changed = edited.compare(original)
    write_back(edited, original)                 # UPDATE/INSERT/DELETE
    st.toast(f"Saved {len(changed)} rows")
    st.cache_data.clear()

Pairs with

The prompt

Add a Google OpenID auth gate to my app. Use `st.user.is_logged_in`: if false, show only a title and a `st.login()` button via `st.button`, then `st.stop()`. If true, greet `st.user.name` and render the real app, with a `st.logout()` button in the sidebar. Read the API key the app needs from `st.secrets['api']['key']` rather than hardcoding it. Generate the matching `.streamlit/secrets.toml` stub with the `[auth]` block and placeholders — no real secrets in the file.

What slides.md looks like

import streamlit as st

if not st.user.is_logged_in:
    st.title("Internal Dashboard")
    st.button("Log in with Google", on_click=st.login)
    st.stop()

st.sidebar.button("Log out", on_click=st.logout)
st.write(f"Hello, {st.user.name}")

api_key = st.secrets["api"]["key"]    # from .streamlit/secrets.toml

# .streamlit/secrets.toml
# [auth]
# redirect_uri = "http://localhost:8501/oauth2callback"
# cookie_secret = "REPLACE_ME"
# client_id = "REPLACE_ME"
# client_secret = "REPLACE_ME"
# server_metadata_url = "https://accounts.google.com/.well-known/openid-configuration"

Pairs with

The prompt

My dashboard has a heavy header (charts, tables) and one 'live metrics' panel I want to auto-refresh every 5 seconds. Wrap the live panel in a function decorated with `@st.fragment(run_every='5s')` so only that fragment reruns on the timer — the expensive header stays put. Inside the fragment, pull the latest numbers and render three `st.metric` cards. Explain in a comment why moving the timer logic out of the fragment would force a full-page rerun.

What slides.md looks like

import streamlit as st

st.title("Ops dashboard")
render_expensive_header()        # runs once, not on the timer

@st.fragment(run_every="5s")
def live_panel():
    stats = fetch_live_stats()   # cheap call, every 5s
    a, b, c = st.columns(3)
    a.metric("Requests/s", stats.rps, stats.rps_delta)
    b.metric("Error rate", f"{stats.err:.2%}")
    c.metric("p95 latency", f"{stats.p95} ms")

live_panel()                     # only this reruns on the interval

Pairs with

The prompt

Prepare my Streamlit app for deployment two ways. (1) Community Cloud: generate a `requirements.txt` pinned from my imports and a `.streamlit/config.toml` with a dark theme (`[theme] base='dark'`, a primaryColor) plus `[server] maxUploadSize=50`. (2) Docker: write a Dockerfile that installs deps, copies the app, exposes 8501, and sets the entrypoint to `streamlit run app.py --server.port=8501 --server.address=0.0.0.0`, with a `HEALTHCHECK` hitting `/_stcore/health`. Note which secrets move to the Community Cloud secrets UI versus a mounted file.

What slides.md looks like

# Dockerfile
FROM python:3.12-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
COPY . .
EXPOSE 8501
HEALTHCHECK CMD curl --fail http://localhost:8501/_stcore/health
ENTRYPOINT ["streamlit", "run", "app.py", \
            "--server.port=8501", "--server.address=0.0.0.0"]

# .streamlit/config.toml
[theme]
base = "dark"
primaryColor = "#FF4B4B"
[server]
maxUploadSize = 50

Pairs with