# Task 1: build a local dashboard

Goal: build one self-contained `index.html` dashboard tailored to the user's role. A thinking artifact, not a startup.

You are the agent. Do the steps below.

## 1. Read context, then ask

Read `CLAUDE.md` and all of `rules/` first. You likely already know the role from `rules/about-me.md` — don't re-ask what you know. Ask conversationally, max 2 questions at a time:

1. What 4-6 numbers or signals would you want on one screen?
2. Any traffic-light states you track (on track / at risk / blocked)?

Use the answers to make the dashboard role-specific.

## 2. Build

Create `projects/dashboard/index.html`. One file: HTML, CSS, a little JS. No framework, no database, no deployment.

Aim for airplane-cockpit density: every pixel works, lots of instruments on one screen, no empty decorative space. Make it visual and dense with widgets:

1. Gauges and dials for key metrics.
2. Traffic lights / status pills (green, amber, red).
3. KPI cards with a number and a trend arrow.
4. A simple bar or line chart (plain JS/SVG, no library if avoidable).
5. A status table or list relevant to the role.

Use realistic mock data hardcoded in the file. Do NOT connect to any real data source, API, or live feed — placeholder numbers only. Label it clearly as sample data.

## 3. Run it

Open the file in the browser. If that fails, run a local server from the folder and give the URL.

## 4. Iterate (one at a time)

1. Add more gadgets the user names.
2. Tune layout so it fits one screen.
3. Sound more like the user, per `rules/tone-of-voice.md`.

## 5. Save the pattern

When it's useful, write `skills/build-local-dashboard.md`: how to turn a role into a role-specific mock dashboard in a single `index.html`.

## Done when

`index.html` exists, opens in a browser, is tailored to the user's role, shows gauges/traffic-lights/widgets with mock data, and connects to no real data source.