skill-gallery

Data dashboard

A sales and operations dashboard for Kestrel Coffee Roasters: KPI cards, a monthly revenue chart with a channel filter, category shares, a sortable café table, recent orders and a stock warning, all from fixed data.

prompts/dashboard.md · version 1. All skills side by side: each column is one skill, each row one agent.

Prompt text

In English, exactly as it was sent to the agents. It is not translated.

Build a sales and operations dashboard for Kestrel Coffee Roasters, a fictional coffee roaster that sells through an online store and four cafés. The dashboard is used by the operations lead every morning to see how October 2026 went compared with September 2026. Use only the data given below; do not invent other figures for the charts and tables.

## Layout and content

1. **Navigation.** A navigation area with the company name "Kestrel Coffee Roasters" and these items: Overview (the current page), Orders, Products, Customers, Inventory, Reports, Settings. On small screens the navigation must still be reachable.

2. **Top bar.** Page title "Sales & Operations", the period "October 2026", a search field with the placeholder "Search orders, products, customers", and the signed-in user "Mara Kim, Operations lead" shown with initials "MK".

3. **KPI cards** (October 2026, change versus September 2026):
   - Revenue: $184,320 (+6.4%)
   - Orders: 9,412 (+3.1%)
   - Average order value: $19.58 (+3.2%)
   - Subscription customers: 1,286 (+48 net)
   - Refund rate: 1.9% (−0.3 percentage points; a decrease is good)

4. **Monthly revenue chart**, November 2025 to October 2026, in thousands of US dollars, split by channel:

   | Month    | Online | Cafés |
   | -------- | -----: | ----: |
   | Nov 2025 | 61 | 88 |
   | Dec 2025 | 74 | 102 |
   | Jan 2026 | 58 | 81 |
   | Feb 2026 | 60 | 84 |
   | Mar 2026 | 63 | 89 |
   | Apr 2026 | 66 | 93 |
   | May 2026 | 68 | 97 |
   | Jun 2026 | 70 | 99 |
   | Jul 2026 | 72 | 96 |
   | Aug 2026 | 75 | 95 |
   | Sep 2026 | 79 | 94 |
   | Oct 2026 | 83 | 101 |

   Provide a control to show All channels, Online only, or Cafés only. Show the exact value for a month on hover or tap.

5. **Revenue by category** (October 2026, share of revenue): Whole bean 38%, Espresso drinks 27%, Filter & cold brew 14%, Pastries 12%, Equipment 6%, Gift cards 3%.

6. **Café performance table** (October 2026). The table must be sortable by clicking a column header.

   | Café | Revenue | Orders | Average ticket | Change vs Sep |
   | ---- | ------: | -----: | -------------: | ------------: |
   | Harbor Street | $31,420 | 1,812 | $17.34 | +4.8% |
   | Mill Lane | $27,960 | 1,655 | $16.89 | +2.1% |
   | Station Square | $24,310 | 1,498 | $16.23 | −1.7% |
   | Riverside (opened June 2026) | $17,630 | 1,127 | $15.64 | +9.6% |

7. **Top online products** (October 2026):

   | Product | Units | Revenue |
   | ------- | ----: | ------: |
   | Morning Tide blend, 340 g | 1,104 | $16,008 |
   | Ridgeback espresso, 1 kg | 412 | $14,420 |
   | Cold brew concentrate, 1 L | 655 | $9,170 |
   | Ceramic pour-over set | 138 | $6,210 |
   | Single-origin sampler | 291 | $5,529 |

8. **Recent orders:**

   | Order | Customer | Channel | Items | Total | Status |
   | ----- | -------- | ------- | ----: | ----: | ------ |
   | #48213 | Ana Ruiz | Online | 2 | $41.00 | Shipped |
   | #48212 | Tomás Berg | Harbor Street | 3 | $14.75 | Paid |
   | #48211 | Priya Nair | Online | 1 | $35.00 | Pending |
   | #48210 | Jonah Weiss | Mill Lane | 2 | $9.40 | Paid |
   | #48209 | Lena Okafor | Online | 4 | $63.50 | Refunded |
   | #48208 | Sam Choi | Riverside | 1 | $5.25 | Paid |

   The four statuses must be distinguishable from each other.

