← ClaudeAtlas

mustache-guidelineslisted

Mustache logic-less templating for server-rendered HTML fragments, including variables, escaping, sections, inverse sections, partials, and htmx integration. Use when writing or reviewing Mustache templates that render HTML for htmx swaps.
NomadicDaddy/aidd · ★ 1 · Code & Development · score 60
Install: claude install-skill NomadicDaddy/aidd
# Mustache Guidelines Mustache is a simple, logic-less templating system. It's ideal for rendering HTML fragments on the server to be consumed by htmx, promoting a clear separation between presentation (template) and logic (server code). ## Core Principles 1. **Logic-less:** Templates only display data, they do not contain complex logic (if/else, loops). All data preparation happens server-side. 2. **Data-driven:** Templates are rendered solely based on the data context provided to them. 3. **Server-side Rendering:** Mustache templates are processed on the server to produce HTML output. 4. **Partial HTML:** For htmx, render just the HTML fragment needed for the swap, not a full HTML document (`<html>`, `<head>`, `<body>`). 5. **Separation of Concerns:** Template handles _how_ data looks, server handles _what_ data is available and _what_ actions to perform. ## Structure & Tags Mustache uses tags enclosed in double curly braces `{{ }}`. ### 1. Variables Display the value of a key from the data context. By default, HTML is escaped. ```mustache <p>Hello, {{name}}!</p> ``` _Data Context Example:_ ```json { "name": "World" } ``` _Output:_ ```html <p>Hello, World!</p> ``` ### 2. Unescaped Variables (Use with Caution!) Display the raw value of a key. **HTML is NOT escaped.** This is a significant security risk if the data comes from user input. ```mustache <p>Raw HTML: {{{html_content}}}</p> <p>Alternate Unescaped: {{& another_html}}</p> ``` _Data Context Example:_