How do function components benefit my Phoenix project?

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

What is HEEx in the context of Phoenix?

HEEx (HTML+EEx) is the modern template engine for Phoenix that provides compile-time validation of HTML and automatic security escaping for dynamic content.

Can this skill be used with Phoenix LiveView?

Yes, the HEEx patterns, function components, and slots described in this skill are the standard for both traditional Phoenix controller-based views and LiveView.

How are assigns handled in these templates?

Assigns are key-value pairs passed to templates and are accessed using the '@' prefix (e.g., @user), providing a clean syntax for rendering dynamic data.

Phoenix Views & Templates

Name: Phoenix Views & Templates
Author: TheBushidoCollective

byTheBushidoCollective

•

Design Tools

Renders dynamic HTML using Phoenix HEEx templates, function components, and slots with compile-time validation and security.

This skill empowers Claude to architect and implement the presentation layer of Phoenix applications using modern HEEx (HTML+EEx) standards. It provides comprehensive guidance on creating secure, type-safe templates, defining reusable function components with explicit attributes, and managing complex UI structures through slots and assigns. Whether you are building a component library or a data-heavy dashboard, this skill ensures your Elixir web interfaces follow best practices for performance, maintainability, and security.

Key Features

01Define reusable Phoenix function components with explicit attribute declarations using the attr macro.

02Write comprehensive unit tests for views and individual function components to ensure UI stability.

03Manage application state in templates through assigns and efficient Elixir control flow logic.

04Implement complex, composable layouts using named slots and nested component patterns.

05Generate secure dynamic HTML with HEEx's automatic escaping and compile-time validation.

0695 GitHub stars

Use Cases

01Refactoring legacy Phoenix templates into modern, testable function components and slots.

02Implementing dynamic, data-driven dashboards with complex tables and nested layout structures.

03Building a consistent design system of reusable UI components for Elixir-based web applications.

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