9. **Green coffee inventory** (days of stock left at the current roasting rate): Ethiopia Guji 6 days, Colombia Huila 14 days, Brazil Cerrado 3 days, Kenya Nyeri 21 days. Flag anything under 7 days as needing a reorder.

## Output requirements

- Write exactly one file named `index.html` in the current working directory. Put all HTML, CSS and JavaScript in that file.
- Do not reference remote images. Any images, icons or illustrations must be inline SVG or CSS.
- You may load fonts from Google Fonts and JavaScript or CSS libraries from well-known public CDNs (for example cdnjs, jsDelivr or unpkg). Charts may use inline SVG, canvas or a charting library from a CDN.
- The page must work when `index.html` is opened directly from disk, and it must be usable at both desktop (1440px wide) and mobile (390px wide) viewport widths.
- All visible text is in English. Use the names, numbers and copy given above; write any additional copy a section needs.
- Do the whole task in one pass. Do not ask questions; make your own decisions and finish with the file written.

Skill cells add one sentence at the end: Use the <name> skill. (Claude Code) or Use the $<name> skill. (Codex).

Native
Codex

Codex native

OK
Codex · native — Data dashboard, Desktop screenshot (top of page)Codex · native — Data dashboard, Mobile screenshot (top of page)
Model
gpt-6.1-sol · high
Time
6m 56s
Tokens
in 326k · out 25.8k
Skill used
n/a
External
fonts.googleapis.com, fonts.gstatic.com
Run date
2026-10-25

a11y 1 critical▶ video

👍 0 · Vote

Codex + frontend-design

OK
Codex + frontend-design — Data dashboard, Desktop screenshot (top of page)Codex + frontend-design — Data dashboard, Mobile screenshot (top of page)
Model
gpt-6.1-sol · high
Time
11m 32s
Tokens
in 439k · out 30.6k
Skill used
Yes
External
fonts.googleapis.com, fonts.gstatic.com
Run date
2026-10-25

a11y 2 serious▶ video

👍 0 · Vote

Codex + ui-ux-pro-max

OK
Codex + ui-ux-pro-max — Data dashboard, Desktop screenshot (top of page)Codex + ui-ux-pro-max — Data dashboard, Mobile screenshot (top of page)
Model
gpt-6.1-sol · high
Time
9m 00s
Tokens
in 1.30M · out 27.7k
Skill used
Yes
External
fonts.googleapis.com, fonts.gstatic.com
Run date
2026-10-25

a11y 1 critical▶ video

👍 0 · Vote

Codex + web-design-engineer

OK
Codex + web-design-engineer — Data dashboard, Desktop screenshot (top of page)Codex + web-design-engineer — Data dashboard, Mobile screenshot (top of page)
Model
gpt-6.1-sol · high
Time
6m 47s
Tokens
in 331k · out 30.2k
Skill used
Yes
External
fonts.googleapis.com, fonts.gstatic.com
Run date
2026-10-25

a11y 1 critical▶ video

👍 0 · Vote

Codex + taste-skill

OK
Codex + taste-skill — Data dashboard, Desktop screenshot (top of page)Codex + taste-skill — Data dashboard, Mobile screenshot (top of page)
Model
gpt-6.1-sol · high
Time
9m 32s
Tokens
in 957k · out 23.9k
Skill used
Yes
External
fonts.googleapis.com, fonts.gstatic.com
Run date
2026-10-26

a11y 1 critical▶ video

👍 0 · Vote

Codex + frontend-ui-engineering

OK
Codex + frontend-ui-engineering — Data dashboard, Desktop screenshot (top of page)Codex + frontend-ui-engineering — Data dashboard, Mobile screenshot (top of page)
Model
gpt-6.1-sol · high
Time
12m 50s
Tokens
in 819k · out 30.8k
Skill used
Yes
External
fonts.googleapis.com, fonts.gstatic.com
Run date
2026-10-26

