skills.rest
adelabdelgawad
adelabdelgawadCOMMUNITY
Explore all skills by this author →
𝕏@Adel_AbdElgawaDGitHub

leptos-component

Enforce Leptos component and island authoring with prop declarations and reactive primitives.

Updated May 26, 2026
Search Tags:#components#rust#reactivity#islands#leptos#prop-declarations
One-click install
npx skills add https://github.com/adelabdelgawad/rust-fullstack-agents --skill leptos-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: leptos-component
Source: https://github.com/adelabdelgawad/rust-fullstack-agents/tree/main/plugins/rusty/skills/leptos-component
Command: npx skills add https://github.com/adelabdelgawad/rust-fullstack-agents --skill leptos-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Leptos component and island authoring often struggles with correct prop declarations, server/client boundaries, and reactivity primitives. This skill provides rules, patterns, and examples to ensure components and islands use #[component] and #[island] appropriately and leverage RwSignal, Memo, and Effect within islands mode.

Core Features & Use Cases

  • Enforces correct separation of #[component] and #[island] functions, including when reactive primitives belong in islands.
  • Documents patterns for props, signals, memoization, and effects with concrete code examples.
  • Helps audit and refactor existing components to align with islands rules and hydration safety.

Quick Start

Create a new Leptos skill by adding a SKILL.md with the required frontmatter and start following the patterns for components and islands.

Frequently Asked Questions about leptos-component

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

FAQPage Schema
How do I declare props correctly in Leptos components?▼

Leptos component prop declarations require specific struct patterns to ensure reactivity. This skill enforces correct prop declaration rules and provides concrete code examples for passing reactive signals into components safely.

When should I use #[component] vs #[island] in Leptos islands mode?▼

Use #[island] when reactive primitives like RwSignal, Memo, and Effect must hydrate on the client, and #[component] for server-rendered UI. This skill enforces correct placement boundaries to maintain hydration safety.

How do I use RwSignal, Memo, and Effect in Leptos islands?▼

Leptos islands use RwSignal for state, Memo for derived values, and Effect for side effects. This skill documents patterns for these reactive primitives with concrete code examples for islands mode.

How do I audit existing Leptos components for islands mode compatibility?▼

Auditing Leptos components involves checking #[component] vs #[island] placement and verifying reactive primitive boundaries. This skill helps refactor existing components to align with islands rules and hydration safety.

Why does my Leptos component break during hydration in islands mode?▼

Hydration issues in Leptos islands mode usually stem from placing reactive primitives in standard #[component] functions instead of #[island] functions. This skill provides rules to enforce correct server/client boundaries.

Can I use reactive primitives in standard Leptos components without islands?▼

Reactive primitives like RwSignal, Memo, and Effect belong in #[island] functions during islands mode to ensure client-side hydration. This skill enforces proper separation between standard components and islands.

Related Skills

Explore More Software Engineering Skills→
adelabdelgawadadelabdelgawad

leptos-islands

Define hydration boundaries for Leptos SSR apps with islands.

Community
Advanced
HouseGarofaloHouseGarofalo
3

svelte-kit

Guide SvelteKit 2 development with Svelte 5 runes and server-side rendering.

Official
Advanced
adelabdelgawadadelabdelgawad

leptos-action-form

Coordinate Leptos server mutations with ActionForm and ServerAction forms.

Community
Advanced
dchukdchuk
30

integrating-tauri-rust-frontends

Automate Rust WASM frontend integration with Tauri v2 using Trunk.

Community
Advanced