From wire
Generates pixel-accurate, interactive Looker dashboard HTML mockups from a plain-language description of the dashboard's contents. Use this skill whenever the user asks to mock up, prototype, visualise, or design a Looker dashboard — including requests like "create a Looker dashboard for X", "what would a Looker dashboard for X look like", "mock up a dashboard showing Y metrics", "prototype a Looker view for Z data", or any request to visualise analytics data in a Looker-style layout. Also trigger when the user shares a list of KPIs, charts, or data tables and asks how they would look in Looker. The output is a single self-contained HTML file that faithfully reproduces the Looker UI chrome (header, sidebar, filter pills, title bar, footer) and uses Chart.js for interactive charts.
npx claudepluginhub rittmananalytics/wire-plugin --plugin wireThis skill uses the workspace's default tool permissions.
Generates a single self-contained HTML file that looks and behaves like a real Looker dashboard.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Generates a single self-contained HTML file that looks and behaves like a real Looker dashboard. The output uses the official Looker design system (Google Sans, teal sidebar, blue filter pills, stat cards with coloured top bars, Chart.js charts) and includes all Looker UI chrome.
Before generating anything, extract (or ask for) these details from the user's request:
| Field | What to ask / infer |
|---|---|
| Dashboard title | Required — what is this dashboard called? |
| Data domain | e.g. Sales Pipeline, Delivery Health, Finance, Marketing |
| KPI tiles | Up to 6 — metric name, example value, unit, trend direction and %, sub-label |
| Charts | For each: title, chart type (line/bar/doughnut/horizontal-bar/area), axes labels, data series names |
| Table | Column headers, 5–8 sample rows of realistic data |
| Filter pills | Which dimensions should appear as filters (e.g. Date Range, Client, Status) |
| Tabs | Tab names across the top (e.g. Overview, Pipeline, Finance) |
| Client / brand name | Used in breadcrumb and footer |
If any field is missing and cannot be reasonably inferred from context, ask before generating. For everything else, invent plausible but realistic sample data — never leave tiles or charts empty.
Before writing any HTML, read the design system reference:
wire/skills/looker-dashboard-mockup/references/design-system.md
This file contains:
Do not guess at colours or class names — use the reference verbatim.
Produce one complete, self-contained HTML file following this structure:
<head>
Google Sans font import
Chart.js CDN (4.4.1 from cdnjs)
<style> — full CSS from design-system.md, no Tailwind/external CSS needed
</style>
<body>
<header> — Looker logo mark SVG, hamburger, icon buttons, avatar initials
<div.body>
<aside.sidebar> — Create button, nav sections, active state on current tab
<main.main>
<div.titlebar> — Breadcrumb + h1 + action icons (heart, folder, refresh, more)
<div.filter-bar> — One .filter-pill-wrap per filter dimension + Run button
<div.tab-bar> — One .tab per tab, first tab .active
<div.content> — KPI grid, chart rows, table, bottom chart row
<footer> — Dashboard name + disclaimer + "Prepared by · date"
<script>
Chart.defaults setup
One new Chart(...) per canvas
toggleSidebar(), setActive(), switchTab() helpers
</script>
KPI grid: grid-template-columns: repeat(N, 1fr) where N = number of KPIs (max 5).
Each stat-card gets a --card-accent pointing to a different --chart-N variable.
Chart rows: use CSS grid.
grid-template-columns: 1frgrid-template-columns: 3fr 2fr (wide + narrow)grid-template-columns: 2fr 1fr 1frTable: always include a bottom strip with Data / Results / SQL tabs and a row-count + timing indicator.
Charts: set canvas heights explicitly via a wrapper div with height: Npx. Use:
height: 200px in the main row, height: 180px in the bottom rowheight: 200px — always cutout: '62%', legend position: 'right' or 'bottom'height: 180px, indexAxis: 'y'height: 200pxCycle through --chart-1 through --chart-6 for --card-accent:
1 → chart-1 (blue), 2 → chart-3 (yellow), 3 → chart-5 (orange), 4 → chart-6 (teal), 5 → chart-2 (purple), 6 → chart-4 (red)
Write the complete HTML to the path specified by the caller (e.g. .wire/<project-folder>/design/mockups/<dashboard-slug>.html),
where <dashboard-slug> is a lowercase-hyphenated version of the dashboard title.
Follow up with a brief summary (3–5 bullet points) of what was generated — tile names, chart types, table columns — so the user can quickly verify it matches their intent without opening the file.
If the user asks to change specific tiles, charts, or data:
<canvas> block or stat-card HTML| File | Purpose |
|---|---|
references/design-system.md | Complete CSS, component patterns, Chart.js config — read before generating |