Optimistic UI Updates

managing-optimistic-ui

Implements "Fast Sync" using the useOptimistic hook. Use when you want to provide instant feedback for user actions like booking or liking while the backend processes.

majiayu000/claude-skill-registry-data·0installs23starsMarketing

SKILL.md

Full skill instructions

Optimistic UI Updates

When to use this skill

When a user performs a mutation (e.g., "Book Now", "Cancel Booking", "Like Tour").
To improve perceived performance by updating the UI before the server responds.

Workflow

Use the useOptimistic hook in a Client Component.
Pass the initial state and an update function to useOptimistic.
Call the state update function immediately before triggering the Server Action.
The UI will automatically revert if the Server Action fails (when the component re-renders with fresh data).

Code Template

'use client'
import { useOptimistic } from 'react';
import { bookTourAction } from '@/actions/bookings';

export function BookingButton({ tourId, initialStatus }: { tourId: string, initialStatus: string }) {
    const [optimisticStatus, setOptimisticStatus] = useOptimistic(
        initialStatus,
        (_, newStatus: string) => newStatus
    );

    const handleAction = async () => {
        setOptimisticStatus('confirmed'); // Optimistic state
        const result = await bookTourAction(tourId);
        if (!result.success) {
            // Reversion happens automatically on re-render if we don't manually handle it
        }
    };

    return (
        <button onClick={handleAction}>
            {optimisticStatus === 'confirmed' ? 'Booked!' : 'Book Now'}
        </button>
    );
}

Instructions

Read-Your-Writes: Use revalidatePath in the server action to ensure the official state replaces the optimistic one.
Failures: Ensure the backend mutation returns a failure if it cannot be processed so the UI doesn't remain in a "false" state.

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/majiayu000/claude-skill-registry-data --skill managing-optimistic-ui

View on GitHub

data/managing-optimistic-ui/SKILL.md

More Marketing skills

View all

Marketing

copywriting

Marketing copy for homepages, landing pages, pricing pages, and other conversion-focused web pages.

53.3K 216.1K

View

Marketing

flux-2-klein

Fast image generation with Flux 2 Klein, optimized for sub-second iteration and multi-reference brand styling.

52 176.2K

View

Marketing

marketing-psychology

Psychological principles and mental models for understanding customer behavior and influencing marketing decisions.

53.3K 153K

View

Marketing

content-strategy

Plan searchable and shareable content that drives traffic, builds authority, and generates leads.

53.3K 150.9K

View

Marketing

programmatic-seo

Build SEO-optimized pages at scale using templates, data, and proven playbook patterns.

53.3K 140.1K

View

Marketing

marketing-ideas

Brainstorm and prioritize marketing strategies tailored to your SaaS stage, budget, and goals.

53.3K 137.2K

View

Marketing

ai-seo

Optimize content for discovery, citation, and visibility across AI search platforms and LLM assistants.

53.3K 136.7K

View

Marketing

copy-editing

Systematic improvement of existing marketing copy through seven focused editing passes.

53.3K 136.4K

View

Marketing

site-architecture

Plan and optimize your website's page hierarchy, navigation, URL structure, and internal linking.

53.3K 112.8K

View

Marketing

revops

Design and optimize systems connecting marketing, sales, and customer success into a unified revenue engine.

53.3K 104.9K

View

Marketing

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

179.7K 100.1K

View