Phoenix LiveView Essentials

Enforce Phoenix LiveView lifecycle rules and HEEX component extraction.

24|4|Updated Nov 15, 2023
One-click install
npx skills add https://github.com/matthewsinclair/intent --skill phoenix-liveview-essentials
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Phoenix LiveView Essentials
Source: https://github.com/matthewsinclair/intent/tree/main/intent/plugins/claude/skills/in-phoenix-liveview
Command: npx skills add https://github.com/matthewsinclair/intent --skill phoenix-liveview-essentials

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enforces critical rules for Phoenix LiveView development, ensuring maintainable, performant, and robust applications by preventing common pitfalls in lifecycle management, data handling, and code structure.

Core Features & Use Cases

  • Lifecycle Management: Guarantees correct handling of LiveView mount phases and asynchronous operations.
  • Efficient Data Rendering: Enforces the use of streams for dynamic lists to optimize performance.
  • Code Organization: Promotes separation of concerns by keeping domain logic out of LiveViews.
  • Use Case: A developer building a real-time dashboard can use this Skill to ensure their LiveViews correctly handle incoming data streams without blocking the UI or consuming excessive memory.

Quick Start

Apply the Phoenix LiveView Essentials skill to the MyAppWeb.PostLive module to enforce best practices.

Frequently Asked Questions about Phoenix LiveView Essentials

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce Phoenix LiveView best practices for lifecycle and code structure?

To enforce Phoenix LiveView best practices, apply rules for two-phase mount, stream usage for dynamic lists, and separation of domain logic from thin LiveViews. This ensures maintainable applications by preventing common lifecycle and data handling pitfalls.

What is the best way to handle dynamic lists in Phoenix LiveView for performance?

The best way to handle dynamic lists in Phoenix LiveView is using streams. Streams optimize performance by enforcing efficient data rendering, preventing excessive memory consumption when displaying large, frequently updating datasets.

How do I use assign_async for non-blocking data loading in LiveView?

Use assign_async for non-blocking data loading in LiveView to handle asynchronous operations without freezing the UI. This lifecycle management technique ensures robust applications by correctly handling incoming data streams.

When should I use push_navigate vs push_patch in Phoenix LiveView?

Use push_navigate vs push_patch in Phoenix LiveView based on correct navigation semantics. Enforcing proper usage ensures robust URL state management and lifecycle handling within your real-time web application.

How do I extract reusable HEEX components with typed attributes?

Extract reusable HEEX components with typed attributes to promote code organization and separation of concerns. This pattern keeps LiveViews thin by extracting UI logic into maintainable, isolated functional components.

Why separate domain logic from Phoenix LiveView modules?

Separate domain logic from Phoenix LiveView modules to keep LiveViews thin and focused on rendering. This separation of concerns enforces code organization, ensuring maintainable and robust application architecture.