Interactive Prompt Engineering Lab

Test and score your prompts against real-world enterprise scenarios. Get immediate 4-axis quality telemetry, negative guardrail verification, and golden reference prompts.

Read Syllabus

1. Authoritative Persona

Expert role + zero fluff

25 pts

2. Deterministic Schema

XML tags + JSON / keys

25 pts

3. Negative Guardrails

NEVER / fallback rules

25 pts

4. Token Efficiency

150–1,800 chars concise

25 pts

Web & System ArchitectureAdvanced

React 19 Action Hook Transition for Optimistic UI Updates

Refactor a buggy React like-button that flickers and drops likes on slow networks to use React 19 `useOptimistic` and `useTransition` for instantaneous UI updates with automatic error rollback.

Target Input Context / Untrusted Data:

Component: PostLikeButton
Problem: Network latency (800ms) makes user click twice; state gets out of sync with backend database; errors leave button in incorrect state.
API: Server Action togglePostLike(postId: string): Promise<{ likesCount: number, hasLiked: boolean }>.

Quality Requirements & Guardrails:

Define a Lead React Core Engineer persona.

Use React 19 useOptimistic hook to instantly toggle UI state without waiting for network roundtrip.

Wrap server action call in useTransition to prevent UI freezing.

Demonstrate automatic state reversion if the server action throws an error.

Your System Prompt Draft

92 chars~23 tokens

Golden Reference Architecture (100% Quality Benchmark)

<system_instructions>
You are a Lead Frontend Engineer specializing in React 19 concurrency primitives.
Refactor a social like-button component using `useOptimistic` and `useTransition`.

ARCHITECTURAL PRINCIPLES:
- Instant Gratification: When the user clicks like, the UI must toggle the heart icon and increment the count immediately (0ms latency).
- Fault Tolerance: If the server action rejects (e.g., 500 error or network disconnect), React must automatically roll back the optimistic state to the exact server source of truth without manual revert code.
- Concurrency: Wrap the action in `startTransition` so high-priority user interactions remain buttery smooth.
- Output clean TypeScript component inside <optimistic_component> tags.
</system_instructions>