Htmx Basic

Cursor-Grundregel für HTMX-Projekte: serverseitige Partials statt eigenem JS-Framework.

Original-Beschreibung der Autoren: Cursor rules for HTMX development with basic setup.

Die Regel

---
description: "Cursor rules for HTMX development with basic setup."
globs: **/*
alwaysApply: false
---
// HTMX Basic Setup .cursorrules

// HTMX best practices

const htmxBestPractices = [
  "Use hx-get for GET requests",
  "Implement hx-post for POST requests",
  "Utilize hx-trigger for custom events",
  "Use hx-swap to control how content is swapped",
  "Implement hx-target to specify where to swap content",
  "Utilize hx-indicator for loading indicators",
];

// Folder structure

const folderStructure = `
src/
  templates/
  static/
    css/
    js/
  app.py
`;

// Additional instructions

const additionalInstructions = `
1. Use semantic HTML5 elements
2. Implement proper CSRF protection
3. Utilize HTMX extensions when needed
4. Use hx-boost for full page navigation
5. Implement proper error handling
6. Follow progressive enhancement principles
7. Use server-side templating (e.g., Jinja2, Handlebars)
`;

So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter .cursor/rules/ ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne .cursorrules-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den ----Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.

Im Detail

Grundregel für Projekte mit HTMX, dem Ansatz, dynamische Interaktionen per HTML-Attributen statt eigenem JavaScript-Framework umzusetzen. Bringt Cursor bei, serverseitig gerenderte Partials, hx-get/hx-post-Muster und minimalen Client-JS-Einsatz konsequent einzuhalten. Passt zu Backend-lastigen Teams, die auf ein schweres SPA-Framework verzichten wollen. Für konkrete Backend-Kopplung (Django, Flask, Go) gibt es spezifischere Varianten dieser Regel.

Praxis-Tipp

Als Basis-Regel nutzen, wenn kein spezifisches Backend-Framework vorgegeben ist, z. B. „Erstelle eine HTMX-Suche mit Live-Ergebnissen“ — Cursor bleibt dann bei serverseitigem Rendering statt JS-SPA-Logik vorzuschlagen.

Lizenz & Quelle

• Lizenz: CC0 1.0
• Quelle: PatrickJS/awesome-cursorrules (GitHub)

Lade …