a11y 2 serious▶ video

👍 0 · Vote

Codex + theme-factory

OK
Codex + theme-factory — Data dashboard, Desktop screenshot (top of page)Codex + theme-factory — Data dashboard, Mobile screenshot (top of page)
Model
gpt-6.1-sol · high
Time
11m 14s
Tokens
in 523k · out 28.6k
Skill used
Yes
External
none
Run date
2026-10-26

a11y 1 critical▶ video

👍 0 · Vote

Claude Code

Claude Code native

OK
Claude Code · native — Data dashboard, Desktop screenshot (top of page)Claude Code · native — Data dashboard, Mobile screenshot (top of page)
Model
claude-opus-5-5 · high
Time
8m 03s
Tokens
in 34 · cache 1.08M · out 46.4k
Skill used
n/a
External
none
Run date
2026-10-26

a11y 1 serious▶ video

👍 0 · Vote

Claude Code + frontend-design

OK
Claude Code + frontend-design — Data dashboard, Desktop screenshot (top of page)Claude Code + frontend-design — Data dashboard, Mobile screenshot (top of page)
Model
claude-opus-5-5 · high
Time
6m 08s
Tokens
in 26 · cache 628k · out 38.7k
Skill used
Yes
External
fonts.googleapis.com, fonts.gstatic.com
Run date
2026-10-26

a11y: none found▶ video

👍 0 · Vote

Claude Code + ui-ux-pro-max

OK
Claude Code + ui-ux-pro-max — Data dashboard, Desktop screenshot (top of page)Claude Code + ui-ux-pro-max — Data dashboard, Mobile screenshot (top of page)
Model
claude-opus-5-5 · high
Time
7m 12s
Tokens
in 28 · cache 1.05M · out 49.9k
Skill used
Yes
External
fonts.googleapis.com, fonts.gstatic.com
Run date
2026-10-26

a11y 1 serious▶ video

👍 0 · Vote

Claude Code + web-design-engineer

OK
Claude Code + web-design-engineer — Data dashboard, Desktop screenshot (top of page)Claude Code + web-design-engineer — Data dashboard, Mobile screenshot (top of page)
Model
claude-opus-5-5 · high
Time
6m 29s
Tokens
in 22 · cache 704k · out 41.1k
Skill used
Yes
External
fonts.googleapis.com, fonts.gstatic.com
Run date
2026-10-26

a11y 2 serious▶ video

👍 0 · Vote

Claude Code + taste-skill

OK
Claude Code + taste-skill — Data dashboard, Desktop screenshot (top of page)Claude Code + taste-skill — Data dashboard, Mobile screenshot (top of page)
Model
claude-opus-5-5 · high
Time
10m 30s
Tokens
in 54 · cache 2.97M · out 54.2k
Skill used
Yes
External
fonts.googleapis.com, fonts.gstatic.com
Run date
2026-10-26

a11y: none found▶ video

👍 0 · Vote

Claude Code + frontend-ui-engineering

OK
Claude Code + frontend-ui-engineering — Data dashboard, Desktop screenshot (top of page)Claude Code + frontend-ui-engineering — Data dashboard, Mobile screenshot (top of page)
Model
claude-opus-5-5 · high
Time
9m 27s
Tokens
in 30 · cache 1.05M · out 57.8k
Skill used
Yes
External
fonts.googleapis.com, fonts.gstatic.com
Run date
2026-10-26

a11y 1 moderate▶ video

👍 0 · Vote

Claude Code + theme-factory

OK
Claude Code + theme-factory — Data dashboard, Desktop screenshot (top of page)Claude Code + theme-factory — Data dashboard, Mobile screenshot (top of page)
Model
claude-opus-5-5 · high
Time
6m 05s
Tokens
in 36 · cache 923k · out 39.1k
Skill used
Yes
External
none
Run date
2026-10-26

a11y 2 serious▶ video

👍 0 · Vote