Vibe CodingFeature iterationComplex

Integrate an API with complete loading, empty, error, and retry states

Integrate against the real API contract and give every user-visible state explicit behavior.

Task specification
Task type
Feature iteration
Target platform
Web
Existing project
Required
Compatible tools
Codex · Claude Code · Cursor · GitHub Copilot
Before you start

Prepare this information

Fill in the essential material before handing the task to a coding agent.

  • Real API documentation or response samples
  • The target page and existing request client
  • Safe authentication and environment configuration
  • Retry pagination and error-display policies
Copy-ready template

Complete task template

Replace the placeholders in braces. Implementation boundaries and verification requirements are already included.

Act as a coding agent responsible for integration quality. Use {API documentation} to integrate data into {target page} with {authentication method}, following {data mapping} and {failure policy}. Inspect the existing request client, types, caching approach, error handling, environment variables, and mocks first. Identify which response fields, status codes, and pagination rules have real evidence. Do not guess private endpoints, print credentials, or treat every HTTP 200 response as business success. Create a concise state table for initial loading, refresh, background update with existing data, empty results, retryable errors, non-retryable errors, timeout, cancellation, partial data, unauthenticated, and forbidden states. Define the trigger, visible message, available action, and whether previous data remains for each state. Reuse the existing client to implement a typed request and mapping. Prevent duplicate submissions, stale responses overwriting newer data, and updates after unmount. Give retries a clear limit and respect idempotency; never create an infinite loop. Make errors actionable without exposing stack traces, tokens, or sensitive response data. Trigger the important states with real or contract-approved responses, distinguishing transport success, HTTP success, and business success. Add automated tests for mapping, errors, and races. Run formatting, type, test, and build checks, then inspect live-page keyboard and screen-reader feedback. Report the contract evidence, state table, changed scope, observed request and page behavior, server cases that could not be simulated, and monitoring suggestions. Mark unsupported fields or behavior as assumptions instead of presenting them as a verified contract.
After it finishes

Do not rely on a claim of completion

Check the real page, runtime behavior, and test evidence item by item.

  • Every critical state can be triggered for real
  • Transport HTTP and business success are distinct
  • Races duplicate submissions and retry limits are handled
  • Tests build results and unsimulated server cases are recorded

Inspiration source

This prompt is an original adaptation. The source X post appears below, and you can also open it directly on X.

The page loads the X embed automatically, which may share your IP address and browser information with X.

Open original on X

Loading the X post…

Keep building

Related Vibe Coding prompts