gabspereira
744868caa1
- Add auth handlers (signup, login, logout, account management) with bcrypt - Add client, customer, service, scheduling, payment, question, answer handlers - Add dashboard, monthly report, and lead pipeline pages - Add UTF-8 middleware to force charset on HTML responses - Add config package with env-based overrides for DB path, secrets, endpoints - Add parser package for WhatsApp message ingestion - Add clean-arch layers: pkg/domain, pkg/repo, pkg/usecase for leads - Add cmd/migrate utility for DB migrations - Add Makefile, README, run-tests.sh, and dev scripts - Update docker-compose.yml with memory limits - Update .air.toml to exclude DB files and stop on errors - Update whatsapp-sync dependencies and add src/index.js entrypoint - Add whatsme standalone WhatsApp reader app (source only) - Untrack .opencode-sandbox/data/go-crm.db from git history - Expand root .gitignore: ngrok, tmp dirs, sandbox DBs, compiled binaries
3.5 KiB
3.5 KiB
name, description
| name | description |
|---|---|
| backend-driven-ui | 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
.templfiles. This ensures type safety and allows you to pass Go structs directly into your UI components. - HTMX over JavaScript: Replace
useStateanduseEffectwithhx-triggerandhx-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.