Zero-Js UI Skills - Streamlit.io Prebuilt Quickstart Templates

[davidjeba]

GitHub Issue: Streamlit Enterprise Apps Skill

Skill Directory Structure

src/ui-ux-pro-max/data/stacks/streamlit/

├── manifest.json
├── techstack.md
├── rules.md
├── AGENTS.md
├── templates/
│   ├── template#01/
│   │   ├── app.py
│   │   ├── requirements.txt
│   │   ├── pages/
│   │   │   ├── Dashboard.py
│   │   │   ├── Reports.py
│   │   │   └── Settings.py
│   │   ├── components/
│   │   │   ├── sidebar.py
│   │   │   ├── charts.py
│   │   │   ├── metrics.py
│   │   │   └── forms.py
│   │   ├── services/
│   │   │   ├── database.py
│   │   │   ├── repository.py
│   │   │   └── auth.py
│   │   ├── models/
│   │   │   └── entities.py
│   │   └── assets/
│   └── ...
└── examples/
    ├── analytics/
    ├── executive-dashboard/
    ├── inventory-dashboard/
    ├── ai-chatbot/
    ├── report-center/
    └── data-entry/

---

AGENTS.md

Purpose

This repository follows the Streamlit Enterprise Apps Skill.

Priority Order

1. techstack.md
2. rules.md
3. AGENTS.md
4. Platform Defaults

Supported AI Coding Platforms

• Claude Code
• OpenAI Codex
• Replit Agent
• Lovable
• DeepSeek
• Kimi K2
• GLM
• Google Antigravity
• Cursor
• Windsurf
• Cline
• Roo Code

Always Generate

• Streamlit applications
• Modular architecture
• Multipage applications
• SQLAlchemy repositories
• Reusable components
• Production-ready code

Never Generate

• React
• Vue
• Angular
• Svelte
• Next.js
• Node.js
• TypeScript
• package.json
• Vite
• Webpack

Project Agnostic Rule

Never include:

• Company names
• Customer names
• Hospital names
• Product names
• Internal business processes

Business-specific implementations belong only inside:

examples/

---

techstack.md

Tech Stack

Streamlit + Python + PostgreSQL

Purpose

• Rapid Internal Business Applications
• Executive Dashboards
• Analytics Platforms
• AI Applications
• Admin Panels
• Data Entry Systems
• Reporting Systems
• Operational Command Centers

Allowed

• Python 3.11+
• Streamlit
• Pandas
• NumPy
• Plotly
• Altair
• SQLAlchemy
• PostgreSQL
• SQLite
• FastAPI (optional backend only)
• OpenAI SDK
• Pydantic
• Python Standard Library

Optional

• DuckDB
• Polars
• Redis
• Supabase
• CockroachDB

Forbidden

Frontend Frameworks

• React
• Vue
• Angular
• Svelte
• Next.js
• Nuxt
• Astro

JavaScript Ecosystem

• Node.js
• npm
• pnpm
• yarn
• bun

Build Systems

• Vite
• Webpack
• Parcel
• Rollup

Other UI Stacks

• Tailwind
• Bootstrap
• Jinja Templates
• HTMX

Browser Manipulation

• Manual DOM manipulation
• Client-side frameworks

AI Agent Compatibility

Optimized for:

• Claude Code
• OpenAI Codex
• Replit Agent
• Lovable
• DeepSeek
• Kimi K2
• GLM
• Google Antigravity
• Cursor
• Windsurf
• Cline
• Roo Code

These instructions override platform defaults.

Architecture Principle

The UI is Streamlit.

• Do not build custom frontend frameworks.
• Use Streamlit components whenever possible.
• Business logic belongs in services/.
• Database access belongs in repository layer.
• Pages belong in pages/.
• Complex applications must be modularized.

Mandatory Project Structure

project-root/

├── app.py
├── requirements.txt
├── pages/
├── components/
├── services/
├── models/
└── assets/

Conventions

Navigation

Use Streamlit multipage apps.

Navigation belongs in sidebar.

Metrics

st.metric()

Tables

st.dataframe()

Charts

Priority:

