frontend-optimistic-mutations
A framework-agnostic write-path discipline: the cancel-snapshot-patch-rollback-invalidate optimistic lifecycle, once-per-intent idempotency keys, and multi-cache coherence.
Source: Stareezy
At a glance
- Best for
- Writing create/update/delete mutations with optimistic UI and rollback
- Works with
- Cursor · OpenAI Codex · Claude Code
- Outcome
- Keeping detail and list caches consistent after a write
- Source
- stareezy-1/frontend-architecture-skill
01 / Understand the skill
About frontend-optimistic-mutations
A portable, framework-agnostic discipline for the write path of any React or React Native app using a query/cache layer. Codifies the optimistic-update lifecycle (cancel in-flight queries → snapshot every affected cache → patch instantly → roll back verbatim on error → invalidate on settle), idempotency keys generated once at form init so retries replay the original response on money-moving writes, multi-cache coherence so a detail view and every list page update in lock-step, and the rule that server state is never mirrored into a client store. Shows TanStack Query, RTK Query, and SWR variants. Use this skill when writing create/update/delete mutations, adding optimistic UI with rollback, making writes idempotent, keeping list and detail caches consistent after a write, or reviewing mutation and cache-invalidation code. Works with React + Vite, Next.js, Remix, and Expo / React Native.
A portable, framework-agnostic discipline for the write path of any React or React Native app using a query/cache layer. Codifies the optimistic-update lifecycle (cancel in-flight queries → snapshot every affected cache → patch instantly → roll back verbatim on error → invalidate on settle), idempotency keys generated…
Read full description
A portable, framework-agnostic discipline for the write path of any React or React Native app using a query/cache layer. Codifies the optimistic-update lifecycle (cancel in-flight queries → snapshot every affected cache → patch instantly → roll back verbatim on error → invalidate on settle), idempotency keys generated once at form init so retries replay the original response on money-moving writes, multi-cache coherence so a detail view and every list page update in lock-step, and the rule that server state is never mirrored into a client store. Shows TanStack Query, RTK Query, and SWR variants. Use this skill when writing create/update/delete mutations, adding optimistic UI with rollback, making writes idempotent, keeping list and detail caches consistent after a write, or reviewing mutation and cache-invalidation code. Works with React + Vite, Next.js, Remix, and Expo / React Native.
02 / Confirm the fit
Use frontend-optimistic-mutations when you need to
- Writing create/update/delete mutations with optimistic UI and rollback
- Keeping detail and list caches consistent after a write
- Making money-moving writes safe with idempotency keys
- Reviewing mutation and cache-invalidation code
03 / See the workflow
How frontend-optimistic-mutations works
- 01Install: npx skills add https://github.com/stareezy-1/frontend-architecture-skill --skill frontend-optimistic-mutations
- 02Try: Write an optimistic mark-as-paid mutation that rolls back on error and keeps lists in sync.
- 03Get: A five-beat TanStack Query mutation with snapshots, rollback, and scoped invalidation.
Check before installing
Compatible platforms
Cursor · OpenAI Codex · Claude Code
Best fit
Writing create/update/delete mutations with optimistic UI and rollback
Review the source instructions if the required output differs from the formats described above.
Install and use
Compatible with Cursor and OpenAI Codex and Claude Code · Published by Stareezy
Ready to add frontend-optimistic-mutations?
Use the published instructions below, then provide the required input and describe the result you need.
General instructions · Cursor · OpenAI Codex · Claude Code
npx skills add https://github.com/stareezy-1/frontend-architecture-skill --skill frontend-optimistic-mutations
Review the source repository and license before installing third-party skills.
Continue exploring
Similar skills
Authoritative reference for the Claude API and Anthropic SDKs: model IDs, pricing, thinking/effort params, streaming, tool use, caching, managed agents, and model migration.
Read, edit, create, and fix Excel/CSV files — formulas, formatting, charts, and clean financial models with zero formula errors.
Generate distinctive, production-grade frontend UI that avoids generic AI aesthetics — pages, components, dashboards, and landing pages.
Build high-quality MCP (Model Context Protocol) servers in Python (FastMCP) or Node/TypeScript that let LLMs use external services through well-designed tools.