Skill Introduction

Overview

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.

Core value

Turns reusable Development know-how into an installable skill, helping users complete github, community work faster.

Target users

Developers, testers, and maintainers who handle Development tasks in Focus Code.
Teams that already trust workflows or content from nexu-io.
Users who want standardized prompts, steps, or conventions instead of repeating setup work.

Best practices

Read the skill content first to confirm required inputs, expected outputs, and dependencies.
Try it on a small task before relying on it for critical work.
Add project-specific constraints such as coding style, target platform, test expectations, and delivery format.
For external sources, verify the source link, version, and recent maintenance activity.

Best use cases

Tasks related to github, community that need a reusable execution flow.
Converting a community repo, team convention, or personal workflow into day-to-day assistance.
Starting from a proven skill instead of writing prompts or procedures from scratch.

Limits and boundaries

Results depend on the quality of the original skill content and may need human correction.
It does not replace code review, tests, security review, or professional judgment.
External tools, APIs, account permissions, and local dependencies still need separate setup.

Differentiation

Structured around Development, making it easier to discover and reuse than loose prompt snippets.
Marked as GitHub, which helps users judge trust and maintenance expectations.
Keeps the original source link available for repository, documentation, or discussion follow-up.
Tagged with github, community, so it can be filtered by concrete task intent.

Install and use

Install

Copy Install Command

focus install dashboard-5fd252

View source

Detail Preview

SKILL.md

Primary filemarkdown3 KB

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.

dashboard