UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
Agent skill
Improving Streamlit Design
by iusztinpaul in iusztinpaul/designing-real-world-ai-agents-workshop
Improving visual design in Streamlit apps. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.
Install Improving Streamlit Design
$ npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill improving-streamlit-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install iusztinpaul/designing-real-world-ai-agents-workshop improving-streamlit-design --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/developing-with-streamlit/skills/improving-streamlit-design .claude/skills/improving-streamlit-design && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "improving-streamlit-design" agent skill from https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop/tree/main/.agents/skills/developing-with-streamlit/skills/improving-streamlit-design into .claude/skills/improving-streamlit-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "improving-streamlit-design", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop/tree/main/.agents/skills/developing-with-streamlit/skills/improving-streamlit-designType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill improving-streamlit-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install iusztinpaul/designing-real-world-ai-agents-workshop improving-streamlit-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/developing-with-streamlit/skills/improving-streamlit-design .agents/skills/improving-streamlit-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "improving-streamlit-design" agent skill from https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop/tree/main/.agents/skills/developing-with-streamlit/skills/improving-streamlit-design into .agents/skills/improving-streamlit-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "improving-streamlit-design", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill improving-streamlit-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install iusztinpaul/designing-real-world-ai-agents-workshop improving-streamlit-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/developing-with-streamlit/skills/improving-streamlit-design .cursor/skills/improving-streamlit-design && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "improving-streamlit-design" agent skill from https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop/tree/main/.agents/skills/developing-with-streamlit/skills/improving-streamlit-design into .cursor/skills/improving-streamlit-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "improving-streamlit-design", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop.git --path .agents/skills/developing-with-streamlit/skills/improving-streamlit-design--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill improving-streamlit-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install iusztinpaul/designing-real-world-ai-agents-workshop improving-streamlit-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/developing-with-streamlit/skills/improving-streamlit-design .gemini/skills/improving-streamlit-design && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "improving-streamlit-design" agent skill from https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop/tree/main/.agents/skills/developing-with-streamlit/skills/improving-streamlit-design into .gemini/skills/improving-streamlit-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "improving-streamlit-design", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install iusztinpaul/designing-real-world-ai-agents-workshop improving-streamlit-designInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill improving-streamlit-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/developing-with-streamlit/skills/improving-streamlit-design .github/skills/improving-streamlit-design && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "improving-streamlit-design" agent skill from https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop/tree/main/.agents/skills/developing-with-streamlit/skills/improving-streamlit-design into .github/skills/improving-streamlit-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "improving-streamlit-design", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill improving-streamlit-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install iusztinpaul/designing-real-world-ai-agents-workshop improving-streamlit-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/developing-with-streamlit/skills/improving-streamlit-design .opencode/skills/improving-streamlit-design && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "improving-streamlit-design" agent skill from https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop/tree/main/.agents/skills/developing-with-streamlit/skills/improving-streamlit-design into .opencode/skills/improving-streamlit-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "improving-streamlit-design", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
improving-streamlit-design- GitHub stars
- 512
- Token cost
- ~1.4k tokens
- SKILL.md length
- 329 words
- Files
- 1
- Skills in repo
- 23
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Improving visual design in Streamlit apps. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.
- Polishing apps with icons
- SKILL.md covers Page config, App logo, Icons over emojis and Badges for status, plus 6 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
- Tasks that involve UI design
What it does
Improving Streamlit Design is an agent skill from iusztinpaul/designing-real-world-ai-agents-workshop. Improving visual design in Streamlit apps. Use when polishing apps with icons, badges, spacing, or text styling. Covers Material icons, badge syntax, divider alternatives, and text casing conventions.
Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering UI design. It works with Streamlit. The repository describes itself as: Hands-on workshop: Build a multi-agent AI system from scratch — Deep Research Agent + Writing Workflow served as MCP servers. Includes code, slides, and video. The licence is Apache-2.0.
When your agent uses it
- Polishing apps with icons
- Tasks that involve UI design
Example prompts
- “/improving-streamlit-design”
Requirements
- Python 3
What it can do on your machine
Read from SKILL.md and the folder at commit ea4f6e9. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are python).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
docs.streamlit.iofonts.google.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Improving Streamlit Design loads about 1.4k tokens when it runs. Until then it costs about 57 tokens; SKILL.md has 329 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from iusztinpaul/designing-real-world-ai-agents-workshop at commit ea4f6e9, republished under its Apache-2.0 licence (© iusztinpaul). 329 words, ~1,412 tokens.
Download SKILL.mdSave it as
.claude/skills/improving-streamlit-design/SKILL.md (or your agent's skills folder).- name
- improving-streamlit-design
- description
- Improving visual design in Streamlit apps. Use when polishing apps with icons, badges, spacing, or text styling. Covers Material icons, badge syntax, divider alternatives, and text casing conventions.
- license
- Apache-2.0
Streamlit visual design
Small touches that make apps feel polished.
Related skills: Visual design works hand-in-hand with other skills:
choosing-streamlit-selection-widgets→ Choosing the right widget (segmented control, pills, toggle)displaying-streamlit-data→ Column config, sparklines, bordered metricsusing-streamlit-layouts→ Containers, alignment, dashboard cards
Page config
Set browser tab title, icon, and layout. Place this at the top of your script to avoid visual blinking:
st.set_page_config(
page_title="My Dashboard",
page_icon=":material/analytics:",
layout="wide", # Use "wide" for dashboards with lots of data
)Layout options:
layout="centered"(default) → Best for most apps, content is constrained to a readable widthlayout="wide"→ Full-width, good for dashboards and data-heavy apps
App logo
Add a logo to the sidebar/header:
st.logo("logo.png")Icons over emojis
Use Material icons for a cleaner, more professional look.
# GOOD: Material icons
st.markdown(":material/settings:")
st.markdown(":material/calendar_today:")
st.markdown(":material/dashboard:")
st.markdown(":material/person:")
# SPARINGLY: Emojis for special occasions
st.markdown("Celebration! 🎉")Format: :material/icon_name:
Find icons: https://fonts.google.com/icons
Popular icons by category:
| Category | Icons |
|---|---|
| Navigation | home, arrow_back, menu, settings, search |
| Actions | send, play_arrow, refresh, download, upload, save, delete, edit |
| Status | check_circle, error, warning, info, pending |
| Data | table_chart, bar_chart, analytics, query_stats, database |
| Content | chat, code, description, article, folder |
| UI | visibility, build, tune, filter_list |
Badges for status
For standalone badges:
st.badge("Active", icon=":material/check:", color="green")
st.badge("Pending", icon=":material/schedule:", color="orange")
st.badge("Deprecated", color="red")For inline badges in text:
st.markdown("""
:green-badge[Active] :orange-badge[Pending] :red-badge[Deprecated] :blue-badge[New]
""")Avoid the old verbose syntax:
# OLD (still works but cluttered)
st.markdown(":orange-background[:orange[Pending]]")Spacing: remove dividers
Dividers (st.divider() or ---) look heavy. Just remove them—Streamlit's default spacing is usually enough.
# BAD
st.header("Section 1")
st.write("Content")
st.divider() # Too heavy
st.header("Section 2")
# GOOD
st.header("Section 1")
st.write("Content")
st.header("Section 2")If you genuinely need spacing:
st.space("small") # Small gap
st.space("medium") # Medium gap
st.space("large") # Large gap
st.space(50) # Custom pixels for fine-tuningDon't systematically replace dividers with st.space()—it can look weird too.
Sentence casing
Use sentence casing for titles and labels. Title Case Feels Shouty.
# GOOD
st.title("Upload your data")
st.selectbox("Select a region", options)
st.button("Save changes")
# BAD
st.title("Upload Your Data")
st.selectbox("Select A Region", options)Caption over info
st.info() is too heavy for simple informational text.
# GOOD: Lighter
st.caption("Data last updated 5 minutes ago")
# BAD: Too heavy
st.info("Data last updated 5 minutes ago")When to use what:
st.caption→ Simple info, metadata, timestampsst.info→ Important instructionsst.warning→ Caution, potential issuesst.error→ Errors that block progressst.success→ Confirmation of actionst.toast→ Lightweight confirmation that auto-dismisses
Text alignment
Use text_alignment for text elements:
st.title("Centered title", text_alignment="center")
st.write("Right aligned", text_alignment="right")
st.caption("Justified text", text_alignment="justify")Options: "left" (default), "center", "right", "justify"
Note: horizontal_alignment on containers positions elements but also sets their text_alignment. If you need different text alignment within a horizontally-aligned container, override text_alignment on the text element itself.
Icons in callouts and expanders
Material icons can make callouts and expanders look nicer:
st.info("Processing complete", icon=":material/check_circle:")
st.warning("Rate limit approaching", icon=":material/warning:")
st.error("Connection failed", icon=":material/error:")
st.success("Saved!", icon=":material/thumb_up:")
with st.expander("Settings", icon=":material/settings:"):
st.write("Configure your preferences")Other elements like st.button and st.tabs also support icons—worth considering when it adds clarity.
References
© iusztinpaul, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .agents/skills/developing-with-streamlit/skills/improving-streamlit-design of iusztinpaul/designing-real-world-ai-agents-workshop.
Open the folder on GitHubat commit ea4f6e9
Compare with similar skills
Improving Streamlit Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Improving Streamlit Design this skilliusztinpaul/designing-real-world-ai-agents-workshop | 512 | — | ~1.4k | Automated safety check: Pass | Apache-2.0 | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| LobeHub Interactive Prototypelobehub/lobehub | 83k | — | ~1.6k | Automated safety check: Pass | Custom licence | |
| Make Interfaces Feel Bettersamuelclay/NewsBlur | 7.6k | 10 repos | ~1.5k | Automated safety check: Pass | MIT | |
| UI UX Pro MaxZxBing0066/pixel-converter | 181 | 13 repos | ~2.6k | Automated safety check: Notes | BSD-2-Clause | |
| Design Dnazanwei/design-dna | 1.9k | 1 repos | ~2.1k | Automated safety check: Pass | MIT |
Similar skills
LobeHub Interactive Prototype
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
Make Interfaces Feel Better
samuelclay/NewsBlur
Design engineering principles for making interfaces feel polished.
UI UX Pro Max
ZxBing0066/pixel-converter
UI/UX design intelligence with searchable database. An agent skill from ZxBing0066/pixel-converter.
Design Dna
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
Figma Design to Code
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
More from iusztinpaul/designing-real-world-ai-agents-workshop
All 23 skills in this repoBuilding Streamlit Custom Components V2
iusztinpaul/designing-real-world-ai-agents-workshop
Builds bidirectional Streamlit Custom Components v2 (CCv2) using st.components.v2.component.
Building Streamlit Chat UI
iusztinpaul/designing-real-world-ai-agents-workshop
Building chat interfaces in Streamlit. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.
Building Streamlit Dashboards
iusztinpaul/designing-real-world-ai-agents-workshop
Building dashboards in Streamlit. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.
Building Streamlit Multipage Apps
iusztinpaul/designing-real-world-ai-agents-workshop
Building multi-page Streamlit apps. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.
Choosing Streamlit Selection Widgets
iusztinpaul/designing-real-world-ai-agents-workshop
Choosing the right Streamlit selection widget. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.
Connecting Streamlit To Snowflake
iusztinpaul/designing-real-world-ai-agents-workshop
Connecting Streamlit apps to Snowflake. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.
Related
Works with
Categories
Questions about Improving Streamlit Design
What does Improving Streamlit Design do?
Improving visual design in Streamlit apps. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop. Improving Streamlit Design is an agent skill from iusztinpaul/designing-real-world-ai-agents-workshop. Improving visual design in Streamlit apps.
When should I use Improving Streamlit Design?
Improving Streamlit Design fits situations like: polishing apps with icons; tasks that involve UI design.
How do I install Improving Streamlit Design in Claude Code?
Run `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill improving-streamlit-design -a claude-code`. Or copy the skill folder (.agents/skills/developing-with-streamlit/skills/improving-streamlit-design in iusztinpaul/designing-real-world-ai-agents-workshop) into .claude/skills/improving-streamlit-design in your project. Claude Code loads it when a task matches its description.
How do I install Improving Streamlit Design in Codex?
Run `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill improving-streamlit-design -a codex`. Or copy the skill folder (.agents/skills/developing-with-streamlit/skills/improving-streamlit-design in iusztinpaul/designing-real-world-ai-agents-workshop) into .agents/skills/improving-streamlit-design in your project. Codex loads it when a task matches its description.
Can I use Improving Streamlit Design in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill improving-streamlit-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/improving-streamlit-design, .gemini/skills/improving-streamlit-design, .github/skills/improving-streamlit-design and .opencode/skills/improving-streamlit-design in your project.
What does Improving Streamlit Design need to run?
SKILL.md names no scripts, command-line tools or credentials: Improving Streamlit Design is instructions for the agent only. Our summary lists: Python 3.
Does Improving Streamlit Design access the network?
SKILL.md names 2 domains. As links in the text: docs.streamlit.io and fonts.google.com. This is read from the text; nothing was executed.
Is Improving Streamlit Design safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Improving Streamlit Design use?
Improving Streamlit Design is published under the Apache-2.0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Improving Streamlit Design use?
About 1.4k tokens (SKILL.md is roughly 5.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Improving Streamlit Design?
Skills that share tags, products or a category with Improving Streamlit Design: UI Styling (Ohh-889/skyroc, 795 stars), LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars) and UI UX Pro Max (ZxBing0066/pixel-converter, 181 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Improving Streamlit Design?
iusztinpaul (a GitHub user) maintains it in iusztinpaul/designing-real-world-ai-agents-workshop, which has 512 GitHub stars. The repository holds 23 skills in this directory. The repository was last updated on June 3, 2026.
Source: iusztinpaul/designing-real-world-ai-agents-workshop on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.