htmx basic
via PatrickJS/awesome-cursorrules
Essential HTMX patterns and setup for interactive web development without full page reloads.
What is htmx basic?
This rule provides foundational HTMX development practices, including HTTP verb usage, content swapping strategies, and folder organization. Use it when building dynamic web applications with HTMX attributes and server-side templating.
- Use hx-get, hx-post, and hx-trigger for HTTP requests and custom events
- Control content swapping with hx-swap and hx-target attributes
- Implement loading indicators with hx-indicator
- Organize templates and static assets in a standard folder structure
- Apply semantic HTML5 with CSRF protection and progressive enhancement
- Leverage server-side templating engines like Jinja2 or Handlebars
Applies to
File patterns this rule matches.
Rule definition (reference)
Source of truth, from the repository.
// 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 = `
- Use semantic HTML5 elements
- Implement proper CSRF protection
- Utilize HTMX extensions when needed
- Use hx-boost for full page navigation
- Implement proper error handling
- Follow progressive enhancement principles
- Use server-side templating (e.g., Jinja2, Handlebars) `;
Related rules
Senior full-stack TypeScript, React, Node.js guidance with clean architecture, testing, and WHY-oriented reasoning.
Quantitative factor research skills for designing, evaluating, and mining alpha factors in equities markets.
Android development with Jetpack Compose, clean architecture, and Material Design 3.
Angular development with Novo Elements UI library using standalone components.
Expert Angular 18 + TypeScript development with Jest, emphasizing clean code and performance.
Manage Kubernetes clusters, add-ons, stacks, and credentials via the Ankra CLI platform.