Can I use 'else if' in these templates?

No, Elixir does not support 'else if'. This skill enforces the use of 'cond' or 'case' for handling multiple conditions.

How does it handle conditional CSS?

It promotes the use of list syntax [...] within class attributes to manage dynamic styles and conditional flags cleanly.

What is the preferred way to build forms?

The skill requires using Phoenix.Component.form/1 and to_form/2, which are the current standards for Phoenix LiveView and HEEx.

Does this skill support older Phoenix templates?

No, it specifically targets modern HEEx and ~H sigils, explicitly discouraging the use of the outdated ~E syntax.

How do I include literal curly braces in code snippets?

Use the phx-no-curly-interpolation attribute on parent tags like or to prevent HEEx from interpreting them as Elixir code.

Phoenix HEEx Templates

Name: Phoenix HEEx Templates
Author: code0100fun

bycode0100fun

0•

开发者工具

Standardizes Phoenix HEEx template development by enforcing modern syntax, form-building best practices, and conditional rendering rules.

This skill provides a comprehensive set of guidelines for writing and reviewing Phoenix HEEx templates to ensure high-quality frontend code in Elixir applications. It enforces modern standards such as using Phoenix.Component.form/1, correct interpolation syntax for attributes and tag bodies, and the list-based syntax for dynamic classes. By discouraging anti-patterns like 'else if' and outdated HTML helpers, it helps developers maintain consistency, readability, and compatibility with the latest Phoenix framework features.

主要功能

01Conditional Logic Guardrails: Prevents invalid 'else if' patterns by promoting 'cond' and 'case' statements.

020 GitHub stars

03Modern Form Standards: Enforces usage of Phoenix.Component.form/1 and to_form/2 over legacy helpers.

04Interpolation Guidance: Clarifies the distinct usage of {...} for attributes and <%= ... %> for block constructs.

05Literal Brace Handling: Manages literal curly braces in code blocks using the phx-no-curly-interpolation attribute.

06Dynamic Class Management: Promotes the list-based syntax [...] for readable and maintainable conditional styling.

使用场景

01Automating the review process for HEEx templates to catch syntax errors early.

02Migrating legacy Phoenix templates to modern HEEx syntax and components.

03Ensuring code consistency and best practices across Elixir development teams.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add code0100fun/botfiles heex-templates

For use in Claude.ai and ChatGPT

Download Skill