All databases

Cursor rule

Htmx Basic Cursorrules Prompt File

Cursor rules for HTMX development with basic setup.

HTMX best practices

js
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

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

Additional instructions

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

More Frontend rules

Frequently asked questions

What is the Htmx Basic Cursorrules Prompt File Cursor rule?

Cursor rules for HTMX development with basic setup. It is a Frontend rule, stored as htmx-basic-cursorrules-prompt-file.mdc.

How do I use the Htmx Basic Cursorrules Prompt File rule in Cursor?

Copy the rule from this page and save it as htmx-basic-cursorrules-prompt-file.mdc in your project's .cursor/rules folder, or paste it into Cursor's project rules settings.