What are colocated JS hooks in this context?

Colocated hooks allow developers to write JavaScript directly in HEEx templates using specific script tags, which are then automatically integrated into the application's JS bundle.

Why does this skill prioritize LiveView streams over regular lists?

Streams are recommended for collections to avoid memory ballooning and potential runtime termination, ensuring the application remains performant as data grows.

Does this skill support testing LiveView components?

Yes, it provides specific guidelines for using Phoenix.LiveViewTest and LazyHTML to perform structure-based assertions rather than testing against raw HTML.

How does the skill handle Phoenix form errors?

It enforces the use of forms assigned via to_form/2 and prohibits accessing changesets directly in templates, which prevents common rendering and validation errors.

Phoenix LiveView Expert Guidelines

Name: Phoenix LiveView Expert Guidelines
Author: code0100fun

bycode0100fun

0•

Desarrollo de API

Implements best practices for Phoenix LiveView development, covering streams, JavaScript interoperability, testing, and form management.

This skill provides a comprehensive set of patterns and constraints for building robust Phoenix LiveView applications. It enforces modern Elixir practices such as using LiveView streams for efficient collection handling to prevent memory leaks, implementing colocated JavaScript hooks for seamless frontend logic, and adhering to strict form handling protocols using to_form/2. By guiding Claude through specific implementation patterns and testing strategies using Phoenix.LiveViewTest, it ensures high-performance, maintainability, and consistency across all LiveView features while avoiding deprecated functions like live_redirect.

Características Principales

010 GitHub stars

02Standardized form handling using to_form/2 and Ecto changeset best practices

03Efficient collection management using LiveView streams to prevent memory ballooning

04Modern navigation enforcement using functional components over deprecated methods

05Robust testing strategies utilizing Phoenix.LiveViewTest and LazyHTML assertions

06Colocated JavaScript hook integration for clean, maintainable frontend interop

Casos de Uso

01Building high-performance real-time dashboards with optimized LiveView streams

02Refactoring legacy Phoenix applications to align with modern LiveView standards and patterns

03Implementing custom client-side behaviors using integrated colocated JS hooks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add code0100fun/botfiles liveview-guidelines

For use in Claude.ai and ChatGPT

Download Skill