Run any Skill in Manus with one click

dashboard

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.

Run Skill in Manus

Stars66,163

Forks7,420

UpdatedJune 16, 2026 at 14:39

Source

nexu-io

nexu-io/open-design

View GitHub Repository View Creator Repositories

Install command

Download

Run Skill in Manus

Useful forSOC

Web DevelopersComputer and Mathematical Occupations15-1254L4

File Explorer

3 files

SKILL.md

readonly

name	dashboard
description	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.
triggers	["dashboard","admin panel","analytics","control panel","后台","管理后台"]
od	{"mode":"prototype","platform":"desktop","scenario":"operations","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":true,"sections":["color","typography","layout","components"]},"craft":{"requires":["state-coverage","accessibility-baseline","laws-of-ux"]}}

Dashboard Skill

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.

More from this repository

same repository

social-media-matrix-tracker-template

nexu-io/open-design

社媒矩阵数据追踪面板模板（Social Media Matrix Tracker）。 Use when users ask for a cinematic, data-dense social media analytics dashboard with multi-platform metrics, interactive charts, hover insights, range compare, and dark/light theme switching in a single HTML artifact.

2026-06-1766.2k

audio-jingle

nexu-io/open-design

Audio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.

2026-06-1666.2k

blog-post

nexu-io/open-design

A long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".

2026-06-1666.2k

clinical-case-report

nexu-io/open-design

Structured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".

2026-06-1666.2k

critique

nexu-io/open-design

Run a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–10. Outputs a single self-contained HTML report with a radar chart, evidence-backed scores, and three lists: Keep / Fix / Quick-wins. Use when the brief asks for a "design review", "design critique", "5 维度评审", "design audit", or "what's wrong with my design".

2026-06-1666.2k

dating-web

nexu-io/open-design

A consumer-feeling dating / matchmaking dashboard — left rail navigation, ticker bar of community signals, headline KPIs, a 30-day mutual-matches bar chart, and a match-rate trend block. Editorial typography, restrained accent. Use when the brief asks for a "dating site", "matchmaking", "community dashboard", "social network dashboard", or any consumer product where the data is the story.

2026-06-1666.2k

Dashboard Skill

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.