ALWAYS invoke this skill BEFORE writing or modifying ANY Leptos component, view, server function, or router code (.rs files using leptos crates). Provides comprehensive guidance on reactivity, components, SSR, server functions, routing, and deployment. MANDATORY for all Leptos web development.
This skill enforces correct, idiomatic Leptos 0.7+ development. It ensures all Leptos code follows the framework's reactive model, component patterns, SSR best practices, and avoids common pitfalls.
This skill MUST be invoked for ANY Leptos-related action, including:
#[component], #[island])#[server])leptos_router)Before writing or modifying Leptos code, load ONLY the guideline files that apply to the requested task, using segmented reading (offset and limit) when needed.
01_reactivity.mdUse when working on:
signal(), RwSignal, ReadSignal, WriteSignal).get(), .set(), .read(), .write(), .with(), .update())Memo::new) and when to use memos vs derived signalsEffect::new, Effect::watch) and when to use/avoid themArcRwSignal for collectionsprovide_context, use_context, stores)02_components.mdUse when working on:
view! macro syntax (RSX) and how it differs from HTML#[component]#[prop(optional)], #[prop(into)], #[prop(default)])class:, style:, prop:, attr:, on:)Children, ChildrenFn, ChildrenFragment)view! macro)03_control_flow_and_forms.mdUse when working on:
if/else, match, <Show/>, Option<T>).into_any(), Either)<ErrorBoundary/>, Result<T,E> in views)on:input, prop:value, bind:)NodeRef)<textarea>, <select> handling<For/>, <ForEnumerate/>, .collect_view())04_async.mdUse when working on:
Resource, LocalResource, OnceResource<Suspense/> for loading states<Transition/> for non-flickering reloads<Await/> for one-shot futuresSuspend::new for awaiting resources without null-checkingAction::new) for mutationsServerAction for server function mutationsspawn_local for ad-hoc async work05_router.mdUse when working on:
<Router>, <Routes>, <Route>)path!() macro, params, wildcards)<ParentRoute>, <Outlet/>)use_params, use_query, Params derive)<A/>, use_navigate)<Form/>)<Title/>, <Meta/>, <Html/>, <Body/>)web_sys, NodeRef, wasm-bindgen)06_server.mdUse when working on:
#[server] macro)ServerFnError and custom error typesResponseOptions, redirect)<ActionForm/>serde_qs07_ssr.mdUse when working on:
cargo-leptos setup and configurationResource::new_blocking for SEO-critical contentcfg!, Effect::new for client-only code)08_deployment.mdUse when working on:
base prop on Router)opt-level, lto, codegen-units, build-std)#[lazy], #[lazy_route])#[island] macro)ssr vs hydrate features)prop:value for current input values, NOT the value attribute.<tbody> in tables to prevent hydration bugs.ArcRwSignal (not RwSignal) for signals stored in collections.Memo only for expensive ones.<Outlet/> in parent route components for nested routing.