svelte-core
LiveSvelte — Svelte inside Phoenix LiveView
Expert guidance for building Svelte 5 components inside Phoenix LiveView using LiveSvelte for end-to-end reactivity.
Core Principles
- Svelte components live in
assets/svelte/— they receive props from LiveView over the websocket - Server owns the state — push events to LiveView, let the server update assigns, props flow back reactively
- Don't duplicate state: if LiveView has it, pass it as a prop; use local Svelte state only for UI-only concerns
- Use Svelte 5 runes (
$state,$derived,$effect) — not legacy$:reactive declarations - Use TypeScript for type safety
- SSR is enabled by default — be aware of what runs on server vs client
LiveSvelte Usage
Basic Component
# LiveView
More from hwatkins/my-skills
elixir-tdd
Test-driven development enforcement for Elixir and Phoenix. Requires failing tests before implementation. Use when implementing features, fixing bugs, or when code quality discipline is needed.
23spam-prevention
When the user needs to prevent spam signups, bot accounts, fake registrations, or abuse of signup/trial flows. Also use when mentioning "spam accounts," "fake signups," "bot registrations," "disposable emails," "signup abuse," or "trial fraud." For broader security concerns, see saas-security.
14elixir-otp
OTP patterns for Elixir — GenServer, Agent, Task, ETS, supervision trees, Registry, and process design. Use when designing concurrent systems, stateful processes, or deciding when (and when NOT) to use processes.
8rust-tdd
Test-driven development enforcement for Rust. Requires failing tests before implementation. Use when implementing features, fixing bugs, or when code quality discipline is needed.
5rust-core
Expert Rust development with ownership, borrowing, lifetimes, traits, error handling, and idiomatic patterns. Use for any Rust code.
4rust-async
Async Rust with Tokio, futures, concurrency patterns, channels, and performance. Use when building async services, networking, or concurrent Rust applications.
4