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

Diese Grundregel richtet die KI auf den HTMX-Ansatz aus: Statt eines eigenen JavaScript-Frameworks liefert der Server direkt HTML-Partials, die HTMX per Attributen wie hx-get, hx-post oder hx-swap ins DOM einfügt. Die Regel sorgt dafür, dass generierter Code diesem Muster folgt, statt versehentlich auf React- oder Fetch/JSON-Patterns umzuschwenken. Praktisch für Entwickler, die Interaktivität mit minimalem JS-Anteil und serverseitiger Logik umsetzen wollen — etwa für Admin-Oberflächen oder klassische Webanwendungen. Wer stark clientseitigen Zustand oder komplexe Offline-Fähigkeiten braucht, ist mit einem SPA-Framework besser bedient.

Praxis-Tipp

Für ein Live-Suchfeld reicht ein hx-get mit hx-trigger=“keyup changed delay:300ms” — die KI ergänzt dazu passend Server-Route und Partial-Template.

Lizenz & Quelle

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

Lade …