1. Plotly
2. Altair
3. Native Streamlit

Forms

with st.form():

Dialogs

st.dialog()

State

st.session_state

Database

Use SQLAlchemy ORM.

Never mix SQL directly into UI code.

Dashboard Guidelines

Use KPI cards for summary metrics.

Examples:

• Revenue
• Active Users
• Transactions
• Orders
• Inventory
• Support Tickets

Use Plotly for trend analysis.

Use sidebar filters for exploration.

Preferred layout:

st.set_page_config(
    page_title="Dashboard",
    layout="wide"
)

Violation Response

This project uses Streamlit as the presentation layer.

[Requested technology] is not part of the Streamlit stack.

Here is the equivalent implementation using native Streamlit components.

---

rules.md

Generation Rules for Streamlit Stack

AI Platform Enforcement

The following AI coding environments must follow this skill:

• Replit
• Claude
• Codex
• DeepSeek
• Kimi
• GLM
• Lovable
• Google Antigravity
• Cursor
• Windsurf
• Cline
• Roo

The stack definition is authoritative.

Platform defaults must never override:

techstack.md
rules.md
AGENTS.md

On Project Init (@quickstart)

Generate:

app.py
requirements.txt
pages/
components/
services/
models/
AGENTS.md
techstack.md
rules.md
manifest.json

Default configuration:

st.set_page_config(
    layout="wide",
    page_title="Application",
    initial_sidebar_state="expanded"
)

Platform Specific Overrides

Replit

Override React/Node defaults.

Never generate:

package.json
vite.config.js
next.config.js

Claude

Prefer:

• Streamlit
• Multipage apps
• Modular architecture

Codex

Generate:

• Complete runnable files
• Full implementations

Avoid:

• pseudocode
• TODO placeholders

Lovable

Map:

React Component → Streamlit Component
React State → st.session_state
React Modal → st.dialog()

DeepSeek

Split code into:

pages
services
components

Avoid monolithic files.

Kimi

Priority:

1. Working Code
2. Project Structure
3. Explanation

GLM

Generate complete implementations.

Never abbreviate code.

Google Antigravity

Do not automatically substitute:

• Angular
• Firebase
• GCP-specific patterns

Use:

• Streamlit
• PostgreSQL
• SQLAlchemy

unless explicitly requested.

Chart Rules

Priority:

1. Plotly
2. Altair
3. Native Streamlit

Never use:

• D3.js
• Chart.js
• Recharts

unless explicitly requested.

Form Rules

Always use:

with st.form():

Table Rules

Small datasets:

st.dataframe()

Large datasets:

Pagination pattern.

State Rules

Use:

st.session_state

Never use browser local storage.

Database Rules

Database access belongs only in:

services/repository.py

Never query databases directly inside page files.

AI Application Rules

Use:

st.chat_message()
st.chat_input()

Use streaming responses whenever possible.

File Generation Order

1. app.py
2. models/
3. services/
4. components/
5. pages/
6. requirements.txt
7. AGENTS.md
8. techstack.md
9. rules.md
10. manifest.json

Self-Check Before Responding

✓ Streamlit used
✓ app.py present
✓ requirements.txt present
✓ pages present
✓ services present
✓ components present

✓ No React
✓ No Vue
✓ No Angular
✓ No Next.js
✓ No Node.js
✓ No package.json
✓ No TypeScript
✓ No Vite
✓ No Webpack

✓ SQLAlchemy separated
✓ Business Logic separated
✓ Components reusable
✓ Uses st.session_state

✓ AGENTS.md present
✓ techstack.md present
✓ rules.md present
✓ manifest.json present

If any check fails, regenerate.

---

manifest.json

