Demo build: pick your capstone
30 to 35 minute build. Choose a dashboard or marketing path, run phased prompts, then polish using path-specific tips.
This is the longer hands-on build after the Taskflow landing demo and the skills page. You choose one path below, keep your own stack (Next, Vite, Razor, Blazor, etc.), and finish in about 30 to 35 minutes.
Need help? Re-read the phase prompts for your path, paste terminal errors back into your agent, or search this handbook for related topics.
Prompts are suggestions
The starter prompts in each path are ideas, not a script you must read word for word. Change the wording to match your voice: shorter or longer, more casual or more formal, whatever feels natural. Keep the intent the same (what to build, stack, fake data, rough structure) so the agent still has enough signal.
We will cover how to improve prompts more systematically later. For this capstone, prioritize what feels right in the moment and iterate if the result is off.
Before you start
- Stack: State it clearly in every big prompt: framework, styling system, and do not replace the framework.
- Data: Use fake or in-memory data only for this exercise. No real analytics APIs in the timebox.
AGENTS.md: By the end, document how to run, build, and test this repo.
Workflow (all paths)
Update the design of this screen using /frontend-design. Add a one-line constraint for your stack if needed./workshop-three-checks (or your copy) and update AGENTS.md.Run: npm run dev, dotnet watch, or whatever your project already uses, the same commands work in PowerShell, cmd, and Unix shells. Paste terminal errors back into the agent if something breaks.
Pick your capstone path
Each card jumps to a starter prompt and polish ideas. Complete one path in the timebox.
- PathKPI analytics dashboardCards + trends with static or in-memory fake data.Open section ↓
- PathService status boardServices, health badges, short incident notes.Open section ↓
- PathSprint task boardTo do, Doing, Done columns with static cards.Open section ↓
- PathCampaign calendarWeek or two-week grid with campaign cells.Open section ↓
- PathSupport ticket queueTable or cards with priorities and fake tickets.Open section ↓
- PathDevice health wallDevice grid, status, optional detail panel.Open section ↓
- PathRich marketing pageYour product: hero, proof, grid, FAQ, footer.Open section ↓
KPI analytics dashboard
Goal: One view with 3 to 4 KPI cards (sessions, signups, errors, revenue, etc.) plus a simple trend (CSS bars, div sparklines, or a chart library only if the repo already uses one).
Phase 1: starter prompt
Build a single-page KPI analytics dashboard UI in this repo.
STACK (do not change): [your stack + styling].
Use fake static data or in-memory state only (no real API).
Include: page title, 3-4 KPI cards with label + big number + short delta or subtitle, and a "trend" area (last 7 days) using simple bars or a minimal chart-like layout without adding heavy deps unless already present.
Layout should work on mobile (stack) and desktop (grid). List files changed and how to run the app.Polish and level up
- Readability: Align number typography (tabular nums if available), consistent card height, clear hierarchy (label smaller than value).
- Meaning: Use color sparingly for good vs bad deltas; add a one-line legend if you use red or green.
- Trust: Subtle "last updated" or "demo data" note so it does not look like live production metrics.
- Depth: Empty state copy if a KPI were zero; optional range toggle (7d vs 30d) that only swaps fake data.
Service status board
Goal: Services or systems in a scannable list or grid: name, status (up / degraded / down), short note, optional link placeholder.
Phase 1: starter prompt
Build a service status / on-call style board in this repo.
STACK (do not change): [your stack + styling].
Static fake data only. Show at least 6 rows or cards: service name, status badge (green/yellow/red), one line status text, optional "last incident" placeholder.
Include a tiny legend explaining the colors. Responsive layout. List files changed and how to run the app.Polish and level up
- Scan: Status column or badge column first; monospace or tabular for timestamps if you show them.
- A11y: Do not rely on color alone; add text or icons for each state.
- Rhythm: Group related services (optional subsection headers) in a follow-up prompt.
- Motion: Optional subtle pulse only on degraded if you keep it tasteful and short.
Sprint task board
Goal: Three columns: To do, Doing, Done, with 5 to 8 static cards (title, owner initials, optional due date). Drag-and-drop is optional; skip if it blows the timebox.
Phase 1: starter prompt
Build a read-only sprint board UI: columns To do, Doing, Done.
STACK (do not change): [your stack + styling].
Static cards only (no backend). 5-8 cards total with title, owner label, optional fake date. Clear column headers and counts per column.
Responsive: horizontal scroll on small screens or stacked columns. List files changed and how to run the app.Polish and level up
- WIP: Add a fake WIP limit note on Doing (text only) to make it feel real.
- Density: Tighter card padding on desktop; touch-friendly tap targets on mobile.
- Priority: Small P1 / P2 pill on two cards via a follow-up.
- Depth: If you have time, one card expands inline detail (still static text).
Campaign calendar
Goal: One or two week grid: days as columns or rows, cells with campaign name + channel (email, social, blog). All fake.
Phase 1: starter prompt
Build a lightweight campaign calendar view for 2 weeks.
STACK (do not change): [your stack + styling].
Fake campaigns only. Grid should show day labels and cells with campaign title + channel tag. At least 8 scheduled items spread across the grid.
Optional: clicking a cell shows a small detail panel or modal with placeholder copy. List files changed and how to run the app.Polish and level up
- Grid: Fix alignment (equal cell min-height), truncate long titles with tooltip or title attribute.
- Today: Highlight today in the range.
- Channels: Consistent channel color dots or tags.
- Overflow: If the grid is cramped on mobile, switch to list-by-day in one follow-up.
Support ticket queue
Goal: Table or cards for 6 to 10 fake tickets: id, subject, priority, status, assignee. Optional client-side filter (open only).
Phase 1: starter prompt
Build a support queue mini-UI: list or table of fake tickets.
STACK (do not change): [your stack + styling].
6-10 tickets with id, subject, priority (low/med/high), status (open/closed), assignee. Use badges for priority and status.
Add a primary button "New ticket" that only shows a toast or alert (no backend). List files changed and how to run the app.Polish and level up
- Table UX: Sticky header on desktop; card layout on narrow screens.
- Filter: One prompt: show only open with a toggle or tabs.
- Sort: Sort by priority then id (agent can fake order in data).
- Empty: After filtering, empty state message.
Device health wall
Goal: Grid of devices with name, last seen, battery or health %, alert flag. Click or focus opens a detail strip (static).
Phase 1: starter prompt
Build a device health monitoring style dashboard.
STACK (do not change): [your stack + styling].
Fake devices only (at least 8). Each tile: device name, status ok/warn/crit, last seen label, optional battery percent.
Clicking a device shows a detail panel or side section with extra placeholder fields. List files changed and how to run the app.Polish and level up
- Alerts: Warn / crit devices sort to the top or get a slim alert banner count.
- Grid: minmax card width so the grid does not stretch awkwardly on ultrawide.
- Detail: Breadcrumb or "back" to clear selection on mobile.
- Realism: Fake firmware version line in detail for one follow-up.
Rich marketing page
Goal: Your product (not Taskflow), more sections than the first landing demo: hero, proof, feature or pricing teaser, testimonial, FAQ, footer.
Phase 1: starter prompt
Build a richer single-page marketing site for a fictional product I will describe: [name + one sentence what it does].
STACK (do not change): [your stack + styling].
One scrollable page with: hero + two CTAs, 3 metrics or logos strip, 3 feature cards, testimonial quote, 3-item FAQ, footer with 3 link groups (use # placeholders).
Tone: confident, modern SaaS. No real integrations. List files changed and how to run the app.Polish and level up
- Story: Hero value prop in one tight line; repeat keyword once in features, not everywhere.
- FAQ: Accordion if your stack makes it easy; otherwise clear Q/A spacing.
- Social proof: Named logos as text or gray placeholders, not fake trademark logos.
- CTA: Primary button stands out; secondary is visually quieter.
Phase 4 (every path)
/workshop-three-checks (or your installed copy).AGENTS.md: run commands, test command if any, and which capstone path you built so the next session has context.