plan-my-life prompt example

gistfile1.txt

{
“app”: {
“name”: “PlanMyLife”,
“tagline”: “Modern financial planner”,
“route”: “/dashboard”,
“viewport”: {
“minWidth”: 320,
“maxWidth”: 1440
}
},
“designTokens”: {
“colors”: {
“bg”: “#FFFFFF”,
“bgMuted”: “#F7F8FA”,
“textPrimary”: “#111827”,
“textSecondary”: “#6B7280”,
“textMuted”: “#9CA3AF”,
“border”: “#E5E7EB”,
“borderMuted”: “#F1F5F9”,
“surface”: “#FFFFFF”,
“surfaceAlt”: “#FAFAFB”,
“navBg”: “#273241”,
“navBgActive”: “#374151”,
“navText”: “#E5E7EB”,
“navTextMuted”: “#BFC7D1”,
“primary”: “#2AA39A”,
“primarySoft”: “rgba(42,163,154,0.15)”,
“accent”: “#4F46E5”,
“success”: “#10B981”,
“warning”: “#F59E0B”,
“danger”: “#EF4444”
},
“radius”: {
“sm”: 6,
“md”: 10,
“lg”: 14,
“xl”: 18
},
“elevation”: {
“card”: “0 1px 2px rgba(16,24,40,0.06),0 1px 3px rgba(16,24,40,0.10)”,
“popover”: “0 8px 24px rgba(16,24,40,0.18)”
},
“spacing”: [0,4,8,12,16,20,24,28,32],
“typography”: {
“family”: “Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto”,
“sizes”: {
“xs”: 12,
“sm”: 14,
“md”: 16,
“lg”: 18,
“xl”: 20,
“2xl”: 24,
“3xl”: 30,
“4xl”: 36
},
“weights”: { “regular”: 400, “medium”: 500, “semibold”: 600, “bold”: 700 }
}
},
“layout”: {
“type”: “sidebar + topbar”,
“grid”: {
“columns”: 12,
“gutter”: 24,
“contentMaxWidth”: 1200
},
“regions”: {
“sidebar”: {
“width”: 248,
“bg”: “{colors.navBg}”,
“text”: “{colors.navText}”,
“collapsedWidth”: 72
},
“topbar”: {
“height”: 56,
“borderBottom”: true,
“shadow”: false
},
“contentPadding”: [24,24,32,24]
}
},
“navigation”: {
“brand”: {
“logoText”: “PlanMyLife”,
“logoVariant”: “wordmark”,
“area”: “sidebar.top”
},
“items”: [
{ “icon”: “Rocket”, “label”: “Upgrade”, “href”: “/upgrade” },
{ “icon”: “LayoutGrid”, “label”: “Dashboard”, “href”: “/dashboard”, “active”: true },
{ “icon”: “Wallet”, “label”: “Current Finances”, “href”: “/finances” },
{ “icon”: “TrendingUp”, “label”: “Progress”, “href”: “/progress” },
{
“icon”: “FolderChart”, “label”: “Plans”, “href”: “/plans”, “expandable”: true, “expanded”: true,
“children”: [
{ “icon”: “ActivitySquare”, “label”: “Current Projections”, “href”: “/plans/current” },
{ “icon”: “PlusCircle”, “label”: “New Plan”, “href”: “/plans/new” }
]
},
{ “divider”: true },
{ “icon”: “HelpCircle”, “label”: “Help Center”, “href”: “/help” },
{ “icon”: “Gift”, “label”: “Gift a Subscription”, “href”: “/gift” },
{ “icon”: “Library”, “label”: “Resources”, “href”: “/resources”, “expandable”: true, “expanded”: false },
{ “icon”: “LifeBuoy”, “label”: “Support”, “href”: “/support” },
{ “icon”: “Info”, “label”: “More Info”, “href”: “/about” }
],
“states”: {
“hoverBg”: “rgba(255,255,255,0.06)”,
“activeBg”: “{colors.navBgActive}”,
“activeIndicator”: { “width”: 3, “color”: “{colors.primary}” }
}
},
“topbar”: {
“left”: [
{ “type”: “iconButton”, “icon”: “Menu”, “ariaLabel”: “Toggle sidebar” },
{ “type”: “title”, “text”: “Dashboard” }
],
“right”: [
{ “type”: “iconButton”, “icon”: “CloudOff”, “ariaLabel”: “Sync status”, “tone”: “warning” },
{ “type”: “iconButton”, “icon”: “Boxes”, “ariaLabel”: “Integrations” },
{ “type”: “iconButton”, “icon”: “Wand2”, “ariaLabel”: “Quick actions” },
{ “type”: “avatar”, “image”: “user://me”, “menu”: [“Profile”,“Settings”,“Sign out”] }
]
},
“dashboard”: {
“sections”: [
{
“id”: “net-worth-and-ledgers”,
“type”: “twoColumn”,
“columns”: [
{
“span”: 8,
“cards”: [
{
“type”: “metricChart”,
“id”: “net-worth”,
“title”: “Net Worth”,
“value”: “$1.24M”,
“subMetric”: { “label”: “All Time”, “value”: “+$785K”, “deltaPct”: “174.44%”, “deltaTone”: “success” },
“chart”: {
“kind”: “lineArea”,
“height”: 320,
“yAxis”: {
“ticks”: [”$600K”,”$800K”,”$1M”,”$1.2M”],
“grid”: “dashed”
},
“xAxis”: {
“ticks”: “auto”,
“rangeButtons”: [
{“label”: “1M”}, {“label”: “3M”}, {“label”: “1Y”},
{“label”: “5Y”}, {“label”: “10Y”}, {“label”: “ALL”, “active”: true}
]
},
“series”: [
{
“name”: “Net Worth”,
“color”: “{colors.primary}”,
“lineWidth”: 3,
“areaFill”: “linear-gradient(180deg, rgba(42,163,154,0.28) 0%, rgba(42,163,154,0.06) 100%)”,
“points”: { “size”: 6, “style”: “dot” }
}
],
“legend”: false,
“tooltip”: “date, value, delta vs previous point”,
“cardStyle”: { “radius”: “{radius.lg}”, “shadow”: “{elevation.card}” }
}
}
]
},
{
“span”: 4,
“cards”: [
{
“type”: “statList”,
“id”: “assets”,
“title”: “Assets”,
“value”: “$1.34M”,
“items”: [
{ “icon”: “Home”, “label”: “House”, “value”: “$625K”, “tone”: “default” },
{ “icon”: “LineChart”, “label”: “401k/403b”, “value”: “$198K” },
{ “icon”: “LineChart”, “label”: “401k/403b”, “value”: “$125K” },
{ “icon”: “PiggyBank”, “label”: “Roth IRA”, “value”: “$120K” },
{ “icon”: “CandlestickChart”, “label”: “Taxable Investments”, “value”: “$95K” },
{ “icon”: “PiggyBank”, “label”: “Roth IRA”, “value”: “$65K” },
{ “icon”: “Safe”, “label”: “Savings”, “value”: “$35K” },
{ “icon”: “Safe”, “label”: “Savings”, “value”: “$25K” },
{ “icon”: “Bitcoin”, “label”: “Cryptocurrency”, “value”: “$25K” }
],
“rowStyle”: {
“height”: 44,
“radius”: “{radius.md}”,
“bg”: “{colors.surface}”,
“border”: “{colors.border}”
}
},
{
“type”: “statList”,
“id”: “liabilities”,
“title”: “Liabilities”,
“value”: “$101.5K”,
“items”: [
{ “icon”: “Home”, “label”: “House Loan”, “value”: “$95K” },
{ “icon”: “Car”, “label”: “My Car Loan”, “value”: “$6.5K” }
]
}
]
}
]
},
{
“id”: “plans-for-future”,
“header”: {
“title”: “Plans for the Future”,
“rightControl”: {
“type”: “select”,
“label”: “Horizon”,
“value”: “Next 20 Years”,
“options”: [“Next 10 Years”,“Next 20 Years”,“Until Retirement”,“Custom…”]
}
},
“type”: “twoColumn”,
“columns”: [
{
“span”: 6,
“cards”: [
{
“type”: “planCard”,
“id”: “current-projections”,
“icon”: “ChartLineUp”,
“title”: “Current Projections”,
“subtitle”: “Now”,
“menu”: [“Edit”,“Duplicate”,“Archive”],
“chart”: {
“kind”: “lineArea”,
“height”: 220,
“yAxis”: { “ticks”: [”$2M”,”$3M”,”$4M”], “grid”: “dashed” },
“series”: [
{ “name”: “Projection”, “color”: “#5661E9”, “lineWidth”: 3, “points”: { “size”: 4 } }
],
“markers”: [
{ “x”: “year+5”, “label”: “Goal A”, “style”: “badge”, “tone”: “primary” },
{ “x”: “year+7”, “label”: “Goal B”, “style”: “badge”, “tone”: “success” },
{ “x”: “year+9”, “label”: “Goal C”, “style”: “badge”, “tone”: “danger” }
]
}
}
]
},
{
“span”: 6,
“cards”: [
{
“type”: “addCard”,
“id”: “add-plan”,
“icon”: “Plus”,
“title”: “Add Plan”,
“subtitle”: “Create a new plan”,
“cta”: { “text”: “New Plan”, “href”: “/plans/new”, “variant”: “outline” }
}
]
}
]
}
]
},
“components”: {
“metricChart”: {
“props”: [“title”,“value”,“subMetric”,“chart”],
“emptyState”: { “title”: “No data yet”, “action”: “Connect accounts” },
“loadingState”: “skeleton: title 24px, metric 40px, chart shimmer”
},
“statList”: {
“props”: [“title”,“value”,“items”],
“row”: { “leadingIconBg”: “{colors.bgMuted}”, “leadingIconRadius”: 8, “valueAlign”: “right” }
},
“planCard”: {
“header”: { “iconBg”: “#E0E7FF”, “iconColor”: “#4338CA” },
“menu”: “kebab (3-dots) aligned right”,
“chartStyle”: { “areaFill”: “rgba(79,70,229,0.12)” }
},
“addCard”: {
“layout”: “left aligned icon circle + title + subtitle”,
“iconCircle”: { “size”: 36, “bg”: “{colors.bgMuted}” }
},
“rangeButtons”: {
“shape”: “pill”,
“activeBg”: “#E5E7EB”,
“gap”: 8,
“height”: 32,
“paddingX”: 12
}
},
“interactions”: {
“rangeButtons”: {
“onClick”: “fetch timeseries for selected range; animate line with 300ms ease; keep Y scale auto”,
“keyboard”: “ArrowLeft/Right cycles range”,
“ariaRole”: “tablist”
},
“statRow”: {
“hover”: “subtle bg tint; cursor: pointer if row opens detail”,
“onClick”: “open /assets/:id or /liabilities/:id side-drawer with breakdown”
},
“planCardMenu”: { “onSelect”: { “Edit”: “navigate /plans/:id/edit” } },
“topbar”: {
“menu”: “avatar opens profile menu”,
“cloudIcon”: “shows tooltip: ‘Offline sync (click to retry)’”
}
},
“accessibility”: {
“contrast”: “All text >= 4.5:1 against background; nav selected >= 7:1”,
“focus”: “2px focus ring {colors.accent}”,
“labels”: {
“netWorthChart”: “Line chart of net worth over time”,
“assetsList”: “List of assets and balances”,
“liabilitiesList”: “List of liabilities and balances”,
“plansChart”: “Projection of portfolio over selected horizon”
}
},
“dataModels”: {
“TimeSeriesPoint”: { “date”: “ISO-8601”, “value”: “number” },
“AssetCategory”: { “id”: “string”, “name”: “string”, “icon”: “enum”, “amount”: “number”, “currency”: “USD” },
“Liability”: { “id”: “string”, “name”: “string”, “icon”: “enum”, “amount”: “number”, “apr”: “number?” },
“Plan”: { “id”: “string”, “name”: “string”, “start”: “date”, “horizonYears”: “number”, “series”: “TimeSeriesPoint[]” }
},
“responsive”: {
“breakpoints”: {
“sm”: 640, “md”: 768, “lg”: 1024, “xl”: 1280
},
“rules”: [
“>=lg: sidebar fixed 248px; grid 8/4 then 6/6”,
“<lg: sidebar collapsible; topbar gains burger; stat lists stacked under chart”,
“<md: charts height reduces by 20%; range buttons wrap”,
“<sm: single column; assets & liabilities collapse into accordion”
]
},
“states”: {
“loading”: {
“dashboard”: “skeleton blocks for chart (320px height), two stat lists, and plan cards”
},
“empty”: {
“assets”: “empty message + CTA Connect Account”,
“plans”: “Add Plan card spans full row”
},
“error”: {
“toast”: “top-right, auto-hide 6s; color danger”
}
},
“i18n”: {
“currency”: “locale-aware; default en-US; allow BRL, EUR”,
“numberShortening”: “1.24M format; toggle to exact via tooltip”
}
}

CODE AGENT PROMPT (implementation notes)

Build PlanMyLife’s Dashboard using React + TypeScript + Tailwind + Recharts.
	1.	Set up a 12-column layout with a fixed left sidebar (248px) and a 56px topbar. Respect tokens above (Tailwind config: colors, radius, drop shadows).
	2.	Implement components:

	•	<Sidebar /> with expandable “Plans” group and active styles.
	•	<Topbar /> with Menu, Sync, Integrations, QuickActions, and Avatar menu.
	•	<MetricChartCard /> for Net Worth (line + area, gradient fill, pill range buttons; fetch handler stub).
	•	<StatListCard /> for Assets and Liabilities (rows with icon left, amount right, clickable to open a side-drawer detail).
	•	<PlansHeader /> with horizon <Select/>.
	•	<PlanCard /> showing a compact line chart and a kebab menu.
	•	<AddCard /> with plus icon and CTA.

	3.	Use the dataModels to type props. Add dummy data to match the values in JSON.
	4.	Accessibility: give charts aria-label from accessibility.labels, apply focus rings, and ensure keyboard navigation for range buttons.
	5.	Animations: 200–300ms ease for chart updates and hover transitions.
	6.	Responsiveness: apply the responsive.rules—stack columns below lg, collapse assets/liabilities into accordions below sm.
	7.	File structure:
  
  /src
  /components/{Sidebar,Topbar,MetricChartCard,StatListCard,PlanCard,AddCard}.tsx
  /pages/Dashboard.tsx
  /models/{types.ts}
  /theme/tokens.ts
  
  8.	Deliverables: a working /dashboard page replicating the described UI and interactions; tokens centralized; all strings externalized for i18n; sample tests that render cards with mock data.