#379 Zero-Js UI Skills - Fullstack Jsweb Prebuilt Quickstart Templates · ui-ux-pro-max-skill

# Skill Directory Structure

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

├── manifest.json ├── techstack.md ← hard constraint file ├── rules.md ← what Claude must / must not do ├── templates/ │ ├── template#01/ │ │ ├── app.py │ │ ├── requirements.txt │ │ ├── models.py │ │ ├── templates/ │ │ │ ├── base.html │ │ │ ├── index.html │ │ │ └── partials/ │ │ │ ├── nav.html │ │ │ ├── footer.html │ │ │ ├── form.html │ │ │ └── table.html │ │ └── static/ │ └── ... └── examples/ ├── crud/ ├── dashboard/ ├── admin-panel/ ├── form-validation/ ├── file-upload/ └── modal-dialog/

# techstack.md

Tech Stack: JsWeb + Jinja Templates + HTMX-style Server Rendering (Zero-SPA)

ALLOWED

Python 3.11+ JsWeb Framework Jinja Templates SQLAlchemy ORM Alembic Migrations HTMX Attributes Tailwind CSS via CDN OpenAPI Documentation Server Side Rendering (SSR) HTML Fragment Responses ASGI Deployment

FORBIDDEN

No React No Vue No Angular No Svelte No Next.js No Nuxt No Astro No Node.js No npm No yarn No pnpm No bun No TypeScript No JSX No TSX No Vite No Webpack No esbuild No Turbo No Redux No Zustand No Pinia No JSON APIs for UI rendering No SPA architecture No client-side routing No frontend build pipelines

ARCHITECTURE PRINCIPLE

The server owns the UI.

Pages are rendered on the server. Interactions return HTML fragments. Business logic stays in Python. Database access stays in Python. Templates remain the source of truth.

FILE STRUCTURE (MANDATORY)

project-root/

├── app.py ├── models.py ├── requirements.txt ├── templates/ │ ├── base.html │ ├── index.html │ └── partials/ │ ├── form.html │ ├── table.html │ ├── notification.html │ └── modal.html ├── static/ │ └── images/ └── migrations/

CONVENTIONS

Routes return rendered templates. Forms submit to Python endpoints. Validation errors render inline templates. Tables refresh using HTML partials. Modals load from server-rendered fragments. Admin interfaces use JsWeb Admin where applicable. Use SQLAlchemy models exclusively. Use Alembic for schema migrations.

RESPONSE STRATEGY

Full page:

return TemplateResponse("index.html")

Partial update:

return TemplateResponse("partials/table.html")

Validation error:

return TemplateResponse( "partials/form.html", errors=errors )

VIOLATION RESPONSE

This project uses JsWeb with server-rendered templates. [Requested technology] is not part of the JsWeb stack. Here's the equivalent implementation using JsWeb templates, server-rendered fragments, and Python endpoints.

# rules.md

Generation Rules for JsWeb Stack

ON PROJECT INIT (@quickstart)

Copy template#01 structure. Generate techstack.md. Generate rules.md. Generate manifest.json. Generate requirements.txt. Generate starter SQLAlchemy model. Generate starter migration folder.

Ensure:

app.py exists
templates/base.html exists
templates/index.html exists
templates/partials exists
requirements.txt contains only Python dependencies

Output:

pip install -r requirements.txt python app.py

DURING GENERATION

Always use JsWeb routing. Always use SQLAlchemy models. Always use server-rendered templates. Always use partial templates for dynamic updates.

Never generate:

React
Vue
Angular
Svelte
package.json
vite.config.js
webpack.config.js
tsconfig.json
.tsx files
.jsx files

IF USER SAYS

"Add modal"

Generate:

templates/partials/modal.html

and a route returning that fragment.

"Add dashboard"

Generate:

dashboard route
dashboard template
reusable widgets

"Add CRUD"

Generate:

model
migration
create route
edit route
delete route
list partial

"Add API"

Generate:

Server-side route and rendered HTML response.

Do not default to JSON.

FILE GENERATION ORDER

app.py
models.py
templates/base.html
templates/partials/*
templates/*
requirements.txt
migrations/
techstack.md
rules.md
manifest.json

SELF-CHECK BEFORE RESPONDING

✓ No React generated ✓ No Vue generated ✓ No Angular generated ✓ No Node generated ✓ No package.json generated ✓ No Vite generated ✓ No TSX generated ✓ No JSX generated ✓ Uses JsWeb routes ✓ Uses SQLAlchemy ✓ Uses server-rendered templates ✓ techstack.md present ✓ rules.md present ✓ manifest.json present

If any check fails, regenerate before responding.

# manifest.json

{ "id": "jsweb", "name": "JsWeb Full Stack Python", "category": "web", "language": "python", "architecture": "server-rendered", "framework": "jsweb", "quickstartTemplate": "template#01", "constraintFile": "techstack.md", "rulesFile": "rules.md", "orm": "sqlalchemy", "migrationTool": "alembic", "rendering": "jinja", "apiStyle": "html-first", "forbidden": [ "react", "vue", "svelte", "angular", "next.js", "nuxt", "astro", "node.js", "npm", "typescript", "jsx", "tsx", "vite", "webpack", "redux", "zustand", "pinia" ] }

This skill enforces:

JsWeb routing conventions
SQLAlchemy-first data access
Alembic migrations
Built-in admin generation
Server-rendered HTML fragments
Python-only architecture
No frontend toolchain
No SPA patterns

This effectively turns JsWeb into a "Django-like batteries included, FastAPI-like async, HTMX-style rendering" constrained development environment that Claude can consistently follow across sessions.