What is HEEx in the context of Phoenix?

HEEx (HTML+EEx) is the templating engine for Phoenix that provides compile-time validation, security through automatic escaping, and a modern component-based syntax.

What are slots in Phoenix components?

Slots are placeholders within a component that allow you to pass blocks of HTML or other components into them, enabling flexible and powerful content composition.

Can I use this skill for testing Phoenix views?

Yes, the skill includes patterns for testing view rendering logic and individual function components in isolation to ensure UI reliability.

How does this skill handle data passing in templates?

It provides implementation patterns for using 'assigns' and the '@' prefix to safely pass and access dynamic data from controllers and LiveViews within your templates.

How do function components improve Phoenix development?

Function components allow you to encapsulate UI logic into reusable Elixir functions, making your frontend code more modular, easier to test, and highly maintainable.

Phoenix Views & Templates

Name: Phoenix Views & Templates
Author: TheBushidoCollective

byTheBushidoCollective

•

Herramientas de Diseño

Renders and organizes dynamic HTML content in Phoenix applications using HEEx templates and reusable function components.

This skill provides specialized guidance for building robust UI layers in Elixir's Phoenix Framework. It focuses on HEEx (HTML+EEx) syntax, teaching Claude how to implement secure, compile-time validated templates with automatic escaping. Developers can leverage this skill to master function components, complex slot-based architectures, and efficient data rendering patterns through assigns. Whether building static layouts or integrating with LiveView, this skill ensures that frontend code follows best practices for maintainability, performance, and accessibility within the Phoenix ecosystem.

Características Principales

01Advanced component composition using named and attribute-aware slots

02HEEx template syntax and dynamic Elixir interpolation

03Conditional rendering and optimized collection iteration

0439 GitHub stars

05Reusable function components with explicit attribute definitions

06Comprehensive view and component testing patterns

Casos de Uso

01Building a consistent UI design system with reusable Elixir components

02Implementing complex data dashboards with nested layouts and dynamic state

03Refactoring legacy Phoenix templates into modern, component-based architectures

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han phoenix-views-templates

For use in Claude.ai and ChatGPT

Download Skill