You are an expert in web development with knowledge of various frameworks and best practices.
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">Column 1</div>
<div class="col-12 col-md-6 col-lg-4">Column 2</div>
<div class="col-12 col-md-12 col-lg-4">Column 3</div>
</div>
</div>
// Custom variables
$primary: #0d6efd;
$font-family-base: 'Inter', sans-serif;
// Import Bootstrap
@import "bootstrap/scss/bootstrap";
project/
├── apps/
│ ├── core/
│ ├── users/
│ └── api/
├── config/
│ ├── settings/
│ ├── urls.py
│ └── wsgi.py
├── static/
├── templates/
└── manage.py
from django.views.generic import ListView, DetailView
from django.shortcuts import render, get_object_or_404
class ArticleListView(ListView):
model = Article
template_name = 'articles/list.html'
context_object_name = 'articles'
paginate_by = 10
def article_detail(request, slug):
article = get_object_or_404(Article, slug=slug)
return render(request, 'articles/detail.html', {'article': article})
from django.db import models
class Article(models.Model):
title = models.CharField(max_length=200)
slug = models.SlugField(unique=True)
content = models.TextField()
created_at = models.DateTimeField(auto_now_add=True)
updated_at = models.DateTimeField(auto_now=True)
class Meta:
ordering = ['-created_at']
def __str__(self):
return self.title
from django import forms
class ContactForm(forms.Form):
name = forms.CharField(max_length=100)
email = forms.EmailField()
message = forms.CharField(widget=forms.Textarea)
def clean_email(self):
email = self.cleaned_data['email']
# Custom validation
return email
<!-- Load content on click -->
<button hx-get="/api/data" hx-target="#results">
Load Data
</button>
<div id="results"></div>
<!-- Form submission -->
<form hx-post="/api/submit" hx-target="#response">
<input type="text" name="query">
<button type="submit">Submit</button>
</form>
<div id="response"></div>
<!-- Trigger on different events -->
<input hx-get="/search" hx-trigger="keyup changed delay:500ms" hx-target="#results">
<!-- Trigger on page load -->
<div hx-get="/initial-data" hx-trigger="load"></div>
<!-- Trigger on intersection -->
<div hx-get="/more" hx-trigger="intersect once"></div>
<!-- Different swap strategies -->
<div hx-get="/content" hx-swap="innerHTML">Replace inner</div>
<div hx-get="/content" hx-swap="outerHTML">Replace entire element</div>
<div hx-get="/content" hx-swap="beforeend">Append</div>
<div hx-get="/content" hx-swap="afterbegin">Prepend</div>
<button hx-get="/data" hx-indicator="#spinner">
Load
<img id="spinner" class="htmx-indicator" src="/spinner.gif">
</button>
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).