developing-with-streamlit by streamlit/agent-skills
npx skills add https://github.com/streamlit/agent-skills --skill developing-with-streamlit这是一个路由技能,可将您引导至用于 Streamlit 开发的专门子技能。
当用户的请求涉及以下内容时,请调用此技能:
触发短语: "streamlit", "st.", "dashboard", "app.py", "beautify app", "make it look better", "style", "CSS", "color", "background", "theme", "button", "slow rerun", "session state", "performance", "faster", "cache", "deploy"
Step 1: Locate the Streamlit source code
↓
Step 2: Identify task type and load appropriate sub-skill(s)
↓
Step 3: Apply guidance from sub-skill to edit code
↓
Step 4: Check if app is running and offer to run it
目标: 确定要编辑的应用文件。如果上下文已明确,请跳过此步骤。
何时跳过:
src/app.py")广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
app.py、streamlit_app.py)何时需要搜索:
如果需要搜索:
快速扫描 Streamlit 文件:
find . -name "*.py" -type f | xargs grep -l "import streamlit\|from streamlit" 2>/dev/null | head -10
应用入口点启发式方法(按优先级顺序):
streamlit_app.py → 这是入口点(规范名称)app.py → 很可能是入口点st.navigation 的文件 → 多页面应用的入口点.py 文件 → 入口点pages/ 或 app_pages/ 子目录中的文件 → 不是入口点(这些是子页面)如果入口点很明显 → 使用它,无需确认
示例:找到 streamlit_app.py 和 pages/metrics.py → 使用 streamlit_app.py
仅在真正模糊不清时才询问(例如,多个根级候选文件,且没有名为 streamlit_app.py 的):
Found multiple potential entry points:
- dashboard.py
- main.py
Which is your main app?
输出: 主 Streamlit 源文件的路径
目标: 确定用户需求并加载相应的指导。
使用此路由表选择子技能。在进行更改前,务必阅读子技能文件:
| 用户需求 | 需阅读的子技能 |
|---|---|
| 性能问题、应用运行缓慢、缓存 | read skills/optimizing-streamlit-performance/SKILL.md |
| 使用 KPI/指标构建仪表板 | read skills/building-streamlit-dashboards/SKILL.md |
| 改进视觉设计、图标、美化 | read skills/improving-streamlit-design/SKILL.md |
| 选择小部件(selectbox vs radio vs pills) | read skills/choosing-streamlit-selection-widgets/SKILL.md |
| 样式化小部件(按钮颜色、背景、CSS) | read skills/creating-streamlit-themes/SKILL.md |
| 布局(列、选项卡、侧边栏、容器) | read skills/using-streamlit-layouts/SKILL.md |
| 显示数据(数据框、图表) | read skills/displaying-streamlit-data/SKILL.md |
| 多页面应用架构 | read skills/building-streamlit-multipage-apps/SKILL.md |
| 会话状态和回调函数 | read skills/using-streamlit-session-state/SKILL.md |
| Markdown、彩色文本、徽章 | read skills/using-streamlit-markdown/SKILL.md |
| 自定义主题和颜色 | read skills/creating-streamlit-themes/SKILL.md |
| 全面的主题设计和品牌一致性 | read skills/creating-streamlit-themes/SKILL.md |
| 聊天界面和 AI 助手 | read skills/building-streamlit-chat-ui/SKILL.md |
| 连接到 Snowflake | read skills/connecting-streamlit-to-snowflake/SKILL.md |
| 构建或打包自定义组件、从 JS/HTML 触发事件回传到 Python、具有事件处理的自定义 HTML/JS(CCv2),或任何不作为原生 Streamlit 小部件存在的 UI 元素(例如,拖放、自定义交互式可视化、画布绘图) | read skills/building-streamlit-custom-components-v2/SKILL.md — 重要提示:st.components.v1 已弃用。切勿在新组件中使用 v1;始终使用 st.components.v2.component()。 |
| 第三方组件 | read skills/using-streamlit-custom-components/SKILL.md |
| 代码组织 | read skills/organizing-streamlit-code/SKILL.md |
| 环境设置 | read skills/setting-up-streamlit-environment/SKILL.md |
| CLI 命令 | read skills/using-streamlit-cli/SKILL.md |
后备方案 — "此小部件在 Streamlit 中不存在":
如果用户请求的 UI 元素或交互从未成为 Streamlit API 的一部分,并且无法通过任何原生小部件的组合来构建(例如,拖放、画布绘图、自定义交互式可视化),请路由到 CCv2 子技能(skills/building-streamlit-custom-components-v2/SKILL.md)。不要为存在于较新 Streamlit 版本中的功能(例如,st.connection、st.segmented_control)路由到 CCv2 —— 建议升级。
常见组合:
对于美化/改进应用,按顺序阅读:
skills/improving-streamlit-design/SKILL.mdskills/using-streamlit-layouts/SKILL.mdskills/choosing-streamlit-selection-widgets/SKILL.md对于构建仪表板,阅读:
skills/building-streamlit-dashboards/SKILL.mdskills/displaying-streamlit-data/SKILL.md重要提示 - 使用模板:
当创建新的仪表板应用时,优先从 templates/apps/ 中的模板开始:
dashboard-metrics / dashboard-metrics-snowflake — 带时间序列图表的 KPI 卡片dashboard-companies — 公司/实体比较dashboard-compute / dashboard-compute-snowflake — 资源/积分监控dashboard-feature-usage — 功能采用跟踪dashboard-seattle-weather — 公共数据集探索(仅限本地)dashboard-stock-peers / dashboard-stock-peers-snowflake — 金融同行分析@st.cache_data 缓存、filter_by_time_range()、st.set_page_config()、图表工具、布局结构)templates/apps/README.md当编辑现有应用时,使用模板作为最佳实践的参考:
templates/apps/ 中的缓存模式、布局结构和 Snowflake 集成当应用自定义主题时,使用 templates/themes/ 中的模板:
templates/themes/README.md对于性能优化,阅读:
skills/optimizing-streamlit-performance/SKILL.md目标: 遵循子技能的最佳实践对 Streamlit 应用进行更改。
操作:
目标: 通过检查用户的应用是否正在运行,帮助用户查看其更改。
操作:
检查 850* 端口上是否有正在运行的 Streamlit 应用:
lsof -nP -iTCP -sTCP:LISTEN 2>/dev/null | grep -i python | awk '{print $2, $9}' | grep ':85' || echo "No Streamlit apps detected on ports 850*"
向用户展示 发现结果:
如果应用正在运行:
Found Streamlit app running:
- PID: [pid] at http://localhost:[port]
Your changes should be visible after a page refresh (Streamlit hot-reloads on file save).
如果没有应用运行:
No Streamlit app detected on ports 850*.
Would you like me to run the app? I can start it with:
streamlit run [app_file.py]
3. 如果用户想要运行应用,则启动它:
streamlit run [path/to/app.py] --server.port 8501
| 技能 | 涵盖内容 |
|---|---|
| building-streamlit-chat-ui | 聊天界面、流式响应、消息历史记录 |
| building-streamlit-dashboards | KPI 卡片、指标、仪表板布局 |
| building-streamlit-multipage-apps | 页面结构、导航、共享状态 |
| building-streamlit-custom-components-v2 | Streamlit 自定义组件 v2(内联和基于模板的打包)、双向状态/触发回调、捆绑、主题 CSS 变量 |
| choosing-streamlit-selection-widgets | Selectbox vs radio vs segmented control vs pills vs multiselect |
| connecting-streamlit-to-snowflake | st.connection、查询缓存、凭据 |
| creating-streamlit-themes | 主题配置、颜色、字体、亮/暗模式、专业品牌一致性、避免 CSS |
| displaying-streamlit-data | 数据框、列配置、图表 |
| improving-streamlit-design | 图标、徽章、彩色文本、视觉美化 |
| optimizing-streamlit-performance | 缓存、片段、表单、静态 vs 动态小部件 |
| organizing-streamlit-code | 何时拆分为模块、分离 UI 与逻辑 |
| setting-up-streamlit-environment | Python 环境、依赖管理 |
| using-streamlit-custom-components | 来自社区的第三方组件 |
| using-streamlit-cli | CLI 命令、运行应用 |
| using-streamlit-layouts | 侧边栏、列、容器、选项卡、扩展器、对话框、对齐、间距 |
| using-streamlit-markdown | 彩色文本、徽章、图标、LaTeX 以及所有 markdown 功能 |
| using-streamlit-session-state | 会话状态、小部件键、回调函数、状态持久化 |
每周安装次数
551
代码仓库
GitHub 星标数
132
首次出现
Jan 26, 2026
安全审计
安装在
opencode466
gemini-cli448
codex434
github-copilot426
kimi-cli397
amp393
This is a routing skill that directs you to specialized sub-skills for Streamlit development.
Invoke this skill when the user's request involves:
Trigger phrases: "streamlit", "st.", "dashboard", "app.py", "beautify app", "make it look better", "style", "CSS", "color", "background", "theme", "button", "slow rerun", "session state", "performance", "faster", "cache", "deploy"
Step 1: Locate the Streamlit source code
↓
Step 2: Identify task type and load appropriate sub-skill(s)
↓
Step 3: Apply guidance from sub-skill to edit code
↓
Step 4: Check if app is running and offer to run it
Goal: Identify the app file(s) to edit. Skip this step if already clear from context.
When to skip:
src/app.py")app.py, streamlit_app.py)When to search:
If searching is needed:
Quick scan for Streamlit files:
find . -name "*.py" -type f | xargs grep -l "import streamlit\|from streamlit" 2>/dev/null | head -10
Apply entry point heuristics (in priority order):
streamlit_app.py at root → this is the entry point (canonical name)app.py at root → likely entry pointst.navigation → entry point for multi-page apps.py file at root with streamlit import → entry pointpages/ or app_pages/ subdirectory → NOT entry points (these are sub-pages)Example: Found streamlit_app.py and pages/metrics.py → use streamlit_app.py
Only ask if genuinely ambiguous (e.g., multiple root-level candidates, none named streamlit_app.py):
Found multiple potential entry points:
- dashboard.py
- main.py
Which is your main app?
Output: Path to the main Streamlit source file(s)
Goal: Determine what the user needs and load the appropriate guidance.
Use this routing table to select sub-skill(s). Always read the sub-skill file before making changes:
| User Need | Sub-skill to Read |
|---|---|
| Performance issues, slow apps, caching | read skills/optimizing-streamlit-performance/SKILL.md |
| Building a dashboard with KPIs/metrics | read skills/building-streamlit-dashboards/SKILL.md |
| Improving visual design, icons, polish | read skills/improving-streamlit-design/SKILL.md |
| Choosing widgets (selectbox vs radio vs pills) | read skills/choosing-streamlit-selection-widgets/SKILL.md |
| Styling widgets (button colors, backgrounds, CSS) |
Fallback — "this widget doesn't exist in Streamlit":
If the user asks for a UI element or interaction that has never been part of Streamlit's API and cannot be built with any combination of native widgets (e.g., drag-and-drop, canvas drawing, custom interactive visualizations), route to the CCv2 sub-skill (skills/building-streamlit-custom-components-v2/SKILL.md). Do not route to CCv2 for features that exist in newer Streamlit versions (e.g., st.connection, st.segmented_control) — suggest upgrading instead.
Common combinations:
For beautifying/improving an app , read in order:
skills/improving-streamlit-design/SKILL.mdskills/using-streamlit-layouts/SKILL.mdskills/choosing-streamlit-selection-widgets/SKILL.mdFor building a dashboard , read:
skills/building-streamlit-dashboards/SKILL.mdskills/displaying-streamlit-data/SKILL.mdIMPORTANT - Use templates:
When creating a new dashboard app , prefer starting from a template in templates/apps/:
dashboard-metrics / dashboard-metrics-snowflake — KPI cards with time-series chartsdashboard-companies — company/entity comparisondashboard-compute / dashboard-compute-snowflake — resource/credit monitoringdashboard-feature-usage — feature adoption trackingdashboard-seattle-weather — public dataset exploration (local only)dashboard-stock-peers / dashboard-stock-peers-snowflake — financial peer analysisWhen editing an existing app , use templates as reference for best practices:
templates/apps/ for caching patterns, layout structure, and Snowflake integrationWhen applying a custom theme , use a template from templates/themes/:
templates/themes/README.md for theme previewsFor performance optimization , read:
skills/optimizing-streamlit-performance/SKILL.mdGoal: Make changes to the Streamlit app following sub-skill best practices.
Actions:
Goal: Help the user see their changes by checking if their app is running.
Actions:
Check for running Streamlit apps on ports 850*:
lsof -nP -iTCP -sTCP:LISTEN 2>/dev/null | grep -i python | awk '{print $2, $9}' | grep ':85' || echo "No Streamlit apps detected on ports 850*"
Present findings to user:
If app is running:
Found Streamlit app running:
- PID: [pid] at http://localhost:[port]
Your changes should be visible after a page refresh (Streamlit hot-reloads on file save).
If no app is running:
No Streamlit app detected on ports 850*.
Would you like me to run the app? I can start it with:
streamlit run [app_file.py]
3. If user wants to run the app , start it:
streamlit run [path/to/app.py] --server.port 8501
| Skill | Covers |
|---|---|
| building-streamlit-chat-ui | Chat interfaces, streaming responses, message history |
| building-streamlit-dashboards | KPI cards, metrics, dashboard layouts |
| building-streamlit-multipage-apps | Page structure, navigation, shared state |
| building-streamlit-custom-components-v2 | Streamlit Custom Components v2 (inline and template-based packaged), bidirectional state/trigger callbacks, bundling, theme CSS variables |
| choosing-streamlit-selection-widgets | Selectbox vs radio vs segmented control vs pills vs multiselect |
| connecting-streamlit-to-snowflake |
Weekly Installs
551
Repository
GitHub Stars
132
First Seen
Jan 26, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
opencode466
gemini-cli448
codex434
github-copilot426
kimi-cli397
amp393
agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试
140,500 周安装
If entry point is obvious → use it, no confirmation needed
read skills/creating-streamlit-themes/SKILL.md| Layouts (columns, tabs, sidebar, containers) | read skills/using-streamlit-layouts/SKILL.md |
| Displaying data (dataframes, charts) | read skills/displaying-streamlit-data/SKILL.md |
| Multi-page app architecture | read skills/building-streamlit-multipage-apps/SKILL.md |
| Session state and callbacks | read skills/using-streamlit-session-state/SKILL.md |
| Markdown, colored text, badges | read skills/using-streamlit-markdown/SKILL.md |
| Custom themes and colors | read skills/creating-streamlit-themes/SKILL.md |
| Comprehensive theme design and brand alignment | read skills/creating-streamlit-themes/SKILL.md |
| Chat interfaces and AI assistants | read skills/building-streamlit-chat-ui/SKILL.md |
| Connecting to Snowflake | read skills/connecting-streamlit-to-snowflake/SKILL.md |
| Building or packaging a custom component, triggering events back to Python from JS/HTML, custom HTML/JS with event handling (CCv2), OR any UI element that doesn't exist as a native Streamlit widget (e.g., drag-and-drop, custom interactive visualization, canvas drawing) | read skills/building-streamlit-custom-components-v2/SKILL.md — IMPORTANT:st.components.v1 is deprecated. Never use v1 for new components; always use st.components.v2.component(). |
| Third-party components | read skills/using-streamlit-custom-components/SKILL.md |
| Code organization | read skills/organizing-streamlit-code/SKILL.md |
| Environment setup | read skills/setting-up-streamlit-environment/SKILL.md |
| CLI commands | read skills/using-streamlit-cli/SKILL.md |
@st.cache_data, filter_by_time_range(), st.set_page_config(), chart utilities, layout structure)templates/apps/README.md for template descriptions| st.connection, query caching, credentials |
| creating-streamlit-themes | Theme configuration, colors, fonts, light/dark modes, professional brand alignment, CSS avoidance |
| displaying-streamlit-data | Dataframes, column config, charts |
| improving-streamlit-design | Icons, badges, colored text, visual polish |
| optimizing-streamlit-performance | Caching, fragments, forms, static vs dynamic widgets |
| organizing-streamlit-code | When to split into modules, separating UI from logic |
| setting-up-streamlit-environment | Python environment, dependency management |
| using-streamlit-custom-components | Third-party components from the community |
| using-streamlit-cli | CLI commands, running apps |
| using-streamlit-layouts | Sidebar, columns, containers, tabs, expanders, dialogs, alignment, spacing |
| using-streamlit-markdown | Colored text, badges, icons, LaTeX, and all markdown features |
| using-streamlit-session-state | Session state, widget keys, callbacks, state persistence |