{
  "id": "streamlit",
  "name": "Streamlit Enterprise Apps",
  "version": "2.0",
  "category": "web",
  "language": "python",
  "framework": "streamlit",
  "architecture": "streamlit-native",
  "quickstartTemplate": "template#01",
  "constraintFile": "techstack.md",
  "rulesFile": "rules.md",
  "agentsFile": "AGENTS.md",
  "database": "sqlalchemy",
  "preferredCharts": [
    "plotly",
    "altair"
  ],
  "preferredState": "st.session_state",
  "supportedAgents": [
    "claude",
    "codex",
    "replit",
    "lovable",
    "deepseek",
    "kimi",
    "glm",
    "google-antigravity",
    "cursor",
    "windsurf",
    "cline",
    "roo"
  ],
  "forbidden": [
    "react",
    "vue",
    "angular",
    "svelte",
    "next.js",
    "nuxt",
    "astro",
    "node.js",
    "npm",
    "pnpm",
    "yarn",
    "bun",
    "typescript",
    "vite",
    "webpack",
    "tailwind",
    "htmx",
    "jinja"
  ]
}

[mrgoonie]

Summary: This is a concrete Streamlit/Python stack proposal, and it fits the broader zero-JS/full-stack Python direction now being split into focused stack lanes.

Decision: accepted / needs design split

Evidence:

• The issue defines a specific Streamlit target, source path, required files, architecture rules, forbidden frontend toolchain, and manifest shape.
• Current main has stack CSVs under src/ui-ux-pro-max/data/stacks/, but no Streamlit stack entry or Streamlit template directory was found.
• Related issues update skills for 100% python, zeroJs/Nodejs frameworks #352, Zero-Js UI Skills - Jinja3+Python Prebuilt Quickstart Templates #377, Zero-Js UI Skills - Reflex+Python Prebuilt Quickstart Templates #378, and Zero-Js UI Skills - Fullstack Jsweb Prebuilt Quickstart Templates #379 already track the broader Python/zero-JS direction plus Jinja/HTMX, Reflex, and JsWeb slices. This is not a duplicate because Streamlit is a distinct app framework lane.
• No existing open/closed PR was found for a Streamlit stack implementation.

Next step: please implement this as a narrow Streamlit lane first: add canonical source-of-truth metadata/rules under src/ui-ux-pro-max/, keep any packaged cli/assets mirrors in sync, and include a simple smoke check proving generated output contains Streamlit files (app.py, pages/, requirements.txt) and does not introduce package.json, Node/npm, React/Vue/Angular/Svelte, or TypeScript/Vite/Webpack scaffolding.

[mrgoonie]

Cron maintainer recheck: issue #380 remains accepted as a distinct Streamlit/Python stack lane. Current main still has stack guidance under src/ui-ux-pro-max/data/stacks/ but no Streamlit entry or Streamlit template directory, and GitHub search still finds no Streamlit implementation PR. Keep the first contribution narrow: canonical source-of-truth Streamlit stack metadata/rules under src/ui-ux-pro-max/, any required mirrored cli/assets output kept in sync, and a smoke command proving generated output contains Streamlit files (app.py, pages/, requirements.txt) without package.json, Node/npm, React/Vue/Angular/Svelte, TypeScript, Vite, or Webpack scaffolding.

[mrgoonie]

Cron maintainer recheck: issue #380 remains accepted as a distinct Streamlit/Python stack lane. Current main still has no Streamlit references under src/ui-ux-pro-max/, cli/assets/, README, or CLAUDE.md; GitHub issue search only finds this issue, PR search finds no Streamlit implementation PR, and commit history has no Streamlit work.

Useful brainstorm / scope framing:

• Underlying problem: users need generated quickstarts that are genuinely Streamlit-native, not React/Node scaffolds with Python notes bolted on.
• Tradeoff: a rich enterprise template set is useful but large; landing a minimal canonical stack lane first reduces review/merge risk and avoids another oversized generated-assets PR.
• Recommended narrow scope: add source-of-truth Streamlit stack metadata/rules under src/ui-ux-pro-max/, mirror packaged cli/assets only where the CLI requires it, and keep examples/templates minimal until the generator path is proven.
• Risk to avoid: shipping a broad template dump without a smoke check will make it hard to prove the CLI actually generates Streamlit output and no forbidden JS toolchain.
• Concrete acceptance evidence needed: a smoke command showing generated output includes app.py, pages/, and requirements.txt, and does not create package.json, Node/npm files, React/Vue/Angular/Svelte code, TypeScript, Vite, or Webpack.