handlebars_skill

Overview

This skill captures best practices for writing clean, logic-less Handlebars (hbs) templates. It emphasizes separating presentation from application logic, composing small reusable partials, and using helpers only for formatting or simple transformations. The goal is maintainable, predictable templates that are safe to render in web apps.

How this skill works

The skill prescribes that all complex data work—filtering, sorting, calculations—happens before the template receives data. Templates are restricted to rendering and composition: escaping values by default, using triple-stash only for trusted HTML, and delegating repeated or complex behavior to helpers or precomputed fields. It also defines a partials-based component architecture and practical troubleshooting steps for common runtime issues.

When to use it

• Building server-rendered views where maintainability and security are priorities
• Standardizing template patterns across teams or projects
• Refactoring complex templates with nested conditionals or loops
• Creating reusable UI components with Handlebars partials
• Integrating Handlebars with ORMs or data layers that produce documents

Best practices

• Prepare and validate all data in controllers/services; templates only display values
• Keep helpers simple: formatting, translation, or tiny boolean checks; precompute complex logic
• Use default escaping ({{ value }}); use {{{ value }}} only for pre-sanitized HTML
• Break UI into small partials stored in partials/ with clear names like _card.hbs
• Pass explicit context to partials ({{> myPartial specificData }}) instead of relying on implicit scope
• Convert ORM documents to plain objects (.lean() or .toJSON()) to avoid prototype and access issues

Example use cases

• Render a product listing where price formatting and availability flags are provided by the service layer
• Implement a site header as a _navbar.hbs partial reused across layouts
• Replace nested conditionals by computing state flags (isOwner, canEdit) before rendering
• Register a date and currency helper for consistent presentation across templates
• Wrap pages with a layout block partial ({{#> layout}} ... {{/layout}}) to centralize markup and slots