Writing Streamlit Apps
PostHog/posthog
Write Streamlit app source code that runs well in a PostHog sandbox — the posthogapps.query() bridge for reading PostHog data, the packages baked into the sandbox image, caching and session state…
Agent skill
by iusztinpaul in iusztinpaul/designing-real-world-ai-agents-workshop
Optimizing Streamlit app performance. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.
$ npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill optimizing-streamlit-performance -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install iusztinpaul/designing-real-world-ai-agents-workshop optimizing-streamlit-performance --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/developing-with-streamlit/skills/optimizing-streamlit-performance .claude/skills/optimizing-streamlit-performance && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "optimizing-streamlit-performance" agent skill from https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop/tree/main/.agents/skills/developing-with-streamlit/skills/optimizing-streamlit-performance into .claude/skills/optimizing-streamlit-performance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "optimizing-streamlit-performance", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop/tree/main/.agents/skills/developing-with-streamlit/skills/optimizing-streamlit-performanceType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill optimizing-streamlit-performance -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install iusztinpaul/designing-real-world-ai-agents-workshop optimizing-streamlit-performance --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/developing-with-streamlit/skills/optimizing-streamlit-performance .agents/skills/optimizing-streamlit-performance && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "optimizing-streamlit-performance" agent skill from https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop/tree/main/.agents/skills/developing-with-streamlit/skills/optimizing-streamlit-performance into .agents/skills/optimizing-streamlit-performance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "optimizing-streamlit-performance", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill optimizing-streamlit-performance -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install iusztinpaul/designing-real-world-ai-agents-workshop optimizing-streamlit-performance --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/developing-with-streamlit/skills/optimizing-streamlit-performance .cursor/skills/optimizing-streamlit-performance && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "optimizing-streamlit-performance" agent skill from https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop/tree/main/.agents/skills/developing-with-streamlit/skills/optimizing-streamlit-performance into .cursor/skills/optimizing-streamlit-performance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "optimizing-streamlit-performance", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop.git --path .agents/skills/developing-with-streamlit/skills/optimizing-streamlit-performance--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill optimizing-streamlit-performance -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install iusztinpaul/designing-real-world-ai-agents-workshop optimizing-streamlit-performance --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/developing-with-streamlit/skills/optimizing-streamlit-performance .gemini/skills/optimizing-streamlit-performance && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "optimizing-streamlit-performance" agent skill from https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop/tree/main/.agents/skills/developing-with-streamlit/skills/optimizing-streamlit-performance into .gemini/skills/optimizing-streamlit-performance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "optimizing-streamlit-performance", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install iusztinpaul/designing-real-world-ai-agents-workshop optimizing-streamlit-performanceInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill optimizing-streamlit-performance -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/developing-with-streamlit/skills/optimizing-streamlit-performance .github/skills/optimizing-streamlit-performance && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "optimizing-streamlit-performance" agent skill from https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop/tree/main/.agents/skills/developing-with-streamlit/skills/optimizing-streamlit-performance into .github/skills/optimizing-streamlit-performance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "optimizing-streamlit-performance", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill optimizing-streamlit-performance -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install iusztinpaul/designing-real-world-ai-agents-workshop optimizing-streamlit-performance --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/developing-with-streamlit/skills/optimizing-streamlit-performance .opencode/skills/optimizing-streamlit-performance && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "optimizing-streamlit-performance" agent skill from https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop/tree/main/.agents/skills/developing-with-streamlit/skills/optimizing-streamlit-performance into .opencode/skills/optimizing-streamlit-performance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "optimizing-streamlit-performance", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
optimizing-streamlit-performanceOptimizing Streamlit app performance. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.
Optimizing Streamlit Performance is an agent skill from iusztinpaul/designing-real-world-ai-agents-workshop. Optimizing Streamlit app performance. Use when apps are slow, rerunning too often, or loading heavy content. Covers caching, fragments, and static vs dynamic widget choices.
Its SKILL.md is about 2.2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Backend & APIs, covering Caching. It works with Streamlit. The repository describes itself as: Hands-on workshop: Build a multi-agent AI system from scratch — Deep Research Agent + Writing Workflow served as MCP servers. Includes code, slides, and video. The licence is Apache-2.0.
Read from SKILL.md and the folder at commit ea4f6e9. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md (its code samples are python).
From the folder's file list and the shell code blocks in SKILL.md.
Links to these hosts (documentation or services it may open):
docs.streamlit.ioFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Optimizing Streamlit Performance loads about 2.2k tokens when it runs. Until then it costs about 52 tokens; SKILL.md has 432 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from iusztinpaul/designing-real-world-ai-agents-workshop at commit ea4f6e9, republished under its Apache-2.0 licence (© iusztinpaul). 432 words, ~2,183 tokens.
.claude/skills/optimizing-streamlit-performance/SKILL.md (or your agent's skills folder).Performance is the biggest win. Without caching and fragments, your app reruns everything on every interaction.
Use for any function that loads or computes data.
# BAD: Recomputes on every rerun
def load_data(path):
return pd.read_csv(path)
# GOOD: Cached
@st.cache_data
def load_data(path):
return pd.read_csv(path)Use for connections, API clients, ML models—objects that can't be serialized.
@st.cache_resource
def get_connection():
return st.connection("snowflake")
@st.cache_resource
def load_model():
return torch.load("model.pt")Critical warning: Never mutate @st.cache_resource returns—changes affect all users:
# BAD: Mutating shared resource
@st.cache_resource
def get_config():
return {"setting": "default"}
config = get_config()
config["setting"] = "custom" # Affects ALL users!
# GOOD: Copy before modifying
config = get_config().copy()
config["setting"] = "custom"Cleanup with on_release: Clean up resources when evicted from cache:
def cleanup_connection(conn):
conn.close()
@st.cache_resource(on_release=cleanup_connection)
def get_database():
return create_connection()@st.cache_data(ttl="5m") # 5 minutes
def get_metrics():
return api.fetch()
@st.cache_data(ttl="1h") # 1 hour
def load_reference_data():
return pd.read_csv("large_reference.csv")Guidelines:
ttl="1m" or lessttl="5m" to ttl="15m"ttl="1h" or moreImportant: Caches without ttl or max_entries can grow indefinitely and cause memory issues. For any cached function that stores changing objects (user-specific data, parameterized queries), set limits:
# BAD: Unbounded cache - memory will grow indefinitely
@st.cache_data
def get_user_data(user_id):
return fetch_user(user_id)
# GOOD: Bounded cache with TTL
@st.cache_data(ttl="1h")
def get_user_data(user_id):
return fetch_user(user_id)
# GOOD: Bounded cache with max entries
@st.cache_data(max_entries=100)
def get_user_data(user_id):
return fetch_user(user_id)Use ttl for time-based expiration OR max_entries for size-based limits. You usually don't need both.
Don't cache functions that read widgets:
# BAD: Widget inside cached function
@st.cache_data
def filtered_data():
query = st.text_input("Query") # Widget inside cached function!
return df[df["name"].str.contains(query)]
# GOOD: Pass widget values as parameters
@st.cache_data
def filtered_data(query: str):
return df[df["name"].str.contains(query)]
query = st.text_input("Query")
result = filtered_data(query)Cache at the right granularity:
# BAD: Caching too much - new cache entry per filter value
@st.cache_data
def get_and_filter_data(filter_value):
data = load_all_data() # Expensive!
return data[data["col"] == filter_value]
# GOOD: Cache the expensive part, filter separately
@st.cache_data(ttl="1h")
def load_all_data():
return fetch_from_database()
data = load_all_data()
filtered = data[data["col"] == filter_value]Use @st.fragment to isolate reruns for self-contained UI pieces.
# BAD: Full app reruns
st.metric("Users", get_count())
if st.button("Refresh"):
st.rerun()
# GOOD: Only fragment reruns
@st.fragment
def live_metrics():
st.metric("Users", get_count())
st.button("Refresh")
live_metrics()For auto-refreshing metrics, use run_every:
@st.fragment(run_every="30s")
def auto_refresh_metrics():
st.metric("Users", get_count())
auto_refresh_metrics()Use for: live metrics, refresh buttons, interactive charts that don't affect global state.
By default, every widget interaction triggers a full rerun. Use st.form to batch multiple inputs and only rerun on submit.
# BAD: Reruns on every keystroke and selection
name = st.text_input("Name")
email = st.text_input("Email")
role = st.selectbox("Role", ["Admin", "User"])
# GOOD: Single rerun when user clicks Submit
with st.form("user_form"):
name = st.text_input("Name")
email = st.text_input("Email")
role = st.selectbox("Role", ["Admin", "User"])
submitted = st.form_submit_button("Submit")
if submitted:
save_user(name, email, role)Use border=False for seamless inline forms that don't look like forms:
with st.form("search", border=False):
with st.container(horizontal=True):
query = st.text_input("Search", label_visibility="collapsed")
st.form_submit_button(":material/search:")When to use forms:
When NOT to use forms: If inputs depend on each other (e.g., selecting a country should update available cities), forms won't work since there's no rerun until submit.
This is critical and often missed.
Layout containers like st.tabs, st.expander, and st.popover always render all their content, even when hidden or collapsed.
To render content only when needed, use elements like st.segmented_control, st.toggle, or @st.dialog with conditional logic:
# BAD: Heavy content loads even when tab not visible
tab1, tab2 = st.tabs(["Light", "Heavy"])
with tab2:
expensive_chart() # Always computed!
# GOOD: Content only loads when selected
view = st.segmented_control("View", ["Light", "Heavy"])
if view == "Heavy":
expensive_chart() # Only computed when selected# BAD: Expander content always loads
with st.expander("Advanced options"):
heavy_computation() # Runs even when collapsed!
# GOOD: Toggle controls loading
if st.toggle("Show advanced options"):
heavy_computation() # Only runs when toggled onMove expensive work outside the main flow:
@st.cache_data
def load_data():
return pd.read_parquet("large_file.parquet")Note: This is only an escape hatch when serialization becomes too slow. In most cases, data this large shouldn't be loaded entirely into memory—prefer using a database that queries and loads data on demand.
@st.cache_data uses pickle which slows with huge data. Use @st.cache_resource instead:
@st.cache_resource # No serialization overhead
def load_huge_data():
return pd.read_parquet("huge_file.parquet")
# WARNING: Don't mutate the returned DataFrame!When exploring large datasets, load a random sample instead of the full data:
@st.cache_data(ttl="1h")
def load_sample(n=10000):
df = pd.read_parquet("huge.parquet")
return df.sample(n=n)Custom threads cannot call Streamlit commands (no session context).
import threading
def fetch_in_background(url, results, index):
results[index] = requests.get(url).json() # No st.* calls!
# Collect results, then display in main thread
results = [None] * len(urls)
threads = [
threading.Thread(target=fetch_in_background, args=(url, results, i))
for i, url in enumerate(urls)
]
for t in threads:
t.start()
for t in threads:
t.join()
# Now display in main thread
for result in results:
st.write(result)Prefer alternatives when possible:
@st.cache_data for expensive computations@st.fragment(run_every="5s") for periodic updates© iusztinpaul, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in .agents/skills/developing-with-streamlit/skills/optimizing-streamlit-performance of iusztinpaul/designing-real-world-ai-agents-workshop.
Open the folder on GitHubat commit ea4f6e9
Optimizing Streamlit Performance next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Optimizing Streamlit Performance this skilliusztinpaul/designing-real-world-ai-agents-workshop | 513 | — | ~2.2k | Automated safety check: Pass | Apache-2.0 | |
| Writing Streamlit AppsPostHog/posthog | 40k | — | ~1.5k | Automated safety check: Pass | Custom licence | |
| Stripe Projectsfossasia/eventyay | 1.7k | 5 repos | ~2k | Automated safety check: Notes | Apache-2.0 | |
| FoundatioFoundatioFx/Foundatio | 2.1k | — | ~3.9k | Automated safety check: Pass | Apache-2.0 | |
| Wp Block Themesgambitph/Stackable | 350 | 3 repos | ~985 | Automated safety check: Pass | GPL-3.0 | |
| Wp Performancegambitph/Stackable | 350 | 3 repos | ~1.5k | Automated safety check: Pass | GPL-3.0 |
PostHog/posthog
Write Streamlit app source code that runs well in a PostHog sandbox — the posthogapps.query() bridge for reading PostHog data, the packages baked into the sandbox image, caching and session state…
fossasia/eventyay
A skill your agent uses when the user wants to provision infrastructure or third-party services using Stripe Projects.
FoundatioFx/Foundatio
A skill your agent uses when working with Foundatio infrastructure abstractions for .NET -- caching, queuing, messaging, file storage, distributed locking, or background jobs.
gambitph/Stackable
A skill your agent uses when developing WordPress block themes: theme.json (global settings/styles), templates and template parts, patterns, style variations, and Site Editor troubleshooting (style…
gambitph/Stackable
A skill your agent uses when investigating or improving WordPress performance (backend-only agent): profiling and measurement (WP-CLI profile/doctor, Server-Timing, Query Monitor via REST headers)…
millionco/expect
Portable Effect patterns for robust promise execution. An agent skill from millionco/expect.
iusztinpaul/designing-real-world-ai-agents-workshop
Builds bidirectional Streamlit Custom Components v2 (CCv2) using st.components.v2.component.
iusztinpaul/designing-real-world-ai-agents-workshop
Building chat interfaces in Streamlit. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.
iusztinpaul/designing-real-world-ai-agents-workshop
Building dashboards in Streamlit. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.
iusztinpaul/designing-real-world-ai-agents-workshop
Building multi-page Streamlit apps. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.
iusztinpaul/designing-real-world-ai-agents-workshop
Choosing the right Streamlit selection widget. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.
iusztinpaul/designing-real-world-ai-agents-workshop
Connecting Streamlit apps to Snowflake. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.
Works with
Categories
Optimizing Streamlit app performance. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop. Optimizing Streamlit Performance is an agent skill from iusztinpaul/designing-real-world-ai-agents-workshop. Optimizing Streamlit app performance.
Optimizing Streamlit Performance fits situations like: rerunning too often; loading heavy content.
Run `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill optimizing-streamlit-performance -a claude-code`. Or copy the skill folder (.agents/skills/developing-with-streamlit/skills/optimizing-streamlit-performance in iusztinpaul/designing-real-world-ai-agents-workshop) into .claude/skills/optimizing-streamlit-performance in your project. Claude Code loads it when a task matches its description.
Run `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill optimizing-streamlit-performance -a codex`. Or copy the skill folder (.agents/skills/developing-with-streamlit/skills/optimizing-streamlit-performance in iusztinpaul/designing-real-world-ai-agents-workshop) into .agents/skills/optimizing-streamlit-performance in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill optimizing-streamlit-performance -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/optimizing-streamlit-performance, .gemini/skills/optimizing-streamlit-performance, .github/skills/optimizing-streamlit-performance and .opencode/skills/optimizing-streamlit-performance in your project.
SKILL.md names no scripts, command-line tools or credentials: Optimizing Streamlit Performance is instructions for the agent only. Our summary lists: Python 3.
SKILL.md names 1 domain. As links in the text: docs.streamlit.io. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Optimizing Streamlit Performance is published under the Apache-2.0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.2k tokens (SKILL.md is roughly 8.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Optimizing Streamlit Performance: Writing Streamlit Apps (PostHog/posthog, 40k stars), Stripe Projects (fossasia/eventyay, 1.7k stars), Foundatio (FoundatioFx/Foundatio, 2.1k stars) and Wp Block Themes (gambitph/Stackable, 350 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
iusztinpaul (a GitHub user) maintains it in iusztinpaul/designing-real-world-ai-agents-workshop, which has 513 GitHub stars. The repository holds 23 skills in this directory. The repository was last updated on June 3, 2026.
Source: iusztinpaul/designing-real-world-ai-agents-workshop on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.