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

[davidjeba]

Skill Directory Structure

src/ui-ux-pro-max/data/stacks/jinja3-htmx/
├── manifest.json
├── techstack.md ← hard constraint file
├── rules.md ← what Claude must / must not do
├── templates/
│ ├── template#11/
│ │ ├── base.html
│ │ ├── index.html
│ │ ├── partials/
│ │ │ ├── nav.html
│ │ │ ├── footer.html
│ │ │ └── form.html
│ │ ├── app.py
│ │ └── requirements.txt
│ └── ...
└── examples/
├── form-validation/
├── dashboard/
└── modal-dialog/

techstack.md — This is the critical piece
Tech Stack: Jinja3 + HTMX + Python (Zero-JS)

ALLOWED
Python 3.11+ (Flask or FastAPI)
Jinja3 templating (https://devdocs.io/jinja~3.0/)
HTMX 1.9+ via CDN only
Tailwind CSS via CDN only
HTML5 semantic elements

FORBIDDEN
No JavaScript. Zero <script> blocks except the HTMX CDN load.
No React, Vue, Svelte, Angular, Astro, Next.js, Nuxt.
No Node.js, npm, yarn, pnpm, bun.
No TypeScript, JSX, TSX files.
No JSON API responses — all responses must be HTML fragments.
No build tools (Vite, Webpack, esbuild, Turbo).
No client-side state management (no Redux, Zustand, Pinia).
No WebSocket libraries (Socket.io) — use HTMX SSE/WS extensions only if explicitly requested.

FILE STRUCTURE (mandatory)

project-root/
├── app.py # Entry point — Flask/FastAPI
├── requirements.txt # ONLY Python deps
├── templates/
│ ├── base.html # Layout shell (head, nav, footer, htmx script)
│ ├── index.html # Extends base.html
│ └── partials/ # HTMX response fragments
│ ├── form.html
│ ├── list.html
│ └── notification.html
└── static/
└── (optional images/favicon only — no JS, no CSS files)

CONVENTIONS

• All interactivity: HTMX attributes (hx-get, hx-post, hx-target, hx-swap, hx-trigger)
• HTMX responses: return render_template("partials/xxx.html") — never redirect, never JSON
• Styling: Tailwind utility classes directly in HTML — no separate CSS files
• Forms: hx-post with hx-target="#result" pattern — never standard form submission
• Validation errors: return the form partial with error messages inline
• Navigation: full page loads via <a href="/"> — HTMX only for dynamic content areas

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

rules.md — Claude behavior rules

Generation Rules for Jinja3 + HTMX Stack

On project init (@quickstart)
Copy template#11 structure into the user's project directory
Generate techstack.md at project root — this file MUST exist in every project
Ensure base.html contains exactly one script tag: HTMX CDN
Ensure requirements.txt contains only: flask, jinja2 (or fastapi, uvicorn, jinja2)
Output a terminal command to run: pip install -r requirements.txt && python app.py

During generation
Every HTML file MUST extend base.html or be a partial in templates/partials/
Never generate a .js file
Never generate a package.json
If the user says "add a modal" → generate a partial with HTMX hx-get to load it
If the user says "add animation" → use Tailwind transition-* classes only
If the user says "fetch data" → use HTMX hx-get with hx-trigger="load" on a container
If the user says "API" → respond with an HTMX endpoint returning HTML, not JSON

File generation order
app.py (routes first — defines what templates exist)
templates/base.html (layout shell)
templates/partials/.html (fragments)
templates/.html (pages that extend base)
requirements.txt
techstack.md (always last — acts as the lock file)

Self-check before responding

• No .js files generated?
• No package.json generated?
• No JSX/TSX anywhere?
• All HTMX responses return HTML fragments?
• techstack.md present?
• All templates extend base.html or live in partials/?If any check fails, fix it before outputting.

manifest.json
{
"id": "jinja3-htmx",
"name": "Jinja3 + HTMX (Zero-JS)",
"category": "web",
"language": "python",
"jsLevel": "zero",
"quickstartTemplate": "template#11",
"constraintFile": "techstack.md",
"rulesFile": "rules.md",
"devDocs": "https://devdocs.io/jinja~3.0/",
"htmxDocs": "https://htmx.org/docs/",
"forbidden": [
"react", "vue", "svelte", "angular", "next.js", "astro",
"node.js", "npm", "typescript", "jsx", "vite", "webpack",
"socket.io", "redux", "zustand"
]
}

Why techstack.md at project root is the key move
Claude reads files in context. If techstack.md sits in the project root:

It gets picked up automatically on every subsequent prompt — no need to restate constraints
It survives across sessions — user doesn't need to re-paste "remember, no JS"
It acts as a hard wall — the VIOLATION RESPONSE section gives Claude an exact script to follow when pushed
It's human-readable — developers opening the project immediately see what's allowed
Without this file, the skill is just a suggestion. With it, the skill is a constraint.

[mrgoonie]

Summary: This is a concrete stack/preset proposal for a Python + Jinja + HTMX zero-JS quickstart, and it fits the existing stack-coverage direction.

Decision: accepted / needs design split

Evidence:

• The issue provides a specific target stack, directory layout, constraint file, behavior rules, manifest shape, and quickstart expectations.
• Existing open issue update skills for 100% python, zeroJs/Nodejs frameworks #352 already asks for 100% Python / zero-JS stack coverage, including a Jinja2/HTMX-style lane, so this should be treated as a focused implementation slice rather than a duplicate to close.
• No separate existing PR was found for Jinja/HTMX quickstart templates.

Next step: turn this into a narrow PR that adds the stack metadata/rules first, then the prebuilt template files. Acceptance bar should include source-of-truth files under src/, mirrored package assets if the repo still ships those, and a simple smoke test proving the generated project has no package.json/.js/JSX/TSX and returns HTML fragments for HTMX endpoints.

[mrgoonie]

Cron maintainer recheck: issue #377 remains accepted as a focused Jinja + HTMX zero-JS Python stack lane. Current main still has stack data only for existing CSV-backed stacks under src/ui-ux-pro-max/data/stacks/; there is no Jinja/HTMX stack entry, no jinja3-htmx template directory, no matching commit history, and GitHub search found no implementation PR. This overlaps with parent issue #352 at the theme level, but it is not a duplicate because it defines a concrete Jinja/HTMX 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 repo still requires them, and include a smoke check proving generated output has Python/Jinja/HTMX files, no package.json, no JS/JSX/TSX build toolchain, and HTMX endpoints return HTML fragments rather than JSON.

[mrgoonie]

Cron maintainer recheck: issue #377 remains accepted as a focused Jinja + HTMX zero-JS Python stack lane. Current main still has no Jinja/HTMX 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 Jinja HTMX returns no implementation PR, and issue search only finds this slice plus related zero-JS lanes #378/#379/#380.

Useful brainstorm / scope framing:

• Underlying problem: users need a Python/server-rendered quickstart where Claude does not drift back into React, Node, package.json, JSX/TSX, or JSON API responses.
• Tradeoff: a full prebuilt template library is valuable but too large for the first review; a minimal canonical stack lane with one smokeable template is safer and easier to merge.
• Recommended narrow scope: add source-of-truth Jinja/HTMX stack metadata/rules under src/ui-ux-pro-max/, mirror packaged cli/assets only where the CLI requires it, and include one minimal Flask/FastAPI template path before expanding examples.
• Risk to avoid: shipping broad templates without proving the generated output stays zero-JS and returns HTML fragments for HTMX interactions.
• Concrete acceptance evidence needed: a smoke command proving generated output includes app.py, requirements.txt, templates/base.html, and templates/partials/*, with no package.json, JS/JSX/TSX files, Vite/Webpack/npm toolchain, and HTMX endpoints returning HTML fragments rather than JSON.