UI Agent Docs

This repository contains markdown documentation for web UI frameworks in a format optimized for AI agents.

Available Frameworks

Crystal UI

Crystal UI Components Documentation

Crystal UI is a lightweight CSS library for building modern web interfaces with pure HTML and CSS. No React or JavaScript framework required.

Features:

• ✨ Pure CSS - No JavaScript required
• 🎨 Modern Design - Beautiful, accessible components
• 📦 Lightweight - Single CSS file
• 🌓 Theming - Built-in light and dark theme support
• 📱 Responsive - Mobile-first design

Components included:

• Accordion, Alert, Alert Dialog, Badge, Breadcrumb
• Button, Button Group, Calendar, Card, Checkbox
• Combobox, Command, Data Table, Date Picker, Dialog
• Empty, Hover Card, Input, Input Group, Input OTP
• Item, Label, Menubar, Navigation Menu, Pagination
• Scroll Area, Select, Sonner (Toast), Spinner, Switch
• Table, Tabs, Textarea, Toggle Group, Typography

Source: GitHub Repository | Official Documentation

---

InteractJS

InteractJS Documentation

InteractJS is a JavaScript library for drag and drop, resizing, and multi-touch gestures for modern browsers.

Features:

• 🖱️ Draggable - Move elements or draw on canvas with drag events
• 📐 Resizable - Resize elements by dragging edges or corners
• 👆 Gesturable - Multi-touch gestures with angle, scale, and rotation data
• 📍 Dropzones - Define drop targets for drag and drop applications
• ⚡ Inertia - Physics-based momentum after releasing elements
• 🎯 Snapping - Snap to grid, points, or custom targets
• 🔒 Restriction - Constrain movement within boundaries
• 🎛️ Modifiers - Customize event coordinates with modifiers

Actions included:

• Draggable, Resizable, Gesturable, Dropzone
• Snap modifiers (snap, snapSize, snapEdges, grid)
• Restrict modifiers (restrict, restrictRect, restrictSize, restrictEdges)
• Inertia, AutoScroll, Pointer Events

Source: GitHub Repository | Official Documentation

---

HTMX

HTMX Documentation

HTMX is a lightweight JavaScript library that allows you to access modern browser features directly from HTML, rather than using JavaScript. It extends HTML's capabilities to enable AJAX requests, CSS transitions, WebSockets, and Server Sent Events directly in markup.

Features:

• 🔄 AJAX Requests - Issue AJAX requests from any element
• ⚡ Event-driven - Trigger requests on any event
• 🎯 Targeted Updates - Update specific parts of the DOM
• 🔀 Multiple HTTP Verbs - Use GET, POST, PUT, PATCH, DELETE
• ⏱️ Polling - Automatic polling for real-time updates
• 📡 WebSockets & SSE - Built-in support for real-time communication
• 🎨 CSS Transitions - Smooth transitions without JavaScript
• 📜 History Support - Browser back/forward button support
• 🔌 Extensible - Plugin architecture for custom behavior

Core Attributes:

• hx-get, hx-post, hx-put, hx-patch, hx-delete - HTTP requests
• hx-trigger - Event triggers
• hx-target - Target element for response
• hx-swap - How to swap content
• hx-boost - Progressive enhancement
• hx-indicator - Loading indicators
• hx-push-url - Browser history integration

Source: GitHub Repository | Official Documentation

---

Templates

FastAPI + CrystalUI + HTMX SPA Template

FastAPI + CrystalUI + HTMX SPA Template

A complete template for building single-page applications (SPAs) combining FastAPI (Python backend), CrystalUI (pure CSS components), HTMX (dynamic frontend without JavaScript frameworks), and Bootstrap (grid layout).

Features:

• 🐍 FastAPI Backend - Async Python web framework with automatic API docs
• 🎨 CrystalUI Components - Beautiful, accessible pure-CSS UI components
• ⚡ HTMX Integration - Dynamic SPA behavior without writing JavaScript
• 📐 Bootstrap Grid - Responsive layout with Bootstrap's grid system
• 🚨 Exception Handling - UI components for displaying backend and frontend errors
• 🔔 Toast Notifications - Success/error toasts using Sonner-style alerts

Includes:

• Complete FastAPI application with exception handlers
• Jinja2 templates with HTMX attributes
• Error alert and toast notification partials
• Frontend JavaScript error handler
• Example CRUD operations with validation

📁 Example App - A complete working Task Manager application demonstrating all the template features in action.

---

Purpose

This documentation is designed to be easily consumed by AI agents for:

• Code generation with correct component usage
• Understanding UI patterns and best practices
• Providing accurate code examples and CSS styles

License

The Crystal UI documentation is based on the Crystal UI library by Denys Zhodik, licensed under MIT.

The InteractJS documentation is based on the InteractJS library by Taye Adeyemi, licensed under MIT.

The HTMX documentation is based on the HTMX library by Big Sky Software, licensed under BSD 2-Clause.