Dashboard Skill
SkillSearchLets your agent build a dashboard web page with sidebar, top bar, KPI cards and charts.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Dashboard Skill skill
About this capability
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.
What this skill tells your AI
The instructions your AI receives, as published by nexu-io/open-design in design-templates/dashboard/SKILL.md and read by ahel’s review.
Produce a single-screen admin / analytics dashboard.
Workflow
- Read the active DESIGN.md (injected above). Colors, typography, spacing, component styling all come from it. Do not invent new tokens.
- Classify what the dashboard monitors (sales, traffic, usage, incidents, ops, etc.) from the brief. Generate specific, plausible metric names and values — no "Metric A / Metric B" placeholders.
- Lay out the required regions:
- Left sidebar (220–260px): brand mark at top, 6–8 nav links with icons, active state uses the DS accent.
- Top bar: page title on the left, search input + user avatar / status on the right.
- Main:
- Row 1: 3–4 KPI cards (label + big number + delta vs. prior period).
- Row 2: one primary chart (full width or 2/3) — render as an inline SVG line / bar / area chart drawn from real-looking numbers.
- Row 3: one secondary chart or table (recent events, top items, etc.).
- Write one self-contained HTML document:
<!doctype html>through</html>, CSS in one inline<style>block.- CSS Grid for the overall layout; Flexbox inside cards.
- Semantic HTML:
<aside>,<header>,<main>,<section>. - Tag each logical region with
data-od-id="slug"for comment mode.
- Charts: inline SVG only, no JS libraries. A line chart is ~10 lines of
<polyline>with a subtle area fill. A bar chart is N<rect>s with DS-accent fill. Label axes lightly (muted text, smaller scale). - Self-check:
- Every color comes from DESIGN.md tokens.
- Accent used at most twice (sidebar active + one chart highlight).
- Sidebar + top bar are sticky; main scrolls independently.
- Density matches the DS mood — airy DSes get more padding, dense DSes (trading, crypto) tighten rows.
Output contract
Emit between <artifact> tags:
<artifact identifier="dashboard-slug" type="text/html" title="Dashboard Title">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact, nothing after.
Signals
- GitHub stars
- 96k
- Forks
- 11k
- Last commit
- Sep 2026
- Hacker News mentions
- 20
Advanced
- Catalog kind
- skill
- Gateway key
dashboard-2- Source
- github.com/nexu-io/open-design