pftom
a98096a042
- Created .gitignore to exclude build artifacts and dependencies. - Added index.html as the main entry point for the application. - Included LICENSE file with Apache 2.0 terms. - Initialized package.json and package-lock.json for project dependencies. - Added pnpm-lock.yaml for package management. - Created QUICKSTART.md for setup instructions. - Added README.md and README.zh-CN.md for project documentation in English and Chinese.
2.6 KiB
2.6 KiB
name, description, triggers, ocd
| name | description | triggers | ocd | ||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 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. |
|
|
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-ocd-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.