Agent skill
streamlit-3-layout-and-organization
Sub-skill of streamlit: 3. Layout and Organization.
Install this agent skill to your Project
npx add-skill https://github.com/vamseeachanta/workspace-hub/tree/main/.claude/skills/_archive/data/analysis/streamlit/3-layout-and-organization
SKILL.md
3. Layout and Organization
3. Layout and Organization
Columns:
import streamlit as st
# Equal columns
col1, col2, col3 = st.columns(3)
with col1:
st.header("Column 1")
st.write("Content for column 1")
with col2:
st.header("Column 2")
st.metric("Metric", "100")
with col3:
st.header("Column 3")
st.button("Action")
# Unequal columns
left, right = st.columns([2, 1]) # 2:1 ratio
with left:
st.write("Wider column")
with right:
st.write("Narrower column")
Sidebar:
import streamlit as st
# Sidebar content
st.sidebar.title("Navigation")
st.sidebar.header("Filters")
# Sidebar widgets
category = st.sidebar.selectbox("Category", ["All", "A", "B", "C"])
min_value = st.sidebar.slider("Minimum Value", 0, 100, 25)
show_raw = st.sidebar.checkbox("Show raw data")
# Using 'with' syntax
with st.sidebar:
st.header("Settings")
theme = st.radio("Theme", ["Light", "Dark"])
st.divider()
st.caption("App v1.0.0")
Tabs:
import streamlit as st
tab1, tab2, tab3 = st.tabs(["📈 Chart", "📊 Data", "⚙️ Settings"])
with tab1:
st.header("Chart View")
# Add chart here
with tab2:
st.header("Data View")
# Add dataframe here
with tab3:
st.header("Settings")
# Add settings here
Expanders and Containers:
import streamlit as st
# Expander (collapsible section)
with st.expander("Click to expand"):
st.write("Hidden content revealed!")
st.code("print('Hello')")
# Container (grouping elements)
with st.container():
st.write("This is inside a container")
col1, col2 = st.columns(2)
col1.write("Left")
col2.write("Right")
# Container with border
with st.container(border=True):
st.write("Content with border")
# Empty placeholder (for dynamic updates)
placeholder = st.empty()
placeholder.text("Initial text")
# Later: placeholder.text("Updated text")
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
gsd-complete-milestone
Archive completed milestone and prepare for next version
gsd-reapply-patches
Reapply local modifications after a GSD update
gsd-verify-work
Validate built features through conversational UAT
gsd-thread
Manage persistent context threads for cross-session work
clinical-trial-protocol
Generate clinical trial protocols for medical devices or drugs through a modular, waypoint-based architecture with research-only and full protocol modes.
single-cell-rna-qc
Performs quality control on single-cell RNA-seq data (.h5ad or .h5 files) using scverse best practices with MAD-based filtering and comprehensive visualizations.
Didn't find tool you were looking for?