skill-gallery

Panel de datos

Un panel de ventas y operaciones para Kestrel Coffee Roasters: tarjetas de KPI, un gráfico de ingresos mensuales con filtro por canal, reparto por categoría, una tabla de cafeterías ordenable, pedidos recientes y un aviso de stock, todo a partir de datos fijos.

prompts/dashboard.md · versión 1. Todos los skills lado a lado: cada columna es un skill y cada fila, un agente.

Texto del prompt

En inglés, tal como se envió a los agentes. No se traduce.

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.

Las celdas con skill añaden una frase al final: Use the <name> skill. (Claude Code) o Use the $<name> skill. (Codex).

Nativo
Codex

Codex nativo

OK
Codex · nativo — Panel de datos, captura (Escritorio, parte superior de la página)Codex · nativo — Panel de datos, captura (Móvil, parte superior de la página)
Modelo
gpt-6.1-sol · high
Tiempo
6m 56s
Tokens
in 326k · out 25.8k
Skill usado
n/a
Recursos externos
fonts.googleapis.com, fonts.gstatic.com
Fecha de ejecución
2026-10-25

a11y · crítico: 1▶ vídeo

👍 0 · Votar

Codex + frontend-design

OK
Codex + frontend-design — Panel de datos, captura (Escritorio, parte superior de la página)Codex + frontend-design — Panel de datos, captura (Móvil, parte superior de la página)
Modelo
gpt-6.1-sol · high
Tiempo
11m 32s
Tokens
in 439k · out 30.6k
Skill usado
Sí
Recursos externos
fonts.googleapis.com, fonts.gstatic.com
Fecha de ejecución
2026-10-25

a11y · grave: 2▶ vídeo

👍 0 · Votar

Codex + ui-ux-pro-max

OK
Codex + ui-ux-pro-max — Panel de datos, captura (Escritorio, parte superior de la página)Codex + ui-ux-pro-max — Panel de datos, captura (Móvil, parte superior de la página)
Modelo
gpt-6.1-sol · high
Tiempo
9m 00s
Tokens
in 1.30M · out 27.7k
Skill usado
Sí
Recursos externos
fonts.googleapis.com, fonts.gstatic.com
Fecha de ejecución
2026-10-25

a11y · crítico: 1▶ vídeo

👍 0 · Votar

Codex + web-design-engineer

OK
Codex + web-design-engineer — Panel de datos, captura (Escritorio, parte superior de la página)Codex + web-design-engineer — Panel de datos, captura (Móvil, parte superior de la página)
Modelo
gpt-6.1-sol · high
Tiempo
6m 47s
Tokens
in 331k · out 30.2k
Skill usado
Sí
Recursos externos
fonts.googleapis.com, fonts.gstatic.com
Fecha de ejecución
2026-10-25

a11y · crítico: 1▶ vídeo

👍 0 · Votar

Codex + taste-skill

OK
Codex + taste-skill — Panel de datos, captura (Escritorio, parte superior de la página)Codex + taste-skill — Panel de datos, captura (Móvil, parte superior de la página)
Modelo
gpt-6.1-sol · high
Tiempo
9m 32s
Tokens
in 957k · out 23.9k
Skill usado
Sí
Recursos externos
fonts.googleapis.com, fonts.gstatic.com
Fecha de ejecución
2026-10-26

a11y · crítico: 1▶ vídeo

👍 0 · Votar

Codex + frontend-ui-engineering

OK
Codex + frontend-ui-engineering — Panel de datos, captura (Escritorio, parte superior de la página)Codex + frontend-ui-engineering — Panel de datos, captura (Móvil, parte superior de la página)
Modelo
gpt-6.1-sol · high
Tiempo
12m 50s
Tokens
in 819k · out 30.8k
Skill usado
Sí
Recursos externos
fonts.googleapis.com, fonts.gstatic.com
Fecha de ejecución
2026-10-26

a11y · grave: 2▶ vídeo

👍 0 · Votar

Codex + theme-factory

OK
Codex + theme-factory — Panel de datos, captura (Escritorio, parte superior de la página)Codex + theme-factory — Panel de datos, captura (Móvil, parte superior de la página)
Modelo
gpt-6.1-sol · high
Tiempo
11m 14s
Tokens
in 523k · out 28.6k
Skill usado
Sí
Recursos externos
ninguno
Fecha de ejecución
2026-10-26

a11y · crítico: 1▶ vídeo

👍 0 · Votar

Claude Code

Claude Code nativo

OK
Claude Code · nativo — Panel de datos, captura (Escritorio, parte superior de la página)Claude Code · nativo — Panel de datos, captura (Móvil, parte superior de la página)
Modelo
claude-opus-5-5 · high
Tiempo
8m 03s
Tokens
in 34 · cache 1.08M · out 46.4k
Skill usado
n/a
Recursos externos
ninguno
Fecha de ejecución
2026-10-26

a11y · grave: 1▶ vídeo

👍 0 · Votar

Claude Code + frontend-design

OK
Claude Code + frontend-design — Panel de datos, captura (Escritorio, parte superior de la página)Claude Code + frontend-design — Panel de datos, captura (Móvil, parte superior de la página)
Modelo
claude-opus-5-5 · high
Tiempo
6m 08s
Tokens
in 26 · cache 628k · out 38.7k
Skill usado
Sí
Recursos externos
fonts.googleapis.com, fonts.gstatic.com
Fecha de ejecución
2026-10-26

a11y: sin problemas detectados▶ vídeo

👍 0 · Votar

Claude Code + ui-ux-pro-max

OK
Claude Code + ui-ux-pro-max — Panel de datos, captura (Escritorio, parte superior de la página)Claude Code + ui-ux-pro-max — Panel de datos, captura (Móvil, parte superior de la página)
Modelo
claude-opus-5-5 · high
Tiempo
7m 12s
Tokens
in 28 · cache 1.05M · out 49.9k
Skill usado
Sí
Recursos externos
fonts.googleapis.com, fonts.gstatic.com
Fecha de ejecución
2026-10-26

a11y · grave: 1▶ vídeo

👍 0 · Votar

Claude Code + web-design-engineer

OK
Claude Code + web-design-engineer — Panel de datos, captura (Escritorio, parte superior de la página)Claude Code + web-design-engineer — Panel de datos, captura (Móvil, parte superior de la página)
Modelo
claude-opus-5-5 · high
Tiempo
6m 29s
Tokens
in 22 · cache 704k · out 41.1k
Skill usado
Sí
Recursos externos
fonts.googleapis.com, fonts.gstatic.com
Fecha de ejecución
2026-10-26

a11y · grave: 2▶ vídeo

👍 0 · Votar

Claude Code + taste-skill

OK
Claude Code + taste-skill — Panel de datos, captura (Escritorio, parte superior de la página)Claude Code + taste-skill — Panel de datos, captura (Móvil, parte superior de la página)
Modelo
claude-opus-5-5 · high
Tiempo
10m 30s
Tokens
in 54 · cache 2.97M · out 54.2k
Skill usado
Sí
Recursos externos
fonts.googleapis.com, fonts.gstatic.com
Fecha de ejecución
2026-10-26

a11y: sin problemas detectados▶ vídeo

👍 0 · Votar

Claude Code + frontend-ui-engineering

OK
Claude Code + frontend-ui-engineering — Panel de datos, captura (Escritorio, parte superior de la página)Claude Code + frontend-ui-engineering — Panel de datos, captura (Móvil, parte superior de la página)
Modelo
claude-opus-5-5 · high
Tiempo
9m 27s
Tokens
in 30 · cache 1.05M · out 57.8k
Skill usado
Sí
Recursos externos
fonts.googleapis.com, fonts.gstatic.com
Fecha de ejecución
2026-10-26

a11y · moderado: 1▶ vídeo

👍 0 · Votar

Claude Code + theme-factory

OK
Claude Code + theme-factory — Panel de datos, captura (Escritorio, parte superior de la página)Claude Code + theme-factory — Panel de datos, captura (Móvil, parte superior de la página)
Modelo
claude-opus-5-5 · high
Tiempo
6m 05s
Tokens
in 36 · cache 923k · out 39.1k
Skill usado
Sí
Recursos externos
ninguno
Fecha de ejecución
2026-10-26

a11y · grave: 2▶ vídeo

👍 0 · Votar