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

•

디자인 도구

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.

주요 기능

Advanced component composition using named and attribute-aware slots
HEEx template syntax and dynamic Elixir interpolation
Conditional rendering and optimized collection iteration
39 GitHub stars
Reusable function components with explicit attribute definitions
Comprehensive view and component testing patterns

사용 사례

Building a consistent UI design system with reusable Elixir components
Implementing complex data dashboards with nested layouts and dynamic state
Refactoring legacy Phoenix templates into modern, component-based architectures

소개

주요 기능

Advanced component composition using named and attribute-aware slots
HEEx template syntax and dynamic Elixir interpolation
Conditional rendering and optimized collection iteration
39 GitHub stars
Reusable function components with explicit attribute definitions
Comprehensive view and component testing patterns

사용 사례

Building a consistent UI design system with reusable Elixir components
Implementing complex data dashboards with nested layouts and dynamic state
Refactoring legacy Phoenix templates into modern, component-based architectures