GitHub Copilot prompt to build a dashboard UI
Drop this into Copilot Edits in VS Code and it assembles a stats-chart-table dashboard for {{resource}} from components your project already ships. Because GitHub Copilot reads package.json and your open files, the result reuses your design system rather than importing a second charting stack, and every section handles loading, empty, and error states.
Last updated
Build a dashboard page in this codebase that summarizes {{resource}} activity. Use the component library and styling approach already in the project; check package.json before picking anything new. Layout: a four-stat summary row, a line chart of {{resource}} over the last 30 days, and a recent-items table with column sorting and a date-range filter. Fetch data through the existing API client with loading skeletons per section, so one slow request does not blank the page. Handle the empty account case with a short explainer instead of a zeroed chart, and show a retry button on fetch errors. Keep chart logic in its own component and type the API response instead of using any. Verify by running the dev server and the type checker, then list the components you added.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Build a dashboard page in this codebase that summarizes users activity. Use the component library and styling approach already in the project; check package.json before picking anything new. Layout: a four-stat summary row, a line chart of users over the last 30 days, and a recent-items table with column sorting and a date-range filter. Fetch data through the existing API client with loading skeletons per section, so one slow request does not blank the page. Handle the empty account case with a short explainer instead of a zeroed chart, and show a retry button on fetch errors. Keep chart logic in its own component and type the API response instead of using any. Verify by running the dev server and the type checker, then list the components you added.
Same task in other tools
Questions about this prompt
Copilot keeps inventing a chart library we do not use. What is the fix?
Open package.json and one existing chart or UI component before sending the prompt, then name the library explicitly, for example "use the Recharts wrapper in src/components/charts". Unreferenced, it picks the most common option for your framework.
Can I get this as one component instead of a page?
Yes. Change the first line to "Build a Dashboard component that accepts data as props" and delete the fetching instructions. That also makes the layout easy to exercise in Storybook if your repo has one.
The generated table sorts client-side but my dataset is large. Can sorting and filtering move to the endpoint?
Tell it sorting and the date filter must map to query params on the existing endpoint, and specify the param names. Copilot will move that logic into the fetch call and keep the table presentational.