streamlit-dev

Streamlit Development Skill

When to Use

Invoke this skill when:

• Creating a new Streamlit page
• Building or modifying UI components
• Adding charts or KPIs
• Implementing caching for data or resources
• Applying consistent branding/theming
• Fixing UI/UX issues in Streamlit apps

---

Page Template (MANDATORY)

Every Streamlit page MUST follow this structure:

"""Page Title - Brief description."""
import streamlit as st

# Page config MUST be the first Streamlit call
st.set_page_config(page_title="PageName", page_icon="icon", layout="wide")

# If using a shared header/navigation component:
# from components.header import render_header
# render_header(current_page="PageName")

# --- Page content below ---

Key Rules

• st.set_page_config() MUST be the first Streamlit command
• Choose navigation pattern: sidebar (default) or custom header
• Always set layout="wide" for dashboards

---

Branding & Theming

Color Palette (Configure Per Project)

BRAND_PRIMARY = "<BRAND_PRIMARY>"     # Primary accent color
BRAND_DARK = "<BRAND_DARK>"           # Headings, dark text
BRAND_LIGHT = "<BRAND_LIGHT>"         # Page/card backgrounds
GRAY_500 = "#6C757D"                  # Secondary text
GRAY_100 = "#E9ECEF"                  # Borders, dividers
SUCCESS = "#22C55E"                   # Positive indicators
WARNING = "#F59E0B"                   # Warning indicators
ERROR = "#EF4444"                     # Error/negative indicators

60-30-10 Color Rule

• 60%: Light backgrounds (white, <BRAND_LIGHT>)
• 30%: Dark text and structure (<BRAND_DARK>)
• 10%: Primary accents (<BRAND_PRIMARY>)

---

Charts (Plotly)

CRITICAL: Avoid "undefined" Labels

# NEVER pass title directly to px functions
fig = px.pie(data, names="cat", values="count")
fig.update_layout(title="Chart Title", height=300)

Branded Charts

import plotly.express as px

CHART_COLORS = ["<BRAND_PRIMARY>", "<BRAND_DARK>", "#6B7280", "#9CA3AF", "#D1D5DB"]

def create_chart(df, x, y, chart_type="bar", title=None):
    if chart_type == "bar":
        fig = px.bar(df, x=x, y=y, color_discrete_sequence=CHART_COLORS)
    elif chart_type == "line":
        fig = px.line(df, x=x, y=y, color_discrete_sequence=CHART_COLORS)
    elif chart_type == "pie":
        fig = px.pie(df, names=x, values=y, color_discrete_sequence=CHART_COLORS)

    fig.update_layout(
        title=title if title and title.strip() else "",
        template="plotly_white",
        font_family="Inter, sans-serif",
        title_font_size=18,
        legend_title_text="",
        hovermode="x unified",
    )
    return fig

st.plotly_chart(fig, use_container_width=True)