This is a live earthquake visualization dashboard connected to the USGS earthquake API (no key required, CORS-enabled). Filters: Combine time range (Past Hour / Day / 7 Days / 30 Days) with minimum magnitude (All M1.0+ / M2.5+ / M4.5+ / Significant), mapped directly to USGS's actual feed URLs ({threshold}_{period}.geojson). World Map: Each earthquake is shown as a dot sized and colored by magnitude (green → yellow → orange → red → purple). Clicking a dot auto-scrolls to it in the list below. Magnitude Distribution: A bar chart showing how many quakes fell into each magnitude range (<2 / 2–3 / 3–4 / 4–5 / 5–6 / 6+). Depth vs. Magnitude: A scatter plot showing the relationship between magnitude and depth (deeper quakes plot lower, stronger quakes plot further right). Recent Earthquakes list: Sorted by magnitude, showing location, depth, and time elapsed, with click-to-highlight on the map. Summary cards: Total quake count, largest magnitude, average magnitude, and average depth.

🧱 Tab 1 — Anatomy

Breaks a real prompt down into six colour-coded blocks. Click any block to open a detailed explanation in the right panel covering the component's purpose, how to write it, common mistakes, and actionable tips.

🎭 Role (purple) — persona definition

📋 Context (blue) — background information

🎯 Task (green) — the core instruction

📐 Format (yellow) — output structure

📸 Examples (orange) — few-shot samples

🚧 Constraints (red) — what to exclude

Six quality score bars are shown at the bottom — Clarity, Specificity, Context depth, and more. The six technique cards below the blocks link directly to Tab 3 when clicked.

⚖️ Tab 2 — Before / After

Places a weak prompt and a fully engineered prompt side by side for the same request. Four real-world scenarios included:

📧 Sales email writing

💻 Code review

📊 Data analysis

✍️ Creative writing

Each pair shows actual AI response examples alongside quality tags (❌ Vague / ✅ Role defined, etc.).

🎯 Tab 3 — Techniques

Eight techniques explained using a left-side navigation and right-side detail panel layout:

Chain of Thought · Few-Shot · Role Prompting · Output Formatting · Self-Consistency · Tree of Thought · Iterative Refinement · Constraint Prompting

Each technique includes a concept explanation, a side-by-side prompt comparison (❌ without the technique / ✅ with it), and four practical tips.

🛠️ Tab 4 — Playground

Build your own prompt using four text inputs (Role · Context · Task · Format) and four technique toggles (Chain of Thought · Role Prompting · Few-Shot · Structured Output).

Clicking ⚡ Build & Analyse produces:

A fully assembled prompt preview with each component highlighted in its own colour

A quality score (0–100) plus estimated token and word count

A component checklist (✓ / ✗) showing what is present and what is missing

Specific improvement suggestions — add a role, prompt too short or too long, consider CoT, and so on