[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7DJJ6SWMACNKB3008FN4SSJ":3,"skill-same:01M7DJJ6SWMACNKB3008FN4SSJ":80},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":21,"frontMatter":22,"refName":49,"commitSha":50,"skillDirectory":51,"forksCount":52,"repositoryHtmlUrl":53,"repositoryHomepageUrl":54,"ownerHtmlUrl":55,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":56,"install":57,"resources":69},"01M7DJJ6SWMACNKB3008FN4SSJ","dashboard",null,"Admin \u002F analytics dashboard in a single HTML file. Fixed left sidebar,\ntop bar with user\u002Fsearch, main grid of KPI cards and one or two charts.\nUse when the brief asks for a \"dashboard\", \"admin\", \"analytics\", or\n\"control panel\" screen.","andremolnar\u002Fopen-open-design","andremolnar","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F919644?v=4","01M7DHE1X4QH6SJBHR92VG5N84","01M7DHE1XRHK1WQV34AM9M328E",1,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fdashboard\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: dashboard\ndescription: |\n  Admin \u002F analytics dashboard in a single HTML file. Fixed left sidebar,\n  top bar with user\u002Fsearch, main grid of KPI cards and one or two charts.\n  Use when the brief asks for a \"dashboard\", \"admin\", \"analytics\", or\n  \"control panel\" screen.\ntriggers:\n  - \"dashboard\"\n  - \"admin panel\"\n  - \"analytics\"\n  - \"control panel\"\n  - \"后台\"\n  - \"管理后台\"\nod:\n  mode: prototype\n  platform: desktop\n  scenario: operations\n  preview:\n    type: html\n    entry: index.html\n  design_system:\n    requires: true\n    sections: [color, typography, layout, components]\n  craft:\n    requires: [state-coverage, accessibility-baseline, laws-of-ux]\n---\n\n# Dashboard Skill\n\nProduce a single-screen admin \u002F analytics dashboard.\n\n## Workflow\n\n1. **Read the active DESIGN.md** (injected above). Colors, typography, spacing,\n   component styling all come from it. Do not invent new tokens.\n2. **Classify** what the dashboard monitors (sales, traffic, usage, incidents,\n   ops, etc.) from the brief. Generate specific, plausible metric names and\n   values — no \"Metric A \u002F Metric B\" placeholders.\n3. **Lay out** the required regions:\n   - **Left sidebar** (220–260px): brand mark at top, 6–8 nav links with\n     icons, active state uses the DS accent.\n   - **Top bar**: page title on the left, search input + user avatar \u002F status\n     on the right.\n   - **Main**:\n     - Row 1: 3–4 KPI cards (label + big number + delta vs. prior period).\n     - Row 2: one primary chart (full width or 2\u002F3) — render as an inline SVG\n       line \u002F bar \u002F area chart drawn from real-looking numbers.\n     - Row 3: one secondary chart or table (recent events, top items, etc.).\n4. **Write** one self-contained HTML document:\n   - `\u003C!doctype html>` through `\u003C\u002Fhtml>`, CSS in one inline `\u003Cstyle>` block.\n   - CSS Grid for the overall layout; Flexbox inside cards.\n   - Semantic HTML: `\u003Caside>`, `\u003Cheader>`, `\u003Cmain>`, `\u003Csection>`.\n   - Tag each logical region with `data-od-id=\"slug\"` for comment mode.\n5. **Charts**: inline SVG only, no JS libraries. A line chart is ~10 lines of\n   `\u003Cpolyline>` with a subtle area fill. A bar chart is N `\u003Crect>`s with\n   DS-accent fill. Label axes lightly (muted text, smaller scale).\n6. **Self-check**:\n   - Every color comes from DESIGN.md tokens.\n   - Accent used at most twice (sidebar active + one chart highlight).\n   - Sidebar + top bar are sticky; main scrolls independently.\n   - Density matches the DS mood — airy DSes get more padding, dense DSes\n     (trading, crypto) tighten rows.\n\n## Output contract\n\nEmit between `\u003Cartifact>` tags:\n\n```\n\u003Cartifact identifier=\"dashboard-slug\" type=\"text\u002Fhtml\" title=\"Dashboard Title\">\n\u003C!doctype html>\n\u003Chtml>...\u003C\u002Fhtml>\n\u003C\u002Fartifact>\n```\n\nOne sentence before the artifact, nothing after.\n","# Dashboard Skill\n\nProduce a single-screen admin \u002F analytics dashboard.\n\n## Workflow\n\n1. **Read the active DESIGN.md** (injected above). Colors, typography, spacing,\n   component styling all come from it. Do not invent new tokens.\n2. **Classify** what the dashboard monitors (sales, traffic, usage, incidents,\n   ops, etc.) from the brief. Generate specific, plausible metric names and\n   values — no \"Metric A \u002F Metric B\" placeholders.\n3. **Lay out** the required regions:\n   - **Left sidebar** (220–260px): brand mark at top, 6–8 nav links with\n     icons, active state uses the DS accent.\n   - **Top bar**: page title on the left, search input + user avatar \u002F status\n     on the right.\n   - **Main**:\n     - Row 1: 3–4 KPI cards (label + big number + delta vs. prior period).\n     - Row 2: one primary chart (full width or 2\u002F3) — render as an inline SVG\n       line \u002F bar \u002F area chart drawn from real-looking numbers.\n     - Row 3: one secondary chart or table (recent events, top items, etc.).\n4. **Write** one self-contained HTML document:\n   - `\u003C!doctype html>` through `\u003C\u002Fhtml>`, CSS in one inline `\u003Cstyle>` block.\n   - CSS Grid for the overall layout; Flexbox inside cards.\n   - Semantic HTML: `\u003Caside>`, `\u003Cheader>`, `\u003Cmain>`, `\u003Csection>`.\n   - Tag each logical region with `data-od-id=\"slug\"` for comment mode.\n5. **Charts**: inline SVG only, no JS libraries. A line chart is ~10 lines of\n   `\u003Cpolyline>` with a subtle area fill. A bar chart is N `\u003Crect>`s with\n   DS-accent fill. Label axes lightly (muted text, smaller scale).\n6. **Self-check**:\n   - Every color comes from DESIGN.md tokens.\n   - Accent used at most twice (sidebar active + one chart highlight).\n   - Sidebar + top bar are sticky; main scrolls independently.\n   - Density matches the DS mood — airy DSes get more padding, dense DSes\n     (trading, crypto) tighten rows.\n\n## Output contract\n\nEmit between `\u003Cartifact>` tags:\n\n```\n\u003Cartifact identifier=\"dashboard-slug\" type=\"text\u002Fhtml\" title=\"Dashboard Title\">\n\u003C!doctype html>\n\u003Chtml>...\u003C\u002Fhtml>\n\u003C\u002Fartifact>\n```\n\nOne sentence before the artifact, nothing after.\n",{"od":23,"name":5,"triggers":42,"description":48},{"mode":24,"craft":25,"preview":30,"platform":33,"scenario":34,"design_system":35},"prototype",{"requires":26},[27,28,29],"state-coverage","accessibility-baseline","laws-of-ux",{"type":31,"entry":32},"html","index.html","desktop","operations",{"requires":36,"sections":37},true,[38,39,40,41],"color","typography","layout","components",[5,43,44,45,46,47],"admin panel","analytics","control panel","后台","管理后台","Admin \u002F analytics dashboard in a single HTML file. Fixed left sidebar,\ntop bar with user\u002Fsearch, main grid of KPI cards and one or two charts.\nUse when the brief asks for a \"dashboard\", \"admin\", \"analytics\", or\n\"control panel\" screen.\n","main","3a6721b94dec7506e324023f2855495c9c54d0d2","plugins\u002F_official\u002Fexamples\u002Fdashboard",0,"https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design","https:\u002F\u002Fopen-design.ai","https:\u002F\u002Fgithub.com\u002Fandremolnar","2026-10-30 01:33:11",{"source":8,"skillName":5,"commands":58,"prompt":68,"zipAvailable":36},[59,62,65],{"tool":60,"command":61},"npx","npx skills add andremolnar\u002Fopen-open-design --skill dashboard",{"tool":63,"command":64},"bunx","bunx skills add andremolnar\u002Fopen-open-design --skill dashboard",{"tool":66,"command":67},"pnpm","pnpm dlx skills add andremolnar\u002Fopen-open-design --skill dashboard","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fdashboard\u002FSKILL.md",[70,76],{"path":71,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":74,"sourceHtmlUrl":75},"example.html","REFERENCE","参考文档",6652,"https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fdashboard\u002Fexample.html",{"path":77,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":78,"sourceHtmlUrl":79},"open-design.json",8529,"https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fdashboard\u002Fopen-design.json",[81,88,95,102,109,118],{"skillNo":82,"name":83,"nameZh":6,"description":84,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":85,"categories":86,"keywords":87,"publishedAt":18},"01M7DMPDFNBD52ZP0GNY046Z2A","Beta Skill","Instruction-only fixture skill.","https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Ftools\u002Frelease\u002Ftests\u002Ffixtures\u002Fcatalog\u002Fskills\u002Fbeta\u002FSKILL.md",[],[],{"skillNo":89,"name":90,"nameZh":6,"description":91,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":94,"publishedAt":18},"01M7DMPC4JJ8ENX7VWTMP38Y9C","Alpha Skill","First fixture skill with a runnable demo.","https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Ftools\u002Frelease\u002Ftests\u002Ffixtures\u002Fcatalog\u002Fskills\u002Falpha\u002FSKILL.md",[],[],{"skillNo":96,"name":97,"nameZh":6,"description":98,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":99,"categories":100,"keywords":101,"publishedAt":18},"01M7DMP9J5BX307VWVD67J0BBM","Deck One","A small deck template fixture.","https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Ftools\u002Frelease\u002Ftests\u002Ffixtures\u002Fcatalog\u002Fdesign-templates\u002Fdeck-one\u002FSKILL.md",[],[],{"skillNo":103,"name":104,"nameZh":6,"description":105,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":18},"01M7DMP7GNYTFXGK9RDZ2X723P","youtube-clipper","YouTube clip generation and editing with automated workflows — pull source video, slice highlights, add captions, and export.","https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube-clipper\u002FSKILL.md",[],[],{"skillNo":110,"name":111,"nameZh":6,"description":112,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":113,"licenseFileUrl":114,"sourceHtmlUrl":115,"categories":116,"keywords":117,"publishedAt":18},"01M7DMP2WHMNKM0P5BXRYAG8D1","writing-guidelines","Review docs\u002Fprose for Writing Guidelines compliance. Use when asked to \"review my docs\", \"check writing style\", \"audit prose\", \"review docs voice and tone\", or \"check this page against the writing handbook\".","MIT","https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fskills\u002Fwriting-guidelines\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fskills\u002Fwriting-guidelines\u002FSKILL.md",[],[],{"skillNo":119,"name":120,"nameZh":6,"description":121,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":122,"categories":123,"keywords":124,"publishedAt":18},"01M7DMP0GVJQ37CGXYQDD20VWS","wpds","WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites.","https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fskills\u002Fwpds\u002FSKILL.md",[],[]]