Things top of mind

[sfc-gh-amiribel]

• rollback to st.cache and avoid relying on conn's ttl parameter
• include unsupported sis featured

[lukasmasuch]

Potential skills to add:

• building-custom-components
• testing-streamlit-apps
• adding-authentication
• securing-streamlit-apps
• checking-streamlit-changelog
• migration skills: migrate x to streamlit (notebook, dash, gradio....)

Additions to existing skills:

• optimizing-streamlit-performance -> add a bit more insight about multithreading from here
• customizing-streamlit-theme -> Update based on the theme gallery app insights + 2-3 full advanced theme examples.

Other topics not covered:

• widget behaviour
• scaling an app
• query parameters
• error handling
• opinionated best practices -> maybe put this in a condensed version into the parent skill?
  • No use_container_width
  • No wrapping into functions on pages
  • Don't apply CSS to style the app; use native features and theming instead.
  • Prefer using material icons over emojis
  • st.navigation with app_pages folder over MPA v1 / page_link
  • Always use caching for compute-intensive code with an appropriate ttl and/or max_entries to prevent unbound growth.
  • Prefer using st.container(horizontal=True) over st.columns for better responsiveness
  • Prefer vega-based charts (altair_chart, line_chart, area_chart, scatter_chart, bar_chart, vega_lite_chart) over pyplot and plotly.
  • Use emojis sparingly, only to add a very special touch
  • Don't use st.radio(..., horizontal=True) and prefer st.segmented_control
  • Use st.pills for a multiselect with few options that fit in 1 line
  • Prefer sentence casing over title casing, even in titles or widget labels
• configuration

[sfc-gh-amiribel]

• make it 100% sure that the logic is not impacted, only the UI is? open to debate sometimes
• when segmented_control is in a horizontal container, very likely that we need a vertical_alignment="center"

[arnaudmiribel]

• add full themes in the theming skill
• tell use_container_width=True is deprecated
• get rid of the example using it https://github.com/streamlit/agent-skills/blob/main/developing-with-streamlit/skills/displaying-streamlit-data/SKILL.md?plain=1#L51
• st.status for long tasks with different steps
• if text to display has special chars and it's code, use st.code, if its not code use st.text
• when aligning text elements, always use width="content"
• advise using help to disambiguate

[sfc-gh-amiribel]

Streamlit UI Lessons Learned from a project

────────────────────────────────────────

1. Column Naming & Width

• Use descriptive names: "Days" → "Days active"
• Use width="medium" for columns that truncate (Region, Segment)

  "ACTIVE_DAYS": st.column_config.NumberColumn("Days active", format="%d"),
  "REGION": st.column_config.TextColumn("Region", width="medium"),

────────────────────────────────────────

2. Colorful Chips with MultiselectColumn

Use st.column_config.MultiselectColumn with color="auto" for colorful tags. Values must be lists (["Trial"] not "Trial").

  "AGREEMENT_TYPE": st.column_config.MultiselectColumn(
      "Type", options=[...], color="auto", width="small"
  )

────────────────────────────────────────

3. Sparklines: Zero-Fill Missing Dates

Always reindex time series to fill gaps with 0, otherwise sparklines look misleading.

  all_dates = pd.date_range(start=min_date, end=max_date, freq="D")
  full_series = df.set_index("DATE").reindex(all_dates, fill_value=0)

────────────────────────────────────────

4. Use st.line_chart for Time Series

Prefer st.line_chart over raw Altair for cleaner visualizations.

  st.line_chart(df, x="DATE", y="TOTAL_CREDITS", height=250)

────────────────────────────────────────

5. Help Text for Complex Columns

Use help parameter for tooltips on calculated metrics.

  "GROWTH_SCORE": st.column_config.NumberColumn(
      "Growth score", format="%.1f",
      help="Credit delta between second and first half of period."
  )

────────────────────────────────────────

6. Horizontal Containers with Badges

Use st.container(horizontal=True) with badges instead of bulky st.metric columns.

  # Badges row
  badges = [f":blue-badge[{type}]", f":green-badge[{credits:,.1f} credits]"]
  st.markdown(" ".join(badges))

  # People row
  with st.container(horizontal=True, vertical_alignment="center"):
      st.markdown(f":material/person: **AE:** {ae}", width="content")
      st.markdown(f":material/engineering: **SE:** {se}", width="content")
      st.link_button(":material/open_in_new: Salesforce", url)

Key points:

• vertical_alignment="center" on container
• width="content" on markdown (prevents stretching)
• Don't use deprecated use_container_width=True

────────────────────────────────────────

7. st.link_button for External Links

Use st.link_button instead of markdown links for prominent external links.

  st.link_button(":material/open_in_new: Salesforce", url)

[arnaudmiribel]

• Deployment to SPCS
• Problematic container horizontal with chart_data st.metric with chart_data wraps unexpectedly in horizontal containers streamlit#13785 to update
• Overwriting port already in use
• No markdown support in dataframe cells
• Handling agents endpoints https://www.snowflake.com/en/developers/guides/getting-started-with-cortex-agents-api-and-streamlit-on-container-runtime/

[sfc-gh-amiribel]

• verify that functions we add an @st.cache_ decorator to are not ALREADY cached (or their underlying called functions) - had the exampe with get_data_frame_from_raw_sql ; nested caching can go wrong
• for performance: start by profiling the app, looking for expensive pandas ops, or heavy sql
• uploading files can be faster than re-deloying