#380 Zero-Js UI Skills - Streamlit.io Prebuilt Quickstart Templates · ui-ux-pro-max-skill

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:

Plotly
Altair
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"
  ]
}