Zero-Js UI Skills - Reflex+Python Prebuilt Quickstart Templates

[davidjeba]

Skill Directory Structure

src/ui-ux-pro-max/data/stacks/reflex-ui/
├── manifest.json
├── techstack.md
├── rules.md
├── templates/
│ ├── template#12/
│ │ ├── reflex_app.py # Entry point with app = rx.App()
│ │ ├── pages/
│ │ │ ├── index.py # Home page component
│ │ │ ├── about.py
│ │ │ └── dashboard.py
│ │ ├── components/
│ │ │ ├── navbar.py
│ │ │ ├── footer.py
│ │ │ ├── form.py
│ │ │ └── modal.py
│ │ ├── state/
│ │ │ ├── base_state.py # Shared state (auth, nav, toasts)
│ │ │ └── form_state.py # Feature-specific state
│ │ └── requirements.txt
│ └── ...
└── examples/
├── form-validation/
├── dashboard-layout/
├── data-table/
└── modal-dialog/

techstack.md
Tech Stack: Reflex UI + Python (Zero-JS)

ALLOWED
Python 3.11+
Reflex (https://github.com/reflex-dev/reflex)
Reflex rx.* components only (rx.box, rx.flex, rx.text, rx.button, rx.input, rx.select, rx.dialog, rx.drawer, rx.cond, rx.foreach, rx.match, rx.html, etc.)
Reflex rx.State for all state management
Reflex rx.Var for reactive variables
Reflex style prop dicts for styling
Reflex class_name prop for Tailwind utility classes (secondary, when explicitly requested)
Reflex rx.App() routing via app.add_page()
Reflex rx.redirect() for programmatic navigation
Reflex event handlers as State methods
Reflex rx.event and rx.background_task for async/side-effects
Standard Python stdlib (os, pathlib, json, httpx, etc.)
Python-only packages via requirements.txt (SQLAlchemy, pydantic, httpx, etc.)

FORBIDDEN
No HTML files. Zero .html files in the project.
No JavaScript. Zero .js files, zero <script> tags, zero inline JS.
No React, Vue, Svelte, Angular, Astro, Next.js, Nuxt.
No Node.js, npm, yarn, pnpm, bun.
No TypeScript, JSX, TSX files.
No Jinja2, Django templates, Mako, Chameleon.
No HTMX, Alpine.js, Tailwind CDN script tags, Bootstrap CDN.
No package.json, tsconfig.json, vite.config., next.config..
No build tools (Vite, Webpack, esbuild, Turbo).
No index.html entry point — entry point is always a .py file.
No raw CSS files — style via Reflex style prop dicts or class_name.
No flask, fastapi, django in requirements.txt.
No direct manipulation of React internals, hooks, or context.

FILE STRUCTURE (mandatory)
project-root/
├── reflex_app.py # Entry point — app = rx.App(), app.add_page() calls
├── requirements.txt # reflex + Python deps only
├── rxconfig.py # Reflex config (generated by reflex init)
├── pages/
│ ├── index.py # Home page — def index() -> rx.Component
│ ├── about.py
│ └── dashboard.py
├── components/
│ ├── navbar.py # Reusable rx.Component functions
│ ├── footer.py
│ ├── form.py
│ └── modal.py
├── state/
│ ├── base_state.py # rx.State subclass for global state
│ └── form_state.py # rx.State subclass for feature state
└── assets/ # Optional: images, favicon only

CONVENTIONS

• Every page is a Python function returning rx.Component — def index() -> rx.Component:
• Every page must be registered: app.add_page(index, route="/")
• All state lives in rx.State subclasses in state/ directory
• Event handlers are State methods — never standalone functions with side effects
• Styling primary: style={"padding": "1rem", "background_color": "#fff"}
• Styling secondary: class_name="flex items-center gap-4" (only when explicitly requested)
• Layout: use rx.flex() and rx.box() — avoid deprecated rx.hstack/rx.vstack
• Conditional rendering: rx.cond(state.show, component_a, component_b)
• Lists: rx.foreach(state.items, lambda item: rx.text(item))
• Imports: always import state classes, never mutate state outside of event handlers
• All async work: use @rx.background_task or yield pattern in event handlers

VIOLATION RESPONSE
If asked to use any forbidden technology, respond:
"This project uses Reflex UI (pure Python, zero-JS). [Requested tech] is not part of this stack. Here's how to achieve the same result with Reflex:"
Then provide the Reflex rx.* equivalent.

rules.md
Generation Rules for Reflex UI + Python Stack

On project init (@quickstart)
Copy template#12 structure into the user's project directory
Generate techstack.md at project root — this file MUST exist in every project
Ensure reflex_app.py contains app = rx.App() and all app.add_page() calls
Ensure requirements.txt starts with reflex>=0.6.0 — no other web frameworks
Ensure state/base_state.py has at minimum a bare class BaseState(rx.State): for extension
Output a terminal command to run: pip install -r requirements.txt && reflex run

During generation
Every UI element MUST be an rx.* component — never raw HTML strings
Never generate a .html file
Never generate a .js file
Never generate a package.json
If the user says "add a navbar" → generate components/navbar.py with rx.flex() and rx.link()
If the user says "add a modal" → use rx.dialog.root(), rx.dialog.trigger(), rx.dialog.content()
If the user says "add a form" → use rx.input(), rx.select(), rx.text_area() with on_change bound to State setter
If the user says "fetch data" → create a State method with yield or @rx.background_task that sets a rx.Var
If the user says "add animation" → use rx.motion() or CSS transitions via style dict
If the user says "style with Tailwind" → use class_name prop, never a CDN script tag
If the user says "API endpoint" → this is a Reflex app, not Flask/FastAPI — use a State method or explain that Reflex handles this differently via event handlers
If the user says "add a page" → create pages/xxx.py, define def xxx() -> rx.Component, add app.add_page(xxx, route="/xxx") in reflex_app.py

File generation order
state/base_state.py (state foundation — everything depends on it)
state/.py (feature state classes)
components/.py (reusable pieces — depend on state)
pages/*.py (pages compose components)
reflex_app.py (wires pages to app — depends on all pages)
requirements.txt
techstack.md (always last — acts as the lock file)

Self-check before responding

• No .html files generated?
• No .js files generated?
• No package.json generated?
• All UI elements are rx.* components?
• All state lives in rx.State subclasses?
• All event handlers are State methods?
• All pages registered with app.add_page()?
• No flask/fastapi/django in requirements.txt?
• techstack.md present?
• File structure matches mandatory layout?If any check fails, fix it before outputting.

manifest.json
{
"id": "reflex-ui",
"name": "Reflex UI + Python (Zero-JS)",
"category": "web",
"language": "python",
"jsLevel": "zero",
"quickstartTemplate": "template#12",
"constraintFile": "techstack.md",
"rulesFile": "rules.md",
"docs": "https://reflex.dev/docs/",
"github": "https://github.com/reflex-dev/reflex",
"forbidden": [
"react", "vue", "svelte", "angular", "next.js", "astro",
"node.js", "npm", "typescript", "jsx", "vite", "webpack",
"html", ".html files", "jinja2", "django", "flask", "fastapi",
"htmx", "alpine.js", "bootstrap", "package.json",
".js files", ".css files", "<script>", "tailwind cdn"
]
}

[mrgoonie]

Summary: This is a concrete implementation slice for the broader Python/zero-JS stack request, and it is narrow enough to track separately from #352.

Decision: accepted / needs design split

Evidence:

• The issue defines a specific Reflex target with directory layout, required files, allowed/forbidden technologies, generation rules, and a manifest shape.
• Current source stack data under src/ui-ux-pro-max/data/stacks/ does not include a Reflex/Reflex UI stack file or template directory, and repo search found no existing Reflex implementation.
• This is related to update skills for 100% python, zeroJs/Nodejs frameworks #352 and Zero-Js UI Skills - Jinja3+Python Prebuilt Quickstart Templates #377, but not a duplicate: update skills for 100% python, zeroJs/Nodejs frameworks #352 is the parent zero-JS/Python bucket, Zero-Js UI Skills - Jinja3+Python Prebuilt Quickstart Templates #377 is Jinja/HTMX, and this issue is specifically Reflex.

Next step: please implement this as a narrow Reflex lane first: add the 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 no package.json, .js, .jsx, .ts, .tsx, or .html files and includes reflex_app.py, rxconfig.py, requirements.txt, and techstack.md.

[mrgoonie]

Cron maintainer recheck: issue #378 remains accepted as a focused Reflex/Python zero-JS stack lane. Current main still has stack CSVs under src/ui-ux-pro-max/data/stacks/ but no Reflex/Reflex UI stack entry or template directory; repo grep only finds unrelated product copy, GitHub PR search finds no Reflex implementation PR, and issue #352 remains the broader parent bucket rather than a duplicate. Keep the first contribution narrow: add canonical source-of-truth Reflex stack metadata/rules under src/ui-ux-pro-max/, keep any packaged cli/assets mirrors in sync, and include a smoke check proving generated output contains reflex_app.py, rxconfig.py, requirements.txt, and techstack.md while generating no package.json, .js, .jsx, .ts, .tsx, or .html files.

[mrgoonie]

Cron maintainer recheck: issue #378 is still a valid focused Reflex/Python zero-JS stack lane, and current main still has no Reflex stack implementation. Evidence checked: src/ui-ux-pro-max/data/stacks/ only contains existing CSV stack files (nextjs, shadcn, laravel, threejs, nuxt-ui, react-native, astro, nuxtjs, vue, javafx, react, jetpack-compose, flutter, swiftui, html-tailwind, angular, svelte); repo grep only finds the word "reflex" as a generic product keyword in products CSVs; GitHub PR search for Reflex returns no implementation PR; issue search only finds #378 plus parent/related zero-JS stack issues #352/#379/#380; commit history has no Reflex work.nnUseful brainstorm / scope framing:n- Underlying problem: users want a Python-native UI quickstart where the generated project does not silently fall back to React/Node/HTML files.n- Tradeoff: Reflex is a distinct framework lane, but a full template library is too large for first review; a minimal canonical metadata/rules + one smokeable template is safer.n- Recommended narrow scope: add the source-of-truth Reflex 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.n- Risk to avoid: committing a broad template dump without reproducible generation evidence, or adding Python notes while still generating JS/HTML/package.json artifacts.n- Concrete acceptance evidence needed: a smoke command proving generated output includes reflex_app.py, rxconfig.py, requirements.txt, and techstack.md, while creating no package.json, .js, .jsx, .ts, .tsx, or .html files.

[clark-cant]

Cron maintainer recheck: issue #378 remains accepted as a focused Reflex + Python zero-JS stack lane. Current main still has no Reflex references under src/ui-ux-pro-max/, cli/assets/, README, or CLAUDE.md; stack source data is still CSV-backed under src/ui-ux-pro-max/data/stacks/. GitHub PR search for Reflex returns no implementation PR for this specific stack preset.

Brainstorm / scope framing:

• Underlying problem: users need a Python-only UI framework preset where Claude generates Reflex components and pages without drifting into React, Node.js, package.json, JSX/TSX, or JavaScript build toolchains.
• Tradeoff: Reflex has its own component model (rx.Component subclasses), state management (rx.State), and build pipeline (reflex init, reflex run) that differs significantly from Jinja/HTMX or Streamlit. The preset must encode Reflex-specific conventions, not generic Python web patterns.
• Recommended narrow scope: add source-of-truth Reflex stack metadata/rules under src/ui-ux-pro-max/, mirror packaged cli/assets only where the CLI requires it, and include one minimal Reflex app template (rxconfig.py, main page, one component) before expanding examples.
• Risk to avoid: shipping broad templates without proving the generated output stays pure Python/Reflex with no JavaScript toolchain, and without respecting Reflex's own build pipeline (which internally handles JS bundling — the user never touches npm).
• Concrete acceptance evidence needed: a smoke command proving generated output includes rxconfig.py, Python source files with import reflex as rx, no package.json, no JS/JSX/TSX files, no Vite/Webpack/npm toolchain in the user-facing project structure.

This overlaps with parent issue #352 at the theme level and sibling issues #377 (Jinja3), #379 (JsWeb), #380 (Streamlit), but it is not a duplicate because it defines a concrete Reflex/Python slice.

Keep the first contribution narrow: add canonical source-of-truth stack metadata/rules under src/ui-ux-pro-max/, mirror packaged assets only if the CLI requires it, and include one minimal Reflex app path before expanding examples.

Posted by github-maintain cron at 2026-06-26T22:00:00Z