Update AGENTS.md with frontend guidelines

- Add Django extensions (sorl-thumbnail, Font Awesome, jQuery)
- Add Frontend/CSS Guidelines section
- Document design system (colors, components, typography, icons)
- Add CSS guidelines and naming conventions
- Document jQuery usage patterns
- Add available pages/views table
- Add template best practices section
- Update Common Pitfalls for templates directory structure
- Create backup of original AGENTS.md

AGENTS.md

@@ -205,6 +205,136 @@ The project includes these pre-installed packages:
 - **django-nested-admin**: Nested inline forms in admin
 - **django-nested-inline**: Additional nested inline support
 - **django-revproxy**: Reverse proxy functionality
+- **sorl-thumbnail**: Image thumbnailing
+- **Font Awesome**: Icon library (loaded via CDN)
+- **jQuery**: JavaScript library (loaded via CDN)
+
+## Frontend/CSS Guidelines
+
+### Base Template
+
+The project uses a base template system at `labhelper/templates/base.html`. All page templates should extend this base:
+
+```django
+{% extends "base.html" %}
+
+{% block title %}Page Title - LabHelper{% endblock %}
+
+{% block page_header %}
+<!-- Optional page header with breadcrumbs -->
+{% endblock %}
+
+{% block content %}
+<!-- Main page content -->
+{% endblock %}
+
+{% block extra_css %}{% endblock %}
+{% block extra_js %}{% endblock %}
+```
+
+### Design System
+
+**Color Scheme:**
+- Primary gradient: `#667eea` (purple) to `#764ba2` (purple-blue)
+- Success: Green gradient
+- Error: Red gradient
+- Background: Light gray `#f5f5f5` with gradient overlays
+- Cards: White with subtle shadows
+
+**Components:**
+- **Navigation**: Glassmorphism effect with blur backdrop
+- **Buttons**: Gradient backgrounds with hover lift effect
+- **Cards**: White with rounded corners and box shadows
+- **Tables**: Gradient headers with hover row effects
+- **Alerts**: Gradient backgrounds with icons
+- **Form Inputs**: Focused states with color transitions
+
+**Typography:**
+- System fonts: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif`
+- Headings: Bold, colored
+- Body: Regular, dark gray
+
+**Icons:**
+- Font Awesome 6.5.1 (CDN)
+- Use semantic icons for actions
+- Color: Match context or inherit from parent
+
+**Responsive Design:**
+- Mobile-first approach
+- Grid layouts with `repeat(auto-fill, minmax(250px, 1fr))`
+- Flexbox for component layouts
+- Breakpoints handled by grid and flex-wrap
+
+### CSS Guidelines
+
+**Naming:**
+- Use descriptive class names
+- BEM pattern encouraged for complex components
+- Inline styles allowed for template-specific styling
+
+**Styles:**
+- Use base template styles when possible
+- Template-specific styles in `{% block extra_css %}`
+- JavaScript in `{% block extra_js %}`
+- Smooth transitions (0.2s - 0.3s)
+- Hover effects with transform and box-shadow
+
+**jQuery Usage:**
+- Loaded in base template
+- Use for interactive elements (toggles, hovers)
+- Event delegation for dynamically added elements
+- Focus/blur events for form inputs
+
+### Available Pages/Views
+
+| View Name | URL Pattern | Description |
+|-----------|--------------|-------------|
+| `index` | `/` | Home page with boxes grid and thing types tree |
+| `box_detail` | `/box/<str:box_id>/` | List items in a specific box |
+| `thing_detail` | `/thing/<int:thing_id>/` | Thing details with move-to-box form |
+| `thing_type_detail` | `/thing-type/<int:type_id>/` | Thing type hierarchy and items |
+| `add_things` | `/box/<str:box_id>/add/` | Form to add/edit items in a box |
+| `search` | `/search/` | Search page with AJAX autocomplete |
+| `search_api` | `/search/api/` | AJAX endpoint for search results |
+
+### Template Best Practices
+
+1. **Always extend base template**
+   ```django
+   {% extends "base.html" %}
+   ```
+
+2. **Use block system for content injection**
+   - `title`: Page title tag
+   - `page_header`: Page header with breadcrumbs
+   - `content`: Main page content
+   - `extra_css`: Additional styles
+   - `extra_js`: Additional JavaScript
+
+3. **Load required template tags**
+   ```django
+   {% load static %}
+   {% load mptt_tags %}
+   {% load thumbnail %}
+   ```
+
+4. **Use URL names for links**
+   ```django
+   <a href="{% url 'box_detail' box.id %}">
+   ```
+
+5. **Use icons with Font Awesome**
+   ```django
+   <i class="fas fa-box"></i>
+   ```
+
+6. **Add breadcrumbs for navigation**
+   ```django
+   <p class="breadcrumb">
+       <a href="/"><i class="fas fa-home"></i> Home</a> / 
+       <a href="/box/{{ box.id }}/"><i class="fas fa-box"></i> Box {{ box.id }}</a>
+   </p>
+   ```
 
 ## Testing Guidelines
 
@@ -244,6 +374,7 @@ Per `.gitignore`:
 1. **Always activate venv**: `source .venv/bin/activate`
 2. **Run migrations after model changes**: `makemigrations` then `migrate`
 3. **Add new apps to INSTALLED_APPS** in `settings.py`
+4. **Templates in labhelper/templates/**: The base template and shared templates are in `labhelper/templates/`. App-specific templates remain in `app_name/templates/`.
 4. **Use get_object_or_404** instead of bare `.get()` calls
 5. **Never commit SECRET_KEY** - use environment variables in production