New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Creating Streamlit Themes

by iusztinpaul in iusztinpaul/designing-real-world-ai-agents-workshop

Creating and customizing Streamlit themes. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.

Apache-2.0Auto-check passedFrontend & Design

Install Creating Streamlit Themes

skills CLI
$ npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill creating-streamlit-themes -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install iusztinpaul/designing-real-world-ai-agents-workshop creating-streamlit-themes --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ 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/creating-streamlit-themes .claude/skills/creating-streamlit-themes && rm -rf skills-src

Use ~/.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/

Facts

Skill name
creating-streamlit-themes
GitHub stars
512
Token cost
~3.7k tokens
SKILL.md length
800 words
Files
1
Skills in repo
23
Repo updated
First seen
Licence
Apache-2.0

At a glance

Creating and customizing Streamlit themes. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.

  • Changing app colors
  • SKILL.md covers Theme file setup, Theme inheritance, Color configuration and Typography, plus 8 more sections
  • Reaches fonts.googleapis.com
  • Aligning apps to brand guidelines

What it does

Creating Streamlit Themes is an agent skill from iusztinpaul/designing-real-world-ai-agents-workshop. Creating and customizing Streamlit themes. Use when changing app colors, fonts, or appearance, or aligning apps to brand guidelines. Covers config.toml configuration, design principles, and CSS avoidance.

Its SKILL.md is about 3.7k 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 Brand strategy and identity, Typography and Theming and dark mode. 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

  • Changing app colors
  • Aligning apps to brand guidelines

Example prompts

  • “/creating-streamlit-themes”

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 toml and python).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • fonts.googleapis.com

    Also links to:

    • docs.streamlit.io

    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

Creating Streamlit Themes loads about 3.7k tokens when it runs. Until then it costs about 58 tokens; SKILL.md has 800 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~58
When it runs · the whole SKILL.md, loaded when a task matches
~3.7k

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). 800 words, ~3,712 tokens.

Download SKILL.mdSave it as .claude/skills/creating-streamlit-themes/SKILL.md (or your agent's skills folder).
name
creating-streamlit-themes
description
Creating and customizing Streamlit themes. Use when changing app colors, fonts, or appearance, or aligning apps to brand guidelines. Covers config.toml configuration, design principles, and CSS avoidance.
license
Apache-2.0

Creating Streamlit themes

Build professional, brand-aligned themes using .streamlit/config.toml. This skill covers design principles and complete configuration for polished, cohesive themes.

Theme file setup

Theme options go in Streamlit's config.toml under the [theme] section:

Theme inheritance

Start from a built-in theme or external file:

toml
[theme]
base = "light"                         # or "dark"
# base = "./my-base-theme.toml"        # Local file
# base = "https://example.com/theme.toml"  # Remote URL

When using base, you only need to override the values you want to change. Theme files referenced via base can only contain a single [theme] section—[theme.light] and [theme.dark] variants are not supported in external theme files.

Color configuration

Theme colors
toml
[theme]
primaryColor = "#0969da"           # Buttons, links, active elements
backgroundColor = "#ffffff"        # Main content background
secondaryBackgroundColor = "#f6f8fa"  # Widget backgrounds, code blocks
textColor = "#1F2328"              # Body text

# Optional refinements
linkColor = "#0969da"              # Markdown links (defaults to primaryColor)
codeTextColor = "#1F2328"          # Inline code text
codeBackgroundColor = "#f6f8fa"    # Code block background
borderColor = "#d0d7de"            # Widget borders

Design principle: Choose a primaryColor dark enough to contrast with white text. Streamlit renders the text of primary buttons white against the primary color.

Color palette

Define semantic colors for status indicators, markdown text coloring, and sparklines:

toml
[theme]
redColor = "#cf222e"
orangeColor = "#bf8700"
yellowColor = "#dbab09"
greenColor = "#1a7f37"
blueColor = "#0969da"
violetColor = "#8250df"
grayColor = "#57606a"

Each color supports background and text variants (auto-derived if not set):

toml
[theme]
greenColor = "#1a7f37"
greenBackgroundColor = "#dafbe1"   # Light tint for badges
greenTextColor = "#116329"         # Darkened for readability
Chart colors

Define colors for Plotly, Altair, and Vega-Lite charts:

toml
[theme]
# Categorical data (bars, pie slices, series)
chartCategoricalColors = ["#0969da", "#1a7f37", "#bf3989", "#8250df", "#cf222e", "#bf8700", "#57606a"]

# Sequential/gradient data (heatmaps) - exactly 10 colors required
chartSequentialColors = ["#f0f6fc", "#c8e1ff", "#79c0ff", "#58a6ff", "#388bfd", "#1f6feb", "#1158c7", "#0d419d", "#0a3069", "#04244a"]
Dataframe styling
toml
[theme]
dataframeBorderColor = "#d0d7de"
dataframeHeaderBackgroundColor = "#f6f8fa"

Ensure textColor is readable against dataframeHeaderBackgroundColor—headers use the main text color.

Typography

Font families

Use built-in fonts, load from Google Fonts, or define custom fonts from font files (see below):

toml
[theme]
# Built-in options
font = "sans-serif"  # or "serif" or "monospace"

# Google Fonts
font = "Inter:https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"

# Font with spaces in name
font = "'IBM Plex Sans':https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap"
Self-hosting custom fonts

Use [[theme.fontFaces]] tables to load fonts via Streamlit's static file serving. Font files must be placed in a static/ directory and served through the app—they cannot be arbitrary local file paths.

Before adding fonts to config.toml: Verify the font files exist in the static directory.

toml
[[theme.fontFaces]]
family = "CustomFont"
url = "app/static/CustomFont-Regular.woff2"
weight = 400

[[theme.fontFaces]]
family = "CustomFont"
url = "app/static/CustomFont-Bold.woff2"
weight = 700

[theme]
font = "CustomFont"

Attributes: family (name), url (path to OTF/TTF/WOFF/WOFF2), weight (400, "200 800", or "bold"), style ("normal"/"italic"/"oblique"), unicodeRange (e.g., "U+0000-00FF").

Changes to fontFaces require a server restart.

Heading and code fonts
toml
[theme]
headingFont = "Inter:https://fonts.googleapis.com/css2?family=Inter:wght@600;700&display=swap"
codeFont = "'JetBrains Mono':https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap"
Font sizing and weight
toml
[theme]
baseFontSize = 14                  # Root size in pixels (default: 16)
baseFontWeight = 400               # Normal weight
codeFontSize = "0.875rem"          # Relative to base, or use "13px"
codeFontWeight = 400

# Heading hierarchy (h1 through h6), or use a single value for all
headingFontSizes = ["32px", "24px", "20px", "16px", "14px", "12px"]
headingFontWeights = [600, 600, 600, 500, 500, 500]
toml
[theme]
linkUnderline = false              # Remove underlines for cleaner look

Border and radius

toml
[theme]
baseRadius = "8px"                 # All components (none/small/medium/large/full/px/rem)
buttonRadius = "8px"               # Buttons specifically (defaults to baseRadius)
showWidgetBorder = true            # Show borders on unfocused widgets
showSidebarBorder = true           # Show divider between sidebar and content

Radius keywords: "none" (0), "small" (4px), "medium" (8px), "large" (12px), "full" (pill shape).

Sidebar customization

Style the sidebar independently:

toml
[theme.sidebar]
backgroundColor = "#f6f8fa"
secondaryBackgroundColor = "#eaeef2"
codeBackgroundColor = "#eaeef2"
textColor = "#1F2328"
borderColor = "#d0d7de"
primaryColor = "#0969da"           # Active elements in sidebar

Light and dark modes

Define separate themes for each mode:

toml
[theme.light]
primaryColor = "#0969da"
backgroundColor = "#ffffff"
secondaryBackgroundColor = "#f6f8fa"
textColor = "#1F2328"

[theme.dark]
primaryColor = "#58a6ff"
backgroundColor = "#0d1117"
secondaryBackgroundColor = "#161b22"
textColor = "#e6edf3"

[theme.light.sidebar]
backgroundColor = "#f6f8fa"

[theme.dark.sidebar]
backgroundColor = "#010409"

Users can switch between modes in the app settings menu only if both [theme.light] and [theme.dark] are defined. A custom theme with just [theme] locks the app to a single mode.

Detecting current theme

Use st.context.theme.base to adapt your app to the active theme. Useful for:

  • Adjusting specific chart colors for better contrast
  • Swapping logos or images (e.g., dark logo on light, light logo on dark)
  • Styling third-party components that don't auto-adapt
  • Applying conditional CSS or custom styling
python
if st.context.theme.base == "dark":
    # Do something for dark mode

Design principles

Color contrast

Ensure WCAG AA compliance (4.5:1 ratio for text):

  • Light themes: Dark text (#1F2328) on light backgrounds (#ffffff)
  • Dark themes: Light text (#e6edf3) on dark backgrounds (#0d1117)
  • Primary colors must contrast with white button text
Color harmony

Build cohesive palettes using these approaches:

Monochromatic: Single hue with varying lightness (e.g., shadcn's zinc grays)

toml
primaryColor = "#18181B"
textColor = "#09090B"
borderColor = "#E4E4E7"
grayColor = "#71717A"

Brand accent: Neutral base with one brand color (e.g., Stripe's purple)

toml
primaryColor = "#635bff"           # Brand purple
backgroundColor = "#ffffff"
textColor = "#425466"              # Neutral gray

Complementary: Brand primary with supporting accent colors

toml
primaryColor = "#29B5E8"           # Brand blue (Snowflake)
textColor = "#11567F"              # Darker blue for text
greenColor = "#36B37E"             # Success states
redColor = "#DE350B"               # Error states
Typography guidelines
  • Body text: 14-16px, weight 400
  • Headings: Decreasing scale from h1 (28-40px) to h6 (12-14px)
  • Code: Monospace font, slightly smaller than body (0.85-0.875rem)
  • Font pairing: Use the same font for body and headings for consistency, or pair complementary fonts (e.g., serif headings with sans-serif body). Code should always use a distinct monospace font.
Show full SKILL.md (305 more words)Show less
Visual hierarchy

Create depth with background layers:

Main content:        #ffffff (lightest)
Secondary elements:  #f6f8fa (slightly darker)
Sidebar:             #f6f8fa or contrasting brand color
Code blocks:         #f6f8fa (matches secondary or distinct)

Example: Snowflake brand theme

Clean, professional theme with brand blue accents:

toml
[theme]
primaryColor = "#29B5E8"
backgroundColor = "#ffffff"
secondaryBackgroundColor = "#f4f9fc"
codeBackgroundColor = "#e8f4f8"
textColor = "#11567F"
linkColor = "#29B5E8"
borderColor = "#d0e8f2"
showWidgetBorder = true
showSidebarBorder = true
baseRadius = "8px"
buttonRadius = "8px"

font = "'Inter':https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
codeFont = "'JetBrains Mono':https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap"
codeFontSize = "13px"
codeTextColor = "#11567F"
baseFontSize = 14
baseFontWeight = 400
headingFontSizes = ["32px", "24px", "20px", "16px", "14px", "12px"]
headingFontWeights = [600, 600, 600, 500, 500, 500]
linkUnderline = false

chartCategoricalColors = ["#29B5E8", "#11567F", "#71C8E5", "#174D6A", "#A5DDF2", "#0E4D6B", "#52B8D9"]

blueColor = "#29B5E8"
greenColor = "#36B37E"
yellowColor = "#FFAB00"
redColor = "#DE350B"
violetColor = "#6554C0"

dataframeBorderColor = "#d0e8f2"
dataframeHeaderBackgroundColor = "#e8f4f8"

[theme.sidebar]
backgroundColor = "#11567F"
secondaryBackgroundColor = "#174D6A"
codeBackgroundColor = "#0E4D6B"
textColor = "#ffffff"
borderColor = "#1E6D94"

Example: VS Code dark theme

Developer-focused dark theme with syntax-inspired colors:

toml
[theme]
base = "dark"
primaryColor = "#0078d4"
backgroundColor = "#1e1e1e"
secondaryBackgroundColor = "#252526"
codeBackgroundColor = "#1e1e1e"
textColor = "#cccccc"
linkColor = "#3794ff"
borderColor = "#3c3c3c"
showWidgetBorder = true
showSidebarBorder = true
baseRadius = "4px"
buttonRadius = "4px"

font = "'Segoe UI', 'Open Sans':https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"
codeFont = "'Fira Code':https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap"
codeFontSize = "13px"
codeTextColor = "#d4d4d4"
baseFontSize = 14
baseFontWeight = 400
headingFontSizes = ["28px", "22px", "18px", "16px", "14px", "12px"]
headingFontWeights = [600, 600, 600, 600, 600, 600]
linkUnderline = false

chartCategoricalColors = ["#0078d4", "#4ec9b0", "#dcdcaa", "#ce9178", "#c586c0", "#569cd6", "#6a9955"]

blueColor = "#569cd6"
greenColor = "#6a9955"
yellowColor = "#dcdcaa"
orangeColor = "#ce9178"
violetColor = "#c586c0"

[theme.sidebar]
backgroundColor = "#252526"
secondaryBackgroundColor = "#333333"
codeBackgroundColor = "#1e1e1e"
borderColor = "#3c3c3c"

Common mistakes

Primary color too light
toml
# BAD: White text on yellow is unreadable
primaryColor = "#FFEB3B"

# GOOD: Use a darker shade
primaryColor = "#F59E0B"
Insufficient contrast
toml
# BAD: Light gray text on white
textColor = "#CCCCCC"
backgroundColor = "#FFFFFF"

# GOOD: Dark text on light background
textColor = "#1F2328"
backgroundColor = "#FFFFFF"
Mismatched backgrounds
toml
# BAD: Secondary lighter than primary
backgroundColor = "#f6f8fa"
secondaryBackgroundColor = "#ffffff"

# GOOD: Secondary should be darker/distinct
backgroundColor = "#ffffff"
secondaryBackgroundColor = "#f6f8fa"
Forgetting sidebar contrast

When using a dark sidebar with a light main section, adjust all sidebar colors—not just textColor:

toml
# BAD: Only changed backgroundColor
[theme.sidebar]
backgroundColor = "#11567F"

# GOOD: Adjust all colors for dark sidebar
[theme.sidebar]
backgroundColor = "#11567F"
secondaryBackgroundColor = "#174D6A"
textColor = "#ffffff"
borderColor = "#1E6D94"
...

IMPORTANT: No custom CSS unless explicitly requested

DO NOT use custom CSS or HTML for theming. This includes:

  • st.markdown(..., unsafe_allow_html=True) with <style> or inline styles
  • st.html() with <style> blocks
  • Any HTML/CSS for colors, backgrounds, fonts, or visual styling

Only use CSS if the user explicitly asks for it (e.g., "add custom CSS", "use st.html for styling"). For brand colors, theming, and visual identity—always use config.toml.

Native theming is cleaner, more maintainable, and won't break with Streamlit updates.

If the user explicitly asks for CSS, use key= to create targetable classes:

python
st.button("Submit", key="submit")
# Generates: .st-key-submit

st.html("""<style>.st-key-submit button { width: 100%; }</style>""")

Never use CSS for theming (colors, backgrounds, fonts) unless explicitly asked. Use config.toml instead.

Development workflow

Most theme options update live after saving config.toml and rerunning. Font-related options (fontFaces) require a server restart.

Test your theme with: buttons (primary contrast), forms (borders, focus), dataframes (headers), code blocks, charts, and sidebar.

Theme templates

Ready-to-use themes with bundled fonts are available in templates/themes/:

ThemeBasePrimary ColorFonts
snowflakeLight#29B5E8 (cyan)Inter, JetBrains Mono
draculaDark#BD93F9 (purple)Fira Sans, JetBrains Mono
nordDark#88C0D0 (frost blue)Inter, JetBrains Mono
stripeLight#635BFF (indigo)Inter, Source Code Pro
solarized-lightLight#268BD2 (blue)Source Sans 3, Source Code Pro
spotifyDark#1DB954 (green)Inter, Fira Code
githubLight#0969DA (blue)Inter, JetBrains Mono
minimalDark#6366f1 (indigo)Inter, JetBrains Mono

Each theme uses Google Fonts for easy setup. See templates/themes/README.md.

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/creating-streamlit-themes of iusztinpaul/designing-real-world-ai-agents-workshop.

Open the folder on GitHubat commit ea4f6e9

Compare with similar skills

Creating Streamlit Themes 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.

Creating Streamlit Themes compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Creating Streamlit Themes this skilliusztinpaul/designing-real-world-ai-agents-workshop512—~3.7kAutomated safety check: PassApache-2.0
Web Design Expertcuriositech/some_claude_skills243—~1.7kAutomated safety check: PassMIT
Design System Generatemohitagw15856/pm-claude-skills1.4k—~1.7kAutomated safety check: PassMIT
Impeccablebestofjs/bestofjs3.1k27 repos~2.6kAutomated safety check: PassMIT
Tailwindcss Developmentanonaddy/anonaddy4.9k10 repos~865Automated safety check: PassMIT
UI UX Pro Maxsaoudi-h/solar-icons18618 repos~11kAutomated safety check: NotesCustom licence

Similar skills

  • Web Design Expert

    curiositech/some_claude_skills

    Creates unique web designs with brand identity, color palettes, typography, and modern UI/UX patterns.

    243 GitHub stars~1.7k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Design System Generate

    mohitagw15856/pm-claude-skills

    Generate a complete, accessibility-checked design system from scratch — colour ramps, type scale, spacing, elevation, and exports for CSS, Tailwind, design tokens, Figma, VS Code and PowerPoint.

    1.4k GitHub stars~1.7k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 27 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    saoudi-h/solar-icons

    UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.

    186 GitHub starsUsed in 18 repos~11k tokens
    Frontend & DesignAuto-check: notes

  • Scalar Design System

    scalar/scalar

    Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library.

    16k GitHub stars~2.7k tokensUpdated today
    Frontend & DesignAuto-check passed

More from iusztinpaul/designing-real-world-ai-agents-workshop

All 23 skills in this repo

  • Building Streamlit Custom Components V2

    iusztinpaul/designing-real-world-ai-agents-workshop

    Builds bidirectional Streamlit Custom Components v2 (CCv2) using st.components.v2.component.

    512 GitHub stars~2.8k tokensUpdated 4 mo ago
    Auto-check passed

  • 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.

    512 GitHub stars~1.4k tokensUpdated 4 mo ago
    Auto-check passed

  • 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.

    512 GitHub stars~1.1k tokensUpdated 4 mo ago
    Auto-check passed

  • 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.

    512 GitHub stars~1.6k tokensUpdated 4 mo ago
    Auto-check passed

  • 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.

    512 GitHub stars~1.1k tokensUpdated 4 mo ago
    Auto-check passed

  • 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.

    512 GitHub stars~1.3k tokensUpdated 4 mo ago
    Auto-check passed

Works with

Categories

Questions about Creating Streamlit Themes

What does Creating Streamlit Themes do?

Creating and customizing Streamlit themes. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop. Creating Streamlit Themes is an agent skill from iusztinpaul/designing-real-world-ai-agents-workshop. Creating and customizing Streamlit themes.

When should I use Creating Streamlit Themes?

Creating Streamlit Themes fits situations like: changing app colors; aligning apps to brand guidelines.

How do I install Creating Streamlit Themes in Claude Code?

Run `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill creating-streamlit-themes -a claude-code`. Or copy the skill folder (.agents/skills/developing-with-streamlit/skills/creating-streamlit-themes in iusztinpaul/designing-real-world-ai-agents-workshop) into .claude/skills/creating-streamlit-themes in your project. Claude Code loads it when a task matches its description.

How do I install Creating Streamlit Themes in Codex?

Run `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill creating-streamlit-themes -a codex`. Or copy the skill folder (.agents/skills/developing-with-streamlit/skills/creating-streamlit-themes in iusztinpaul/designing-real-world-ai-agents-workshop) into .agents/skills/creating-streamlit-themes in your project. Codex loads it when a task matches its description.

Can I use Creating Streamlit Themes 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 creating-streamlit-themes -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/creating-streamlit-themes, .gemini/skills/creating-streamlit-themes, .github/skills/creating-streamlit-themes and .opencode/skills/creating-streamlit-themes in your project.

What does Creating Streamlit Themes need to run?

SKILL.md names no scripts, command-line tools or credentials: Creating Streamlit Themes is instructions for the agent only. Our summary lists: Python 3.

Does Creating Streamlit Themes access the network?

SKILL.md names 2 domains. In commands or code: fonts.googleapis.com; the agent is likely to contact it when it follows the instructions. As links in the text: docs.streamlit.io. This is read from the text; nothing was executed.

Is Creating Streamlit Themes 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 Creating Streamlit Themes use?

Creating Streamlit Themes 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 Creating Streamlit Themes use?

About 3.7k tokens (SKILL.md is roughly 15k 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 Creating Streamlit Themes?

Skills that share tags, products or a category with Creating Streamlit Themes: Web Design Expert (curiositech/some_claude_skills, 243 stars), Design System Generate (mohitagw15856/pm-claude-skills, 1.4k stars), Impeccable (bestofjs/bestofjs, 3.1k stars) and Tailwindcss Development (anonaddy/anonaddy, 4.9k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Creating Streamlit Themes?

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.