Agent skill

Using Streamlit Markdown

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

Covers all Markdown features in Streamlit including GitHub-flavored syntax plus Streamlit extensions like colored text, badges, Material icons, and LaTeX.

Apache-2.0Auto-check passedDocuments & Office

Install Using Streamlit Markdown

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

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

GitHub CLI
$ gh skill install iusztinpaul/designing-real-world-ai-agents-workshop using-streamlit-markdown --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/using-streamlit-markdown .claude/skills/using-streamlit-markdown && 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
using-streamlit-markdown
GitHub stars
513
Token cost
~1.8k tokens
SKILL.md length
465 words
Files
1
Skills in repo
23
Repo updated
First seen
Licence
Apache-2.0

At a glance

Covers all Markdown features in Streamlit including GitHub-flavored syntax plus Streamlit extensions like colored text, badges, Material icons, and LaTeX.

  • Formatting text
  • SKILL.md covers Quick reference, Where Markdown works, GitHub-flavored Markdown and Colored text, backgrounds, and…, plus 11 more sections
  • Reaches streamlit.io
  • Any text-rendering element

What it does

Using Streamlit Markdown is an agent skill from iusztinpaul/designing-real-world-ai-agents-workshop. Covers all Markdown features in Streamlit including GitHub-flavored syntax plus Streamlit extensions like colored text, badges, Material icons, and LaTeX. Use when formatting text, labels, tooltips, or any text-rendering element.

Its SKILL.md is about 1.8k 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 Documents & Office, covering LaTeX and Markdown. It works with Streamlit, LaTeX and GitHub. 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

  • Formatting text
  • Any text-rendering element

Example prompts

  • “Use the using-streamlit-markdown skill to cover all Markdown features in Streamlit including GitHub-flavored syntax plus Streamlit extensions like…”
  • “/using-streamlit-markdown”

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

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

    • streamlit.io

    Also links to:

    • fonts.google.com
    • docs.streamlit.io
    • github.github.com
    • katex.org

    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

Using Streamlit Markdown loads about 1.8k tokens when it runs. Until then it costs about 64 tokens; SKILL.md has 465 words of instructions outside code blocks.

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

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). 465 words, ~1,833 tokens.

Download SKILL.mdSave it as .claude/skills/using-streamlit-markdown/SKILL.md (or your agent's skills folder).
name
using-streamlit-markdown
description
Covers all Markdown features in Streamlit including GitHub-flavored syntax plus Streamlit extensions like colored text, badges, Material icons, and LaTeX. Use when formatting text, labels, tooltips, or any text-rendering element.
license
Apache-2.0

Using Markdown in Streamlit

Streamlit supports Markdown throughout its API—in st.markdown(), widget labels, help tooltips, metrics, st.table() cells, and more. Beyond standard GitHub-flavored Markdown, Streamlit adds colored text, badges, icons, and LaTeX.

Quick reference

FeatureSyntaxExampleWorks in labels
Bold**text****Bold**✓
Italic*text**Italic*✓
Strikethrough~text~~Strikethrough~✓
Inline code`code``variable`✓
Code block```lang...``````python...```✗
Link[text](url)[Streamlit](https://streamlit.io)✓
Image![alt](path)![Logo](logo.png)✓
Heading# to ###### ## Section✗
Blockquote> text> Note✗
Horizontal rule------✗
Unordered list- item- First<br>- Second✗
Ordered list1. item1. First<br>2. Second✗
Task list- [ ] / - [x]- [x] Done<br>- [ ] Todo✗
Table| a | b || H1 | H2 |<br>|--|--|✗
EmojiDirect or shortcode🎉 or :tada:✓
Streamlit logo:streamlit::streamlit:✓
Material icon:material/icon_name::material/check_circle:✓
Colored text:color[text]:red[Error]✓
Colored background:color-background[text]:blue-background[Info]✓
Badge:color-badge[text]:green-badge[Success]✓
Small text:small[text]:small[footnote]✓
LaTeX (inline)$formula$$ax^2 + bx + c$✓
LaTeX (block)$$formula$$$$\int_0^1 x^2 dx$$✗

Where Markdown works

Markdown is supported in most places where text is rendered. Streamlit has three levels of markdown support:

Full Markdown — All syntax shown in the table above:

  • st.markdown(), st.write(), st.caption(), st.info(), st.warning(), st.error(), st.success(), st.table cells and headers, tooltips (help parameter)

Label subset — Inline formatting only (see table above). Block elements (e.g. headings, lists, tables) are silently stripped:

  • Widget and element labels (st.button, st.checkbox, st.radio, st.expander, st.page_link, etc.), st.radio and st.select_slider options, st.tabs names, st.metric label/value/delta, st.title, st.header, st.subheader, st.image caption, st.dialog title, st.progress, st.spinner.

No Markdown — Text displays literally:

  • st.text(), st.json(), st.dataframe() / st.data_editor() cells, st.selectbox / st.multiselect options, input placeholders, st.Page titles, chart/map labels

GitHub-flavored Markdown

Standard GFM syntax works as expected. Headings automatically get anchor links for navigation.

python
st.markdown("""
# Heading

**Bold**, *italic*, ~~strikethrough~~, `inline code`, [links](url)

- Unordered list
- [x] Task list

| Column | Column |
|--------|--------|
| Cell   | Cell   |

> Blockquote

```python
code_block = "with syntax highlighting"
```
""")

Colored text, backgrounds, and badges

python
st.markdown(":red[Error] and :green[Success]")  # Colored text
st.markdown(":blue-background[Highlighted]")     # Colored background
st.markdown(":green-badge[Active] :red-badge[Inactive]")  # Inline badges

Available colors: red, orange, yellow, green, blue, violet, gray/grey, rainbow, primary

Note: rainbow is not supported for backgrounds or badges. Standalone badges also available via st.badge().

Show full SKILL.md (177 more words)Show less

Material icons

Use Google Material Symbols with :material/icon_name: syntax. Find icons at fonts.google.com/icons

python
st.markdown(":material/check_circle: Complete")

Material icons also work in icon parameters across many elements (st.button, st.expander, st.info, etc.).

Emojis

Both Unicode emojis (preferred) and shortcodes work.

python
st.markdown("Hello! 👋 :+1: :tada: :streamlit:")

Note: Material icons are preferred over emojis for a more professional look.

LaTeX math

Single $ for inline, double $$ for display mode. Inline math requires non-whitespace after $ to avoid conflicts with currency (e.g., "$5" won't be parsed as math).

python
# Inline math
st.markdown("The quadratic formula is $x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}$")

# Display math (centered, larger)
st.markdown("""
$$
\\sum_{i=1}^{n} x_i = x_1 + x_2 + ... + x_n
$$
""")

Images in Markdown

python
st.markdown("![Alt text](https://example.com/image.png)")
st.button("![Logo](app/static/logo.png) Click me")  # Image as icon in label

In labels, images display as icons with max height equal to font height.

Markdown in element labels

Widgets, containers, and other elements support Markdown in their labels (using the label subset).

python
st.radio(":material/palette: Choose **color**", [":red-background[Red]", ":blue-background[Blue]", ":green-background[Green]"])
tab1, tab2 = st.tabs([":material/home: Home", ":material/settings: Settings"])
st.metric(label=":material/attach_money: Revenue", value=":green[$1.2M]", delta=":material/trending_up: 12%")

Escaping special characters

Use backslash to show literal characters: \\[, \\*, 1\\.

python
st.markdown(":blue[Array: \\[1, 2, 3\\]]")
st.button("1\\. Not a list")

Markdown in st.table

st.table() renders Markdown in cells and headers.

python
st.table({
    "**Name**": "Alice",
    "**Status**": ":green-badge[Active]",
    "**Role**": ":material/shield: Admin"
})

Combining features

Mix multiple features for rich formatting.

python
st.markdown("""
### :material/rocket: Launch status

| Phase | Status | Notes |
|-------|--------|-------|
| Build | :green-badge[Complete] | All tests passing |
| Deploy | :orange-badge[In Progress] | ETA: 2 hours |
| Monitor | :gray-badge[Pending] | Waiting on deploy |

:small[Last updated: just now]
""")

st.markdown - text alignment and width

Control layout with text_alignment and width parameters.

python
st.markdown("Centered heading", text_alignment="center")  # left, center, right, justify
st.markdown("Content width only", width="content")  # stretch, content, or pixels (e.g. 400)

HTML (use very sparingly!)

Mix Markdown with HTML using unsafe_allow_html=True. For pure HTML without markdown processing, use st.html() instead.

python
st.markdown("**Status:** <span style='color: coral'>Custom styled</span>", unsafe_allow_html=True)
st.html("<div class='custom'>Pure HTML content</div>")

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

Open the folder on GitHubat commit ea4f6e9

Compare with similar skills

Using Streamlit Markdown 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.

Using Streamlit Markdown compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Using Streamlit Markdown this skilliusztinpaul/designing-real-world-ai-agents-workshop513—~1.8kAutomated safety check: PassApache-2.0
Lov Any2pdflovstudio/any2pdf211—~2.4kAutomated safety check: NotesMIT
MineruNebutra/MinerU-Skill122—~1.4kAutomated safety check: PassMIT
Opendocsioteverythin/OpenDocs233—~746Automated safety check: NotesMIT
Thu ThesisLeoYeAI/openclaw-master-skills2.2k—~4kAutomated safety check: PassMIT
MineruNebutra/MinerU-Skill122—~504Automated safety check: PassMIT

Similar skills

  • Lov Any2pdf

    lovstudio/any2pdf

    Convert Markdown documents to professionally typeset PDF files with reportlab.

    211 GitHub stars~2.4k tokensUpdated 1 mo ago
    Documents & OfficeAuto-check: notes
  • Mineru

    Nebutra/MinerU-Skill

    An AI-Native skill for parsing PDF / Office / image files into clean Markdown with MinerU — a fast, zero-config document parser for AI agents.

    122 GitHub stars~1.4k tokensUpdated 14 days ago
    Documents & OfficeAuto-check passed
  • Opendocs

    ioteverythin/OpenDocs

    Generates multi-format documentation (Word, PDF, PPTX, Markdown blog post, JIRA ticket, FAQ, changelog, LaTeX, social snippet, architecture diagram) from a GitHub README, npm package, local Markdown…

    233 GitHub stars~746 tokensUpdated 1 mo ago
    Documents & OfficeAuto-check: notes
  • Thu Thesis

    LeoYeAI/openclaw-master-skills

    清华大学毕业论文 Word → PDF 一键格式规范化工具。输入任意 Word (.docx) 格式的清华毕业论文,自动转换为符合清华 thuthesis 官方 LaTeX 模板规范的高质量 PDF。适用于所有清华学位论文(MBA/学硕/专硕),一条命令搞定。功能:自动提取章节结构、中英文摘要、参考文献(自动生成 BibTeX)、图片(含…

    2.2k GitHub stars~4k tokensUpdated 2 mo ago
    Documents & OfficeAuto-check passed
  • Mineru

    Nebutra/MinerU-Skill

    An AI-Native skill for parsing PDF / Office / image files into Markdown with MinerU — a fast, zero-config document parser for AI agents.

    122 GitHub stars~504 tokensUpdated 14 days ago
    Documents & OfficeAuto-check passed
  • Lecture To Md

    ysyecust/lecture-to-notes

    把课堂视频(本地或 B 站/YouTube)、文字稿、课件三者(任意组合)整理成一份详细的中文 Markdown 课堂笔记,输出按课程标题命名的 {titlename}.md(首行为 文档标题)+ 相对路径图片。Markdown 工作流,与上游 lecture-to-notes 的 LaTeX/PDF 输出并行存在;上游 skill 完全不动。触发词:markdown 笔记、md 笔记、视频转…

    270 GitHub stars~3.9k tokensUpdated 5 days ago
    Documents & OfficeAuto-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.

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

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

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

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

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

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

Questions about Using Streamlit Markdown

What does Using Streamlit Markdown do?

Covers all Markdown features in Streamlit including GitHub-flavored syntax plus Streamlit extensions like colored text, badges, Material icons, and LaTeX. Using Streamlit Markdown is an agent skill from iusztinpaul/designing-real-world-ai-agents-workshop. Covers all Markdown features in Streamlit including GitHub-flavored syntax plus Streamlit extensions like colored text, badges, Material icons, and LaTeX.

When should I use Using Streamlit Markdown?

Using Streamlit Markdown fits situations like: formatting text; any text-rendering element.

How do I install Using Streamlit Markdown in Claude Code?

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

How do I install Using Streamlit Markdown in Codex?

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

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

What does Using Streamlit Markdown need to run?

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

Does Using Streamlit Markdown access the network?

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

Is Using Streamlit Markdown 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 Using Streamlit Markdown use?

Using Streamlit Markdown 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 Using Streamlit Markdown use?

About 1.8k tokens (SKILL.md is roughly 7.3k 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 Using Streamlit Markdown?

Skills that share tags, products or a category with Using Streamlit Markdown: Lov Any2pdf (lovstudio/any2pdf, 211 stars), Mineru (Nebutra/MinerU-Skill, 122 stars), Opendocs (ioteverythin/OpenDocs, 233 stars) and Thu Thesis (LeoYeAI/openclaw-master-skills, 2.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Using Streamlit Markdown?

iusztinpaul (a GitHub user) maintains it in iusztinpaul/designing-real-world-ai-agents-workshop, which has 513 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.