skills.rest
aalmada
aalmadaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

scaffold-frontend-feature

Scaffold Blazor frontend features with reactive state and cache invalidation.

15|Updated Dec 25, 2025
Search Tags:#scaffold#cache invalidation#optimistic updates#Blazor#ReactiveQuery#frontend feature
One-click install
npx skills add https://github.com/aalmada/BookStore --skill scaffold-frontend-feature
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scaffold-frontend-feature
Source: https://github.com/aalmada/BookStore/tree/main/.claude/skills/scaffold-frontend-feature
Command: npx skills add https://github.com/aalmada/BookStore --skill scaffold-frontend-feature

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill accelerates the development of user-facing features in Blazor by providing a ready-to-use pattern for reactive state management, optimistic updates, and cache invalidation, reducing boilerplate and risk of inconsistencies.

Core Features & Use Cases

  • Reactive State: Components automatically re-render when underlying data changes.
  • Optimistic Updates: UI updates instantly while mutations are processed, with rollback on failure.
  • Cache Invalidation: Ensures data freshness by invalidating and refreshing cached queries after mutations.
  • Use Case: Implementing a “like” button that updates instantly and persists to the backend, while other tabs reflect the change in real time.

Quick Start

Create a new feature page under src/Web/BookStore.Web/Components/Pages/{Feature}.razor, wire it into a ReactiveQueryInit template, and configure QueryInvalidationService to map domain events to query keys. Then run the app and verify SSE-driven updates and proper rollback on errors.

Frequently Asked Questions about scaffold-frontend-feature

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement optimistic UI updates in Blazor?▼

To implement optimistic UI updates in Blazor, use a ReactiveQuery pattern that renders UI changes instantly while processing mutations, automatically rolling back if the backend request fails.

What is the best way to handle cache invalidation across multiple Blazor sessions?▼

Handle cache invalidation across Blazor sessions by mapping domain events to query keys using a QueryInvalidationService, which triggers automatic data refreshing and real-time UI updates across views.

How do I scaffold a reactive frontend feature in Blazor?▼

Scaffold a reactive Blazor feature by creating a page under Components/Pages, wiring it into a ReactiveQueryInit template, and configuring QueryInvalidationService to map domain events to query keys for SSE-driven updates.

Does this reactive Blazor pattern support real-time updates across different browser tabs?▼

Yes, the reactive Blazor pattern supports real-time updates across browser tabs by using Server-Sent Events (SSE) and cache invalidation to ensure data freshness and synchronized state across sessions.

Why does my Blazor component not re-render after data changes?▼

A Blazor component fails to re-render after data changes if it lacks reactive state management or proper query invalidation wiring, preventing the UI from detecting underlying data mutations automatically.

Can I use this scaffolding tool for Blazor features that do not require real-time responsiveness?▼

While designed for real-time UI updates, optimistic updates, and cache invalidation, you can use the reactive query scaffolding for standard Blazor features, though it may introduce unnecessary boilerplate for static components.

Related Skills

Explore More Software Engineering Skills→
FoxSilouFoxSilou

task-scaffold-front

Scaffold Blazor frontend infrastructure with bUnit and Playwright test harnesses.

Community
Intermediate
sgcarstrendssgcarstrends
21

server-actions

Create or update Next.js server actions with Zod validation and cache revalidation.

Official
Advanced
ojrojasojrojas

fetch-and-send-data

Manage HTTP requests to APIs in Blazor components with error handling.

Community
Intermediate
kcrleekcrlee

convex-realtime

Implement reactive Convex data flows with useQuery, useMutation, and usePaginatedQuery.

Community
Intermediate