メニュー
Expert guidance for building high-performance, professional, and minimalist Streamlit dashboards. Focuses on caching strategies, SQL optimization, and clean data-first UX.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/DOX69/agent-performance-hub --skill expert-streamlit-dashboardコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | expert-streamlit-dashboard |
| description | Expert guidance for building high-performance, professional, and minimalist Streamlit dashboards. Focuses on caching strategies, SQL optimization, and clean data-first UX. |
| version | 1.0.0 |
| tags | ["streamlit","dashboard","data-visualization","sql-optimization","python","ux-design"] |
This skill provides professional mental models and design patterns for building production-grade Streamlit dashboards. It emphasizes a "Data-First, Minimalist" aesthetic (avoiding "vibes" coding or excessive emojis) and rigorous performance optimization for SQL-backed applications.
| Feature | "Vibe Coding" (Amateur) | Expert Engineering |
|---|---|---|
| Flashy, emoji-heavy, colorful |
| Minimalist, whitespace-driven, professional |
| Data Loading | pd.read_csv on every run | Aggressive Caching (@st.cache_data) |
| SQL Strategy | SELECT * into Pandas | Push-down predicates (filter in SQL) |
| State | Lost on refresh/interaction | Persisted via st.session_state & URL params |
| Filters | Cluttered main area | Collapsible Sidebar with intelligent defaults |
Professional dashboards respect the user's attention.
Pattern:
st.set_page_config and config.toml to enforce brand colors, not random selections.st.container and st.columns to create breathing room.Streamlit re-runs the entire script on every interaction. Without caching, your app is unusable.
Pattern:
@st.cache_data): For serializable data (Pandas DataFrames, JSON).
ttl (Time To Live) to avoid stale data (e.g., ttl=300 for 5 mins).max_entries to prevent memory leaks.@st.cache_resource): For database connections, ML models.@st.cache_resource
def get_db_connection():
return mysql.connector.connect(...)
@st.cache_data(ttl=300, show_spinner=False)
def get_sales_data(start_date, end_date):
# ... executes optimized SQL ...
return df
Never load a massive table into Pandas to filter it.
Pattern:
start_date, region) directly into the WHERE clause.GROUP BY in SQL, not Pandas.LIMIT 10000) or pagination.Bad: SELECT * FROM sales -> df[df['date'] > start]
Good: SELECT * FROM sales WHERE date > :start
Filters should be powerful but unobtrusive.
Pattern:
st.sidebar.st.form so the app only re-runs when the user clicks "Apply".with st.sidebar.form(key='filters'):
date_range = st.date_input("Date Range", [])
submit_button = st.form_submit_button(label='Update Dashboard')
if submit_button:
# Run query
Don't let users lose their place.
Pattern:
st.query_params so links can be shared.st.session_state to store intermediate calculations or user preferences that shouldn't trigger a full data reload.Before deploying your dashboard:
st.error or st.warning used instead of raw Python tracebacks?❌ "The Wall of Text": Dumping a raw dataframe (st.dataframe(df)) without specific intent.
❌ "Blocking Queries": Running long SQL queries in the main thread without a spinner or cache.
❌ "Widget Explosion": Putting 20 filters on the screen at once. Use "Advanced Filters" expanders.
❌ "Hardcoded Secrets": Never put DB credentials in code. Use .streamlit/secrets.toml.