skills.rest
erickfmm
erickfmmCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

building-streamlit-custom-components-v2

Build bidirectional Streamlit CCv2 components with the v2 API.

Updated Jan 27, 2026
Search Tags:#theming#frontend#streamlit#state-sync#custom-components#ccv2#packaged-components
One-click install
npx skills add https://github.com/erickfmm/transformer-encoder-frankestein --skill building-streamlit-custom-components-v2-erickfmm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-streamlit-custom-components-v2
Source: https://github.com/erickfmm/transformer-encoder-frankestein/tree/main/.agents/skills/developing-with-streamlit/skills/building-streamlit-custom-components-v2
Command: npx skills add https://github.com/erickfmm/transformer-encoder-frankestein --skill building-streamlit-custom-components-v2-erickfmm

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Builds robust, bidirectional Streamlit CCv2 components that work in both inline and packaged modes, enabling seamless state communication, theming, and deployment-ready workflows.

Core Features & Use Cases

  • Inline CCv2 development: author UI with html/css/js using the v2 component API and hydrate state from Python.
  • Packaged CCv2 templates: start from the official component-template v2 for scalable assets and distribution.
  • Theming and state sync: leverage Streamlit theme variables and the controlled component pattern for reliable UI updates.
  • Production-ready workflow: validate builds with Vite/template scaffolds and ensure asset_dir and glob accuracy.

Quick Start

Create a minimal inline CCv2 component that renders a text input and reports its value back to the app.

Frequently Asked Questions about building-streamlit-custom-components-v2

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build custom Streamlit components that sync state between Python and the frontend?▼

Build bidirectional Streamlit CCv2 components using the v2 API to enable interactive UI with Python-frontend synchronization. The skill applies to inline components and packaged templates, supporting asset_dir, js/css globs, state/trigger callbacks, and theming with Streamlit CSS variables. The skill enforces correct usage of st.components.v2.component, shadow DOM isolation, and guidelines for inline versus packaged workflows.

What is the difference between inline and packaged Streamlit CCv2 components?▼

Inline CCv2 development authors UI with html/css/js using the v2 component API and hydrates state from Python, while packaged CCv2 templates start from the official component-template v2 for scalable assets and distribution. The skill enforces guidelines for inline versus packaged workflows.

How do I apply theming to custom Streamlit components using CSS variables?▼

Leverage Streamlit theme variables and the controlled component pattern for reliable UI updates to apply theming to custom Streamlit components. This approach ensures your CCv2 components visually integrate with the host application.

Does the Streamlit v2 component API support shadow DOM isolation?▼

Yes, the Streamlit v2 component API supports shadow DOM isolation. The skill enforces correct usage of st.components.v2.component and shadow DOM isolation to ensure reliable state communication and styling encapsulation.

How do I validate Streamlit component builds using Vite and template scaffolds?▼

Validate builds with Vite/template scaffolds and ensure asset_dir and glob accuracy to create production-ready Streamlit CCv2 workflows. This process confirms that js/css globs are correctly resolved for deployment.

Related Skills

Explore More Software Engineering Skills→
andfaniloandfanilo
629

building-streamlit-custom-components-v2

Build bidirectional Streamlit Custom Components v2 with st.components.v2.component.

Community
Advanced
NickEsColRNickEsColR

building-streamlit-custom-components-v2

Build bidirectional Streamlit CCv2 components with inline HTML/JS/CSS or packaged assets.

Community
Advanced
DDTullyDDTully

building-streamlit-custom-components-v2

Develops and deploys Streamlit CCv2 components with inline or packaged frontends.

Community
Advanced
kwonheekimkwonheekim

Emotion CSS-in-JS Helper

Convert CSS and inline styles into Emotion-ready CSS-in-JS code.

Community
Intermediate