Frontend#htmx#basic
Htmx Basic
Cursor rules for HTMX development with basic setup.
Use it with Cursor, or export as AGENTS.md / CLAUDE.md for other AI coding agents — pick a format below.
// 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)
`;How to use: save the file at your project root (e.g.
.cursorrules or AGENTS.md) and your AI editor picks it up automatically.Related rules
Frontend→
Next.js
Next.js with TypeScript and Tailwind UI best practices
#nextjs
Frontend→
Next.js App Router
Cursor rules for Next.js development with App Router integration.
#nextjs#app#router
Frontend→
Next.js Material UI Tailwind Cssmpt
Cursor rules for Next.js development with Material UI and Tailwind CSS integration.
#nextjs#material#ui#tailwind