Zero-Js UI Skills - Fullstack Jsweb Prebuilt Quickstart Templates

[davidjeba]

# 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

1. app.py
2. models.py
3. templates/base.html
4. templates/partials/*
5. templates/*
6. requirements.txt
7. migrations/
8. techstack.md
9. rules.md
10. 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.

[mrgoonie]

Summary: This is a concrete zero-JS/full-stack Python stack proposal, but it overlaps the newly split zero-JS stack lanes and needs one naming/scope clarification before implementation.nnDecision: accepted / needs design clarificationnnEvidence:n- The issue gives a specific JsWeb target, source path, required files, generation rules, forbidden frontend toolchain, and manifest shape.n- Existing related issues #352, #377, and #378 already track the broader Python/zero-JS direction plus Jinja/HTMX and Reflex slices. This issue is not a duplicate because it proposes a distinct JsWeb framework lane.n- No existing open/closed PR was found for a JsWeb stack implementation.nnNext step: please narrow the first PR to the canonical source-of-truth files under src/ui-ux-pro-max/data/stacks/jsweb/ plus any required mirrored cli/assets output. Also clarify whether "JsWeb" is a specific installable Python framework/package name or a repo-local stack label; if it is a real dependency, include the exact package name/version in requirements.txt and a smoke command that proves the quickstart runs without Node/npm/package.json/JSX/TSX.

[mrgoonie]

Cron maintainer follow-up: issue #379 remains accepted, but it is still blocked on the naming/dependency clarification requested earlier. Please clarify whether \JsWeb\ is a real installable Python package/framework (with exact package name/version for `requirements.txt`) or a repo-local stack label for Jinja/HTMX-style server rendering. Without that, implementation risks adding templates for a non-resolvable dependency. Keep the first PR narrow to `src/ui-ux-pro-max/data/stacks/jsweb/` plus any required mirrored packaged assets and include a smoke command proving no Node/npm/package.json/JSX/TSX toolchain is generated.

[mrgoonie]

Cron maintainer recheck: issue #379 remains accepted but blocked on the same naming/dependency clarification. Current main still has no JsWeb implementation under src/ui-ux-pro-max/ or cli/assets/; repo search only finds unrelated product keywords, PR search has no JsWeb implementation, and commit history has no JsWeb work.nnUseful brainstorm / scope framing:n- Underlying problem: users want a Python/server-rendered quickstart lane that avoids React/Node/SPAs, but "JsWeb" is not defined enough to implement safely.n- Tradeoff: treating JsWeb as a real framework gives a cleaner stack lane if the dependency exists; treating it as a repo-local label duplicates the Jinja/HTMX lane (#377) and risks confusion.n- Recommended narrow scope: first clarify whether JsWeb is an installable Python package/framework, including exact package name/version for requirements.txt, or rename the lane to a repo-local Jinja/HTMX-style stack.n- Risk to avoid: adding templates with a non-resolvable dependency or a stack name users cannot install.n- Concrete acceptance evidence needed: exact dependency identity, source-of-truth files under src/ui-ux-pro-max/data/stacks/jsweb/, required packaged cli/assets mirrors kept in sync, and a smoke command proving no Node/npm/package.json/JSX/TSX toolchain is generated.

[mrgoonie]

Cron maintainer recheck: keeping issue #379 accepted but still blocked on the naming/dependency clarification. Current main still has no JsWeb references under src/ui-ux-pro-max/, cli/assets/, README, or CLAUDE.md; repo search and commit history find no JsWeb work, and GitHub search only finds this issue plus the broader zero-JS issues (#352, #377, #378, #380).nnUseful brainstorm / scope framing:n- Underlying problem: users want a Python/server-rendered quickstart lane that avoids React/Node/SPAs.n- Tradeoff: if JsWeb is a real installable framework, it can be a distinct lane; if it is only a repo-local label for Jinja/HTMX-style rendering, it materially overlaps #377 and will confuse implementers.n- Recommended narrow scope: first clarify the dependency identity: exact package name/version for requirements.txt, or rename/reframe this as a Jinja/HTMX-style stack aligned with #377.n- Risk to avoid: shipping templates that reference a non-resolvable framework/package or silently duplicate the Jinja lane.n- Concrete acceptance evidence needed: source-of-truth files under src/ui-ux-pro-max/data/stacks/jsweb/, any required cli/assets mirrors kept in sync, and a smoke command proving generated output has no Node/npm/package.json/JSX/TSX/Vite/Webpack toolchain.