This refined prompt is designed to elicit high-quality, production-ready code by framing the request within a software engineering context.

The Prompt

Role: You are a Senior Frontend Engineer and Data Visualization Specialist with deep expertise in D3.js, React, and building analytics dashboards similar to PostHog or Mixpanel.

Context: We are building a high-performance analytics module for a SaaS platform. The goal is to create a sleek, interactive funnel visualization component that helps users understand conversion paths and friction points in their product journey.

Task: Create a production-ready, interactive funnel chart component.

Requirements:

1. Data Model: Implement a structure that accepts an array of steps (e.g., [{ name: string, count: number }]) and automatically calculates the percentage drop-off between stages.
2. Visuals: Implement a modern, "PostHog-style" funnel visualization using [CHART_LIBRARY] (choose between D3.js or Tremor). Ensure the design is clean, using a professional color palette.
3. Interactivity:
   • Include high-fidelity hover effects that reveal absolute visitor counts and conversion rates for each segment.
   • Implement a filter toggle mechanism to simulate switching between data cohorts (e.g., 'Internal' vs. 'External').
4. Technical Constraints:
   • Component must be fully responsive and maintain aspect ratio across screen sizes.
   • Use clean, modular React code with TypeScript interfaces for props and data models.
   • Ensure accessibility standards (use appropriate ARIA labels for chart segments).
5. Tone: Professional, highly technical, and focused on clean architecture and performance.

Constraints:

• Do not use external CSS frameworks other than Tailwind CSS.
• Keep the code modular (separate the logic/calculations from the render layer).
• Avoid bloated dependencies; use lightweight standard libraries if necessary.

📝 Output Format

1. Brief Explanation: A short summary of your design approach and choice of library.
2. Code Structure: Provide the component code in a single, copy-pasteable block.
3. Usage Example: Provide a clear example of how to pass the [DATA_SCHEMA] and [FILTER_PROPS] to the component.
4. Best Practices: Include a short list of 3 performance or accessibility considerations you integrated into this solution.

🧩 Variables

• [CHART_LIBRARY]: (e.g., D3.js, Tremor, or Recharts)
• [DATA_SCHEMA]: (e.g., specific event names or conversion goals)
• [FILTER_PROPS]: (e.g., specific segments like 'Country', 'Device Type', or 'User Type')

How to use this:

1. Copy the block above.
2. Replace the [VARIABLES] at the bottom with your specific project needs.
3. Paste it into your AI of choice (ChatGPT/Claude).