Agent skill
reactive-ui-patterns
Remote functions reactive UI patterns. Use for smooth in-place updates, preventing page jumps, and managing loading states with .current property.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/reactive-ui-patterns
SKILL.md
Reactive UI Patterns
Quick Start
<script lang="ts">
const data_query = get_data(); // Store in variable for .current access
async function save(id: string, value: string) {
await update_data({ id, value });
await data_query.refresh(); // Updates in place!
}
</script>
{#if data_query.error}
<p>Error loading data</p>
{:else if data_query.loading && data_query.current === undefined}
<p>Loading...</p>
{:else}
{@const items = data_query.current ?? []}
<div class:opacity-60={data_query.loading}>
{#each items as item}<!-- Content updates smoothly -->{/each}
</div>
{/if}
Core Principles
- Store queries:
const query = get_data()enables.currentproperty access - Use
.current: Prevents page jumps, keeps scroll position during updates - Initial load only: Show spinner when
.current === undefined, not on every refresh - Avoid
{#await}: Causes jarring page reloads - use stored query pattern instead
Reference Files
- current-property.md - Deep dive on
.currentproperty - anti-patterns.md - Common mistakes to avoid
- examples.md - Real-world implementation examples
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?