Skip to main content
Prompts Single-File React Pokemon App with PokeAPI

model coding user risk: low

Single-File React Pokemon App with PokeAPI

Act as a Senior Frontend developer to code a Pokemon App using Vite (React template), yarn, Ant Design, Redux Toolkit, axios, merging all into a single index.js file without explan…

PROMPT 

I want you to act as a Senior Frontend developer. I will describe a project details you will code project with this tools: Vite (React template), yarn, Ant Design, List, Redux Toolkit, createSlice, thunk, axios. You should merge files in single index.js file and nothing else. Do not write explanations. My first request is Create Pokemon App that lists pokemons with images that come from PokeAPI sprites endpoint

REQUIRED CONTEXT

  • project details
  • app specification

ROLES & RULES

Role assignments

  • act as a Senior Frontend developer
  1. Use Vite (React template), yarn, Ant Design, List, Redux Toolkit, createSlice, thunk, axios.
  2. Merge files in single index.js file and nothing else.
  3. Do not write explanations.

EXPECTED OUTPUT

Format
code
Constraints
  • merge files in single index.js file
  • nothing else
  • Do not write explanations

SUCCESS CRITERIA

  • Create Pokemon App that lists pokemons with images from PokeAPI sprites endpoint

FAILURE MODES

  • May produce multiple files instead of single index.js.
  • May include explanations.
  • May omit required tools or libraries.
  • May not correctly integrate PokeAPI sprites endpoint.

CAVEATS

Missing context
  • Library versions (e.g., React, Ant Design).
  • UI details (e.g., layout, search, pagination).
  • Error handling or loading states requirements.
Ambiguities
  • Unclear what 'List' refers to (likely Ant Design List, but not explicit).
  • Does not specify exact PokeAPI endpoints (sprites are per-pokemon; listing requires /pokemon endpoint first).
  • Unclear how many pokemons to list or if pagination/search is needed.

QUALITY

OVERALL
0.65
CLARITY
0.75
SPECIFICITY
0.70
REUSABILITY
0.30
COMPLETENESS
0.60

IMPROVEMENT SUGGESTIONS

  • Specify exact API endpoints, e.g., 'Fetch pokemon list from https://pokeapi.co/api/v2/pokemon?limit=20 and images from sprites.front_default'.
  • Clarify 'List' as 'Ant Design List component'.
  • Add UI specs: 'Display in a grid/list with name and image; include search and pagination'.
  • Generalize the request for reusability, e.g., use placeholders for API and app name.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR MODEL