dashboard

Name: dashboard
Author: mphinance

15stars3forks

How to install dashboard?

mphinance/alpha-skills/dashboard

$npx -y skills add mphinance/alpha-skills --skill dashboard

Installs into the current project.

Summary

Admin / analytics dashboard in a single HTML file. Fixed left sidebar, top bar with user/search, main grid of KPI cards and one or two charts. Use when the brief asks for a "dashboard", "admin", "analytics", or "control panel" screen.

Files · 1

View on GitHub

SKILL.md

1	# Dashboard Skill
2
3	Produce a single-screen admin / analytics dashboard.
4
5	## Workflow
6
7	1. Read the active DESIGN.md (injected above). Colors, typography, spacing,
8	component styling all come from it. Do not invent new tokens.
9	2. Classify what the dashboard monitors (sales, traffic, usage, incidents,
10	ops, etc.) from the brief. Generate specific, plausible metric names and
11	values — no "Metric A / Metric B" placeholders.
12	3. Lay out the required regions:
13	- Left sidebar (220–260px): brand mark at top, 6–8 nav links with
14	icons, active state uses the DS accent.
15	- Top bar: page title on the left, search input + user avatar / status
16	on the right.
17	- Main:
18	- Row 1: 3–4 KPI cards (label + big number + delta vs. prior period).
19	- Row 2: one primary chart (full width or 2/3) — render as an inline SVG
20	line / bar / area chart drawn from real-looking numbers.
21	- Row 3: one secondary chart or table (recent events, top items, etc.).
22	4. Write one self-contained HTML document:
23	- `<!doctype html>` through `</html>`, CSS in one inline `<style>` block.
24	- CSS Grid for the overall layout; Flexbox inside cards.
25	- Semantic HTML: `<aside>`, `<header>`, `<main>`, `<section>`.
26	- Tag each logical region with `data-od-id="slug"` for comment mode.
27	5. Charts: inline SVG only, no JS libraries. A line chart is ~10 lines of
28	`<polyline>` with a subtle area fill. A bar chart is N `<rect>`s with
29	DS-accent fill. Label axes lightly (muted text, smaller scale).
30	6. Self-check:
31	- Every color comes from DESIGN.md tokens.
32	- Accent used at most twice (sidebar active + one chart highlight).
33	- Sidebar + top bar are sticky; main scrolls independently.
34	- Density matches the DS mood — airy DSes get more padding, dense DSes
35	(trading, crypto) tighten rows.
36
37	## Output contract
38
39	Emit between `<artifact>` tags:
40
41	```
42	<artifact identifier="dashboard-slug" type="text/html" title="Dashboard Title">
43	<!doctype html>
44	<html>...</html>
45	</artifact>
46	```
47
48	One sentence before the artifact, nothing after.

People who liked this also viewed

6 picks

Type

dashboard

15stars3forks

View on GitHub

How to install dashboard?

mphinance/alpha-skills/dashboard

$npx -y skills add mphinance/alpha-skills --skill dashboard

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Dashboard Skill
2
3	Produce a single-screen admin / analytics dashboard.
4
5	## Workflow
6
7	1. Read the active DESIGN.md (injected above). Colors, typography, spacing,
8	component styling all come from it. Do not invent new tokens.
9	2. Classify what the dashboard monitors (sales, traffic, usage, incidents,
10	ops, etc.) from the brief. Generate specific, plausible metric names and
11	values — no "Metric A / Metric B" placeholders.
12	3. Lay out the required regions:
13	- Left sidebar (220–260px): brand mark at top, 6–8 nav links with
14	icons, active state uses the DS accent.
15	- Top bar: page title on the left, search input + user avatar / status
16	on the right.
17	- Main:
18	- Row 1: 3–4 KPI cards (label + big number + delta vs. prior period).
19	- Row 2: one primary chart (full width or 2/3) — render as an inline SVG
20	line / bar / area chart drawn from real-looking numbers.
21	- Row 3: one secondary chart or table (recent events, top items, etc.).
22	4. Write one self-contained HTML document:
23	- `<!doctype html>` through `</html>`, CSS in one inline `<style>` block.
24	- CSS Grid for the overall layout; Flexbox inside cards.
25	- Semantic HTML: `<aside>`, `<header>`, `<main>`, `<section>`.
26	- Tag each logical region with `data-od-id="slug"` for comment mode.
27	5. Charts: inline SVG only, no JS libraries. A line chart is ~10 lines of
28	`<polyline>` with a subtle area fill. A bar chart is N `<rect>`s with
29	DS-accent fill. Label axes lightly (muted text, smaller scale).
30	6. Self-check:
31	- Every color comes from DESIGN.md tokens.
32	- Accent used at most twice (sidebar active + one chart highlight).
33	- Sidebar + top bar are sticky; main scrolls independently.
34	- Density matches the DS mood — airy DSes get more padding, dense DSes
35	(trading, crypto) tighten rows.
36
37	## Output contract
38
39	Emit between `<artifact>` tags:
40
41	```
42	<artifact identifier="dashboard-slug" type="text/html" title="Dashboard Title">
43	<!doctype html>
44	<html>...</html>
45	</artifact>
46	```
47
48	One sentence before the artifact, nothing after.

People who liked this also viewed

6 picks

Type