Slate Admin Console — guide

What you get

One self-contained HTML file that behaves like a finished SaaS admin console:

• Overview — four metric cards with trend badges, a composed area/line activity chart, and a selectable recent-customers table
• Analytics — KPI tiles, a 12-week rounded-bar chart with hover values, and a top-pages table with share-of-total progress bars
• Finance — money cards, a spending-mix donut with a legend of amounts, and a signed transactions table
• Customers — a live search box plus status filter chips over a full account table, with an honest empty state
• Kanban — three columns with real drag-and-drop and live counts
• Calendar — a real month grid with events, today highlight, and previous / today / next controls

The shell around them is the point: a slim sidebar with two groups and six entries, every one of them clickable (no disabled rows, no "coming soon" teasers), collapsing to an icon rail; a 48px header with command-palette search (Ctrl/Cmd K), a theme-preset select, and a dark mode toggle. All colors are oklch design tokens, so the neutral slate and warm tangerine presets each work in light and dark, and every chart re-draws when the theme changes.

No build step, no frameworks, no network calls — the file opens from disk and runs inside a sandboxed iframe, which makes it ideal for product specs, stakeholder demos, and pre-build scaffolds.

How to brief it

Give the skill four things:

1. Product name and operator — the brand in the sidebar and the signed-in user (kept fictional, .example email).
2. Four overview metrics — the numbers this business actually watches; they drive the metric cards and chart series names.
3. Domain objects — what the tables and kanban cards hold (customers, orders, tickets, jobs…).
4. Sidebar picks — which of the six stock views you want, or one swap (an inbox, a logs view, a settings form). The sidebar stays at 5–8 entries and every entry must open a real view.

Missing pieces are drafted for you in the style's quiet, operational voice.

Working with the output

• The file is plain HTML/CSS/JS — data lives in named arrays at the top of the script, so swapping rows, cards, and events is direct.
• Working inside a project? The agent generates the console in your stack (React/Next, Vue, Svelte, Astro, plain HTML) with real routes instead of the view switcher — same tokens, same components.
• Stubbed actions (export, billing, log out) show an honest toast; if you wire real behavior, remove the data-toast attribute.
• Run node scripts/validate-console.mjs your-file.html after manual edits — it re-checks self-containment, the trimmed-sidebar contract, dark-mode tokens, and the no-emoji icon rule.