.cursorrules Basic Htmx

by @PatrickJS

// 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)
`;

HTMX Development Toolkit

A set of guidelines and best practices for building efficient and secure web applications using HTMX.

HTMX Best Practices

Implement hx-get and hx-post for GET and POST requests.
Use hx-trigger for custom events and hx-swap for content swapping.
Utilize hx-target and hx-indicator for precise content updates and loading indicators.

Folder Structure and Organization

Organize code into a structured directory:

textsrc/
  templates/
  static/
    css/
    js/
  app.py

Additional Development Guidelines

Use semantic HTML5 elements for clarity and accessibility.
Implement proper CSRF protection for security.
Leverage HTMX extensions when needed.
Use hx-boost for full page navigation.
Follow progressive enhancement principles for robustness.

Key Features

Efficient Request Handling: Streamline GET and POST requests with HTMX attributes.
Dynamic Content Swapping: Control how content is updated with hx-swap and hx-target.
Security and Accessibility: Ensure robust security with CSRF protection and semantic HTML.

Overview of .cursorrules prompt

This prompt outlines guidelines and best practices for developing applications using HTMX, a library that enhances static HTML with dynamic capabilities. It provides a structured approach to implementing HTMX, focusing on efficient request handling, content swapping, and error management. Additionally, it emphasizes the importance of semantic HTML, proper security measures like CSRF protection, and progressive enhancement principles to ensure robust and maintainable web applications. By following these guidelines, developers can create interactive web pages that are both user-friendly and secure.

Updated: March 15, 2025

This prompt provides guidelines and best practices for developing efficient and secure web applications using HTMX, emphasizing semantic HTML, proper security measures, and dynamic content handling.

Usefull for: