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

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.

Start in src/ui-ux-pro-max/data/stacks/jinja3-htmx/ and use manifest.json, techstack.md, rules.md, template#11, and the listed examples as the required structure. Check that app.py, the templates, requirements.txt, and project-root techstack.md follow the stated Jinja3, HTMX, Python, and zero-JS constraints. Done means the required files and self-check items are all satisfied.