liveview-patterns

Provide Phoenix LiveView development patterns for performance, state management, and navigation.

517|35|Updated Feb 12, 2026
One-click install
npx skills add https://github.com/oliver-kriska/claude-elixir-phoenix --skill liveview-patterns-oliver-kriska
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: liveview-patterns
Source: https://github.com/oliver-kriska/claude-elixir-phoenix/tree/main/plugins/elixir-phoenix/skills/liveview-patterns
Command: npx skills add https://github.com/oliver-kriska/claude-elixir-phoenix --skill liveview-patterns-oliver-kriska

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides essential patterns and best practices for building efficient and maintainable Phoenix LiveView applications, preventing common pitfalls and optimizing performance.

Core Features & Use Cases

  • Performance Optimization: Learn to use assign_async and streams to prevent N+1 queries and reduce memory usage.
  • State Management: Understand when to use LiveComponents vs. Function Components and how to manage state effectively.
  • Navigation & Routing: Clarify the decision tree for patch, navigate, href, and redirect.
  • Use Case: When developing a real-time dashboard with many dynamic lists, this Skill helps you implement streams correctly to ensure smooth performance even with thousands of users.

Quick Start

Use the liveview-patterns skill to understand how to implement async assigns for database queries.

Frequently Asked Questions about liveview-patterns

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

FAQPage Schema
How do I prevent N+1 queries in Phoenix LiveView when loading database records?

To prevent N+1 queries in Phoenix LiveView, use `assign_async` to load database records asynchronously. This pattern optimizes performance by fetching data concurrently, reducing memory usage and preventing query bottlenecks in interactive web applications.

When should I use LiveComponents vs Function Components for state management in Phoenix?

In Phoenix LiveView state management, choose LiveComponents when you need isolated state and event handling, and Function Components for stateless UI rendering. Understanding this distinction ensures maintainable and efficient component usage in your application.

What is the best way to render large dynamic lists in Phoenix LiveView without performance issues?

The best way to render large dynamic lists in Phoenix LiveView is by using streams. Streams optimize performance by reducing memory usage and preventing the need to load entire collections into memory, ensuring smooth real-time updates even with thousands of users.

How does navigation routing work in Phoenix LiveView between patch, navigate, and redirect?

Phoenix LiveView navigation routing uses a decision tree: `patch` updates the URL without a full reload for same-page transitions, `navigate` performs a live navigation between pages, `href` triggers a standard browser request, and `redirect` forces a full page reload.

Can I use async assigns to optimize database queries in Phoenix LiveView applications?

Yes, you can use async assigns to optimize database queries in Phoenix LiveView. The `assign_async` pattern allows you to fetch data asynchronously, preventing the UI from blocking and ensuring robust performance for interactive web applications.