skills.rest
code0100fun
code0100funCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

heex-templates

Standardize HEEx templates for Phoenix LiveView forms, rendering, and interpolation.

1|1|Updated Feb 8, 2026
Search Tags:#templates#frontend#forms#elixir#phoenix#liveview#heex
One-click install
npx skills add https://github.com/code0100fun/botfiles --skill heex-templates
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: heex-templates
Source: https://github.com/code0100fun/botfiles/tree/main/plugins/elixir-phoenix/skills/heex-templates
Command: npx skills add https://github.com/code0100fun/botfiles --skill heex-templates

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Phoenix HEEx template guidelines help teams write and review templates consistently, preventing common mistakes around interpolation, forms, and rendering.

Core Features & Use Cases

  • Enforces correct HEEx usage and syntax across templates, including proper interpolation and literal braces handling.
  • Guides the use of Phoenix.Component forms and to_form for form construction, avoiding outdated helpers.
  • Standardizes app wide imports of template helpers in html_helpers for consistency across LiveViews and components.
  • Provides rules for conditional rendering using cond or case, and cautions against invalid patterns like if with else if.
  • Establishes proper class list syntax for dynamic classes and ensures deterministic DOM IDs for testability.
  • Clarifies comments in HEEx templates using the approved HEEx comment syntax and supports safe block constructs.
  • Outlines the interpolation rules for attributes and bodies, including safe handling of literal braces.

Quick Start

Audit a HEEx template by applying these rules: ensure ~H usage, Phoenix.Component form helpers, unique DOM IDs, and safe interpolation patterns.

Frequently Asked Questions about heex-templates

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce clean HEEx templates and prevent common Phoenix LiveView interpolation mistakes?▼

Standardize HEEx templates by requiring ~H usage, Phoenix.Component helpers, unique DOM IDs, and safe interpolation patterns to prevent common mistakes in interpolation, forms, and rendering across Phoenix LiveView.

What is the best way to construct forms in Phoenix LiveView HEEx templates?▼

Construct forms in HEEx templates using Phoenix.Component forms and to_form helpers for form construction, avoiding outdated helpers to ensure consistent rendering across LiveViews and components.

How do I handle conditional rendering and dynamic class lists in HEEx templates?▼

Handle conditional rendering in HEEx templates using cond or case statements, establish proper class list syntax for dynamic classes, and avoid invalid patterns like if with else if for consistent template rendering.

Why do my HEEx template DOM IDs conflict during LiveView testing?▼

HEEx template DOM IDs conflict because they lack uniqueness; ensuring deterministic DOM IDs for testability prevents conflicts and stabilizes Phoenix LiveView component testing.

Does this HEEx template standardization support safe block constructs and comments?▼

Yes, HEEx template standardization clarifies comments using approved HEEx comment syntax and outlines interpolation rules for attributes and bodies, supporting safe block constructs and safe handling of literal braces.

Related Skills

Explore More Software Engineering Skills→
bobmatnycbobmatnyc
3

phoenix-liveview

Build real-time web applications with Phoenix LiveView on the BEAM.

Community
Intermediate
mhaldermhalder
2

shellcheck

Lint shell scripts with ShellCheck and summarize issues by severity.

Community
Basic
TheBushidoCollectiveTheBushidoCollective
187

phoenix-views-templates

Render Phoenix HEEx templates and views into HTML content.

Official
Intermediate
j-morgan6j-morgan6
149

code-quality

Detect duplication, ABC complexity, and unused private functions in Elixir projects.

Community
Intermediate