reactive-ui-patterns
About
This skill provides reactive UI patterns for smooth in-place updates when working with remote functions. It enables managing loading states and preventing page jumps through the `.current` property on stored queries. Use it to maintain scroll position and create seamless user experiences during data refreshes.
Quick Install
Claude Code
Recommended/plugin add https://github.com/spences10/devhub-crmgit clone https://github.com/spences10/devhub-crm.git ~/.claude/skills/reactive-ui-patternsCopy and paste this command in Claude Code to install this skill
Documentation
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
GitHub Repository
Related Skills
content-collections
MetaThis skill provides a production-tested setup for Content Collections, a TypeScript-first tool that transforms Markdown/MDX files into type-safe data collections with Zod validation. Use it when building blogs, documentation sites, or content-heavy Vite + React applications to ensure type safety and automatic content validation. It covers everything from Vite plugin configuration and MDX compilation to deployment optimization and schema validation.
creating-opencode-plugins
MetaThis skill provides the structure and API specifications for creating OpenCode plugins that hook into 25+ event types like commands, files, and LSP operations. It offers implementation patterns for JavaScript/TypeScript modules that intercept and extend the AI assistant's lifecycle. Use it when you need to build event-driven plugins for monitoring, custom handling, or extending OpenCode's capabilities.
langchain
MetaLangChain is a framework for building LLM applications using agents, chains, and RAG pipelines. It supports multiple LLM providers, offers 500+ integrations, and includes features like tool calling and memory management. Use it for rapid prototyping and deploying production systems like chatbots, autonomous agents, and question-answering services.
cloudflare-turnstile
MetaThis skill provides comprehensive guidance for implementing Cloudflare Turnstile as a CAPTCHA-alternative bot protection system. It covers integration for forms, login pages, API endpoints, and frameworks like React/Next.js/Hono, while handling invisible challenges that maintain user experience. Use it when migrating from reCAPTCHA, debugging error codes, or implementing token validation and E2E tests.