---
name: backend-driven-ui
description: Create distinctive, production-grade frontend interfaces using Golang and Hypermedia (HTMX/Templ). Use this skill to build reactive web components and pages that prioritize performance and maintainability without the complexity of modern JavaScript frameworks.
---

This skill guides the creation of high-end, "vibe-coded" interfaces using a **Golang-centric stack**. It avoids the maintenance burden of React/JS frameworks by leveraging **HTMX** and **Templ**, focusing on server-side logic that delivers rich, interactive client experiences.

## Design Thinking & "Vibe Coding"

Before coding, commit to a BOLD aesthetic direction that feels "hand-crafted" rather than "framework-default":
- **Hypermedia First**: Architecture relies on HTML fragments. Every interaction is a server-side transition, making the app feel incredibly fast and robust.
- **Tone**: Since we are avoiding the "React look," lean into distinctive styles: **High-Tech Industrial**, **Neo-Brutalist**, **Swiss International**, or **Terminal-Core**.
- **The "Vibe"**: Aim for the "vibe coding" energy—fast feedback loops, visible data flowing through the terminal, and interfaces that feel like specialized tools rather than generic SaaS dashboards.

## Frontend Aesthetics Guidelines

Focus on:
- **Typography**: Use characterful fonts that reflect the precision of Go. Lean towards high-quality Monospace (e.g., JetBrains Mono, Berkeley Graphics) for a "tooling" feel, or sophisticated Serifs paired with tight Grotesks for an editorial look.
- **Color & Theme**: Use high-contrast themes. Since this is built with **Tailwind CSS**, use specific color scales (e.g., Zinc, Slate, or custom olive/amber palettes) to avoid the "Tailwind default" blue.
- **Motion (CSS-Only)**: Prioritize CSS transitions and HTMX swapping animations (`htmx-settling`, `htmx-requesting`). Use staggered reveals and smooth opacity fades to mask the server-side round trip, making it feel "instant."
- **Interaction**: Use **HTMX attributes** (`hx-get`, `hx-post`, `hx-target`) to create "Active Search," "Infinite Scroll," and "Inline Editing" patterns that surprise users who expect a heavy JS bundle.

## Technical Implementation (The Go Stack)

- **Templ over HTML**: All components must be written in `.templ` files. This ensures type safety and allows you to pass Go structs directly into your UI components.
- **HTMX over JavaScript**: Replace `useState` and `useEffect` with `hx-trigger` and `hx-swap`. Maintain application state in the Go backend or the URL, not in a complex client-side store.
- **Tailwind for Styling**: Use utility classes to keep styles local to the HTML. Avoid external CSS files to maintain the "Locality of Behavior" principle.
- **Zero-JS Interactivity**: If client-side logic is strictly necessary (modals, toggles), use **Alpine.js** for its minimal footprint, keeping the code readable within the HTML.

## What to Avoid
- **No Heavy Frameworks**: Strictly avoid React, Vue, or Angular.
- **No JS "Glue Code"**: Avoid writing custom vanilla JavaScript for things HTMX can handle natively.
- **No "AI Slop" Aesthetics**: Avoid the "Inter font + purple gradient + rounded card" combo.
- **No JSON APIs for the UI**: Do not build internal JSON endpoints for your own frontend; return HTML fragments instead.

**IMPORTANT**: The beauty of this approach lies in its **mechanical elegance**. The code should be as clean and performant as the Go binary itself. Show that a "Vibe" can be achieved through clever hypermedia patterns and rock-solid backend engineering.