Windsurf prompt to build a dashboard UI
This prompt gives Cascade a fixed layout, a data-fetching contract, and explicit loading, error, and empty states, which is exactly the detail Windsurf needs to avoid inventing its own dashboard structure. The result is a responsive stat-cards-plus-charts screen built with your project's existing components rather than a generic template.
Last updated
Build a dashboard UI in this project using {{language}} and the existing component conventions. Layout: a fixed sidebar with nav links, a top bar with a date-range picker, and a main grid of four stat cards above two charts and a recent-activity table. Fetch data through a single useDashboardData hook so widgets stay decoupled from the API layer. Every widget needs three states: skeleton while loading, an inline retry on fetch failure, and a zero-data message that tells the user what action creates data. The table should sort by column header and paginate client-side up to 500 rows. Keep the grid responsive: cards collapse to one column below 768px and charts stay legible at 320px wide. When done, run the dev server, confirm no console errors, and list the components you added with their file paths.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Build a dashboard UI in this project using TypeScript and the existing component conventions. Layout: a fixed sidebar with nav links, a top bar with a date-range picker, and a main grid of four stat cards above two charts and a recent-activity table. Fetch data through a single useDashboardData hook so widgets stay decoupled from the API layer. Every widget needs three states: skeleton while loading, an inline retry on fetch failure, and a zero-data message that tells the user what action creates data. The table should sort by column header and paginate client-side up to 500 rows. Keep the grid responsive: cards collapse to one column below 768px and charts stay legible at 320px wide. When done, run the dev server, confirm no console errors, and list the components you added with their file paths.
Same task in other tools
Questions about this prompt
Will Windsurf reuse my existing chart library?
Usually yes: Cascade indexes the repo and reaches for whatever is already in package.json, Recharts, Chart.js, or ECharts alike. If no chart dependency exists it will pick and install one, so name your choice in the prompt when bundle size or licensing matters.
Every widget shares one page-level spinner instead of its own skeleton. Why?
Cascade sometimes hoists loading state into the shell for simplicity. Tell it 'each widget owns its skeleton, retry, and empty state independently, remove the page-level spinner' and review the hook to confirm each consumer gets its own status flags.
How do I adapt this prompt for a server-rendered stack?
Swap the hook instruction for loader-based fetching: ask for data resolved in the route loader or server component and passed down as props, while retry buttons and empty states stay client components. Mention your framework and router flavor so Cascade picks the right data API.