leptos-component

Name: leptos-component
Availability: InStock
Author: AdelAbdElGawad

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

Ready to run

npx skills add https://github.com/adelabdelgawad/rust-fullstack-agents --skill leptos-component

💬 Prompt for ChatGPT / Claude Chat▼

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.