[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6WYS58ENQZ2HA0ATJXT4MAC":3,"skill-same:01M6WYS58ENQZ2HA0ATJXT4MAC":89},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":31,"publishedAt":50,"linkOnly":51,"markdownContent":52,"markdownBody":53,"frontMatter":54,"refName":62,"commitSha":63,"skillDirectory":64,"forksCount":14,"repositoryHtmlUrl":65,"repositoryHomepageUrl":66,"ownerHtmlUrl":67,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":68,"install":69,"resources":82},"01M6WYS58ENQZ2HA0ATJXT4MAC","infographics",null,"Creates data-driven infographics and charts as accessible SVG. Use when visualizing data, choosing a chart type, generating an SVG chart or infographic, or reviewing a visualization for clarity and accuracy.","projectious-work\u002Fprocesskit","projectious-work","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F263889726?v=4","01M6N97TJJ118WQ35CHRV8RD0E","projectious.work","01M6N97TPWJPF0BMKYQ4PBY5W8",0,"MIT","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Farchive\u002Fprocesskit-install-20261101\u002Fcontext\u002Ftemplates\u002Fprocesskit\u002Fv0.17.0\u002Fcontext\u002Fskills\u002Fdocuments\u002Finfographics\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000013","分析与可视化","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[5,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49],"as","when","data-driven","accuracy","for","v1","SVG","driven","chart","type","documents","infographic","use","work","clarity","Charts","data","visualization","2026-11-10 10:12:30",false,"---\nname: infographics\ndescription: |\n  Creates data-driven infographics and charts as accessible SVG. Use when visualizing data, choosing a chart type, generating an SVG chart or infographic, or reviewing a visualization for clarity and accuracy.\nmetadata:\n  processkit:\n    apiVersion: processkit.projectious.work\u002Fv1\n    id: SKILL-infographics\n    version: \"1.1.0\"\n    created: 2026-04-06T00:00:00Z\n    category: documents\n---\n\n# Infographics\n\n## Intro\n\nA good chart starts from a single message, picks the most accurate\nvisual encoding for the data relationship, and strips everything that\ndoes not support it. Generate standalone SVG with explicit `viewBox`,\nsemantic text, and accessible metadata so the result is editable,\nresponsive, and screen-reader friendly.\n\n## Overview\n\n### SVG generation principles\n\n- Emit standalone SVG with `xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\"`.\n- Set an explicit `viewBox` (e.g. `viewBox=\"0 0 800 600\"`) for\n  responsive scaling.\n- Use `width=\"100%\"` and `height=\"auto\"` for flexible embedding.\n- Group related elements with `\u003Cg>` and position via `transform`.\n- Put reusable styles in `\u003Cdefs>` and `\u003Cstyle>` blocks.\n- Give elements semantic IDs and classes so the file stays editable.\n- Keep text as `\u003Ctext>` elements, not paths, for accessibility.\n\n### Data-to-visual mapping\n\n1. **Identify the message** — what should the viewer learn?\n2. **Choose the encoding** — position, length, angle, area, color, or\n   shape.\n3. **Apply visual hierarchy** — the most important data gets the\n   strongest visual treatment.\n4. **Add context** — title, axis labels, legend, source attribution.\n5. **Simplify** — remove anything that does not support the message.\n\nEncoding effectiveness from most to least accurate for quantitative\ndata: position > length > angle > area > color saturation > shape.\n\n### Chart type selection\n\n| Data Relationship | Chart Type |\n|---|---|\n| Change over time | Line chart, area chart |\n| Comparison of categories | Bar chart (horizontal for many categories) |\n| Part-to-whole | Stacked bar, treemap (avoid pie charts for > 5 slices) |\n| Distribution | Histogram, box plot, violin plot |\n| Correlation | Scatter plot, bubble chart |\n| Ranking | Horizontal bar chart, lollipop chart |\n| Flow \u002F process | Sankey diagram, flowchart |\n| Geographic | Choropleth map, symbol map |\n| Hierarchy | Treemap, sunburst |\n\n### Visual design\n\n- **Color palette:** 3-5 colors max, legible in grayscale.\n- **Typography:** one sans-serif font, clear size hierarchy (title >\n  subtitle > labels > annotations).\n- **Whitespace:** generous margins and padding prevent clutter.\n- **Grid lines:** light gray, thin, removed when unnecessary.\n- **Data labels:** place directly on chart elements when space\n  permits to reduce legend lookups.\n- **Aspect ratio:** ~16:9 for presentations, ~4:3 for documents, ~1:1\n  for social media.\n- **Mobile first:** over 60% of content is consumed on mobile —\n  prefer vertical layouts.\n- **One focal point:** visuals with a clear focal point outperform\n  complex ones by roughly 2x in retention.\n\n### Accessibility\n\n- 4.5:1 contrast for text, 3:1 for large text and UI elements.\n- Never rely solely on color to convey information — add patterns,\n  labels, or shapes.\n- Include `\u003Ctitle>` and `\u003Cdesc>` for screen readers.\n- Use `role=\"img\"` and `aria-label` on the SVG element.\n\n### Alternative formats\n\nWhen SVG is not the right fit, consider Mermaid for flowcharts and\nsequence\u002FGantt diagrams embeddable in Markdown, ASCII art for\nterminals and plain-text READMEs, or a CSV plus narrative when the\nuser just needs organized data with commentary.\n\n## Gotchas\n\nAgent-specific failure modes — provider-neutral pause-and-self-check items:\n\n- **Omitting the `viewBox` attribute.** An SVG without `viewBox` does not scale responsively — it renders at a fixed pixel size that overflows narrow containers and documentation embeds. Always emit `viewBox=\"0 0 W H\"` with explicit dimensions and use `width=\"100%\"` and `height=\"auto\"`.\n- **Positioning `\u003Ctext>` elements without explicit coordinates and alignment attributes.** SVG text without `x`, `y`, `text-anchor`, and `dominant-baseline` renders at the origin or at browser-specific defaults. Lay out every text element explicitly with all four positioning attributes.\n- **Encoding data in color alone.** Roughly 8% of men have red-green color vision deficiency. A chart that differentiates categories only by color is inaccessible. Always pair color with a second encoding: pattern, label, shape, or position.\n- **Choosing a pie chart for more than 5 slices.** The human eye is poor at comparing angles; with many slices, most segments become indistinguishable. Prefer a horizontal bar chart, which exposes differences via length — the most accurate quantitative encoding.\n- **Omitting `\u003Ctitle>` and `\u003Cdesc>` elements.** Screen readers have no way to announce the chart's content without these elements. Include a `\u003Ctitle>` stating the chart's finding (not just its topic) and a `\u003Cdesc>` summarizing the key data.\n- **Starting a bar chart's y-axis at a non-zero value.** Truncating the axis to exaggerate small differences distorts the viewer's perception of magnitude. For bar charts, the y-axis baseline must be zero.\n- **Hardcoding `width` and `height` pixel attributes on the root SVG element.** A chart with fixed pixel dimensions overflows its container on mobile and cannot be embedded responsively. Use `width=\"100%\"` and `height=\"auto\"` and let `viewBox` drive the aspect ratio.\n\n## Full reference\n\n### Tufte's core rules\n\n1. **Show the data** — maximize the data-ink ratio (data-ink \u002F total\n   ink).\n2. **Avoid chartjunk** — decorative elements that do not convey\n   information.\n3. **Use small multiples** — repeat a chart design across subsets for\n   comparison.\n4. **Integrate text and graphics** — labels belong on the chart, not\n   in a distant legend.\n\n### Cleveland & McGill encoding ranking\n\nPerceptual accuracy, most to least accurate for quantitative data:\n\n1. Position along a common scale\n2. Position along non-aligned scales\n3. Length\n4. Angle \u002F slope\n5. Area\n6. Volume \u002F curvature\n7. Color saturation \u002F shading\n8. Color hue\n\nAlways pick the highest-ranked encoding that fits the relationship.\n\n### Color palettes\n\n- **Sequential** (low to high): single hue, varying lightness (e.g.\n  `#f7fbff` to `#08306b`). Good for heatmaps, choropleths, and\n  continuous data.\n- **Diverging** (negative to positive with neutral center): two hues\n  with light center (red-white-blue, brown-white-teal). Good for\n  deviation from a baseline.\n- **Categorical**: maximally distinct hues at similar lightness.\n  Limit to 5-7 colors. A safe set: `#4e79a7` `#f28e2b` `#e15759`\n  `#76b7b2` `#59a14f` `#edc948` `#b07aa1`.\n- **Colorblind safety** (~8% of men): avoid red-green as the only\n  cue. Test with deuteranopia and protanopia simulators. Safe pairs:\n  blue\u002Forange, blue\u002Fred, purple\u002Fgreen.\n\n### Typography scale\n\n| Element | Size (relative) | Weight | Case |\n|---|---|---|---|\n| Title | 1.5x base | Bold | Sentence |\n| Subtitle | 1.2x base | Regular | Sentence |\n| Axis labels | 1x base | Medium | Sentence |\n| Tick labels | 0.85x base | Regular | As-is |\n| Annotations | 0.85x base | Regular | Sentence |\n| Source note | 0.7x base | Regular | Sentence |\n\n### SVG layout template\n\n```xml\n\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" viewBox=\"0 0 800 500\"\n     role=\"img\" aria-label=\"Chart description\">\n  \u003Ctitle>Chart Title\u003C\u002Ftitle>\n  \u003Cdesc>Detailed description for screen readers\u003C\u002Fdesc>\n\n  \u003Cstyle>\n    .title { font: bold 24px sans-serif; fill: #1a1a1a; }\n    .subtitle { font: 16px sans-serif; fill: #666; }\n    .axis-label { font: 14px sans-serif; fill: #333; }\n    .tick-label { font: 12px sans-serif; fill: #666; }\n    .grid-line { stroke: #e0e0e0; stroke-width: 1; }\n    .data-label { font: 12px sans-serif; fill: #333; }\n    .source { font: 10px sans-serif; fill: #999; }\n  \u003C\u002Fstyle>\n\n  \u003C!-- Margin convention: top=50, right=30, bottom=60, left=80 -->\n  \u003Cg transform=\"translate(80, 50)\">\n    \u003C!-- Chart content here -->\n    \u003C!-- Plot area: 690 x 390 -->\n  \u003C\u002Fg>\n\n  \u003Ctext x=\"80\" y=\"30\" class=\"title\">Chart Title\u003C\u002Ftext>\n  \u003Ctext x=\"80\" y=\"48\" class=\"subtitle\">Supporting context\u003C\u002Ftext>\n  \u003Ctext x=\"80\" y=\"490\" class=\"source\">Source: Data source\u003C\u002Ftext>\n\u003C\u002Fsvg>\n```\n\nConsistent margins for an 800x500 canvas: top 50 (title and\nsubtitle), right 30 (breathing room), bottom 60 (x-axis label plus\ntick labels), left 80 (y-axis label plus tick labels).\n\n### Chart-specific guidelines\n\n- **Bar charts:** gap between bars 40-50% of bar width. Sort by value\n  descending unless order is meaningful. Horizontal bars for long\n  category labels. Always start the y-axis at zero.\n- **Line charts:** cap at 5-7 lines before it gets cluttered. Label\n  lines directly when possible. Add dots at data points for fewer\n  than 15 points. Consider area fills for 1-2 series.\n- **Scatter plots:** use 0.3-0.7 opacity when points overlap. Size by\n  area, not radius. Add a trend line only when the correlation is\n  meaningful. Label outliers directly.\n- **Tables (when better than charts):** use when precise values\n  matter more than patterns. Right-align numbers, left-align text.\n  Subtle row striping for readability. Highlight key values with\n  bold or color.\n\n### Common pitfalls\n\n- **Truncated y-axis:** non-zero start exaggerates differences.\n- **3D effects:** distort value perception — always 2D.\n- **Pie charts:** hard to compare — bar charts are more precise.\n- **Dual y-axes:** confusing — use small multiples instead.\n- **Excessive decoration:** chartjunk distracts from data.\n- **Poor contrast:** light colors on white backgrounds.\n- **Missing units:** always label what the numbers mean.\n- **Rainbow colormaps:** perceptually non-uniform — use sequential\n  or diverging palettes.\n\n### Responsive considerations\n\nUse `viewBox` without fixed width and height for fluid scaling. Test\nreadability at 50% and 200% zoom. Keep minimum effective text size\naround 10px. On mobile, stack small multiples vertically and prefer\nhorizontal bars.\n\n### References\n\n- `references\u002Fbest-practices.md` — Tufte, Cleveland & McGill, color\n  palettes, SVG template, and chart-specific guidelines source.\n","# Infographics\n\n## Intro\n\nA good chart starts from a single message, picks the most accurate\nvisual encoding for the data relationship, and strips everything that\ndoes not support it. Generate standalone SVG with explicit `viewBox`,\nsemantic text, and accessible metadata so the result is editable,\nresponsive, and screen-reader friendly.\n\n## Overview\n\n### SVG generation principles\n\n- Emit standalone SVG with `xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\"`.\n- Set an explicit `viewBox` (e.g. `viewBox=\"0 0 800 600\"`) for\n  responsive scaling.\n- Use `width=\"100%\"` and `height=\"auto\"` for flexible embedding.\n- Group related elements with `\u003Cg>` and position via `transform`.\n- Put reusable styles in `\u003Cdefs>` and `\u003Cstyle>` blocks.\n- Give elements semantic IDs and classes so the file stays editable.\n- Keep text as `\u003Ctext>` elements, not paths, for accessibility.\n\n### Data-to-visual mapping\n\n1. **Identify the message** — what should the viewer learn?\n2. **Choose the encoding** — position, length, angle, area, color, or\n   shape.\n3. **Apply visual hierarchy** — the most important data gets the\n   strongest visual treatment.\n4. **Add context** — title, axis labels, legend, source attribution.\n5. **Simplify** — remove anything that does not support the message.\n\nEncoding effectiveness from most to least accurate for quantitative\ndata: position > length > angle > area > color saturation > shape.\n\n### Chart type selection\n\n| Data Relationship | Chart Type |\n|---|---|\n| Change over time | Line chart, area chart |\n| Comparison of categories | Bar chart (horizontal for many categories) |\n| Part-to-whole | Stacked bar, treemap (avoid pie charts for > 5 slices) |\n| Distribution | Histogram, box plot, violin plot |\n| Correlation | Scatter plot, bubble chart |\n| Ranking | Horizontal bar chart, lollipop chart |\n| Flow \u002F process | Sankey diagram, flowchart |\n| Geographic | Choropleth map, symbol map |\n| Hierarchy | Treemap, sunburst |\n\n### Visual design\n\n- **Color palette:** 3-5 colors max, legible in grayscale.\n- **Typography:** one sans-serif font, clear size hierarchy (title >\n  subtitle > labels > annotations).\n- **Whitespace:** generous margins and padding prevent clutter.\n- **Grid lines:** light gray, thin, removed when unnecessary.\n- **Data labels:** place directly on chart elements when space\n  permits to reduce legend lookups.\n- **Aspect ratio:** ~16:9 for presentations, ~4:3 for documents, ~1:1\n  for social media.\n- **Mobile first:** over 60% of content is consumed on mobile —\n  prefer vertical layouts.\n- **One focal point:** visuals with a clear focal point outperform\n  complex ones by roughly 2x in retention.\n\n### Accessibility\n\n- 4.5:1 contrast for text, 3:1 for large text and UI elements.\n- Never rely solely on color to convey information — add patterns,\n  labels, or shapes.\n- Include `\u003Ctitle>` and `\u003Cdesc>` for screen readers.\n- Use `role=\"img\"` and `aria-label` on the SVG element.\n\n### Alternative formats\n\nWhen SVG is not the right fit, consider Mermaid for flowcharts and\nsequence\u002FGantt diagrams embeddable in Markdown, ASCII art for\nterminals and plain-text READMEs, or a CSV plus narrative when the\nuser just needs organized data with commentary.\n\n## Gotchas\n\nAgent-specific failure modes — provider-neutral pause-and-self-check items:\n\n- **Omitting the `viewBox` attribute.** An SVG without `viewBox` does not scale responsively — it renders at a fixed pixel size that overflows narrow containers and documentation embeds. Always emit `viewBox=\"0 0 W H\"` with explicit dimensions and use `width=\"100%\"` and `height=\"auto\"`.\n- **Positioning `\u003Ctext>` elements without explicit coordinates and alignment attributes.** SVG text without `x`, `y`, `text-anchor`, and `dominant-baseline` renders at the origin or at browser-specific defaults. Lay out every text element explicitly with all four positioning attributes.\n- **Encoding data in color alone.** Roughly 8% of men have red-green color vision deficiency. A chart that differentiates categories only by color is inaccessible. Always pair color with a second encoding: pattern, label, shape, or position.\n- **Choosing a pie chart for more than 5 slices.** The human eye is poor at comparing angles; with many slices, most segments become indistinguishable. Prefer a horizontal bar chart, which exposes differences via length — the most accurate quantitative encoding.\n- **Omitting `\u003Ctitle>` and `\u003Cdesc>` elements.** Screen readers have no way to announce the chart's content without these elements. Include a `\u003Ctitle>` stating the chart's finding (not just its topic) and a `\u003Cdesc>` summarizing the key data.\n- **Starting a bar chart's y-axis at a non-zero value.** Truncating the axis to exaggerate small differences distorts the viewer's perception of magnitude. For bar charts, the y-axis baseline must be zero.\n- **Hardcoding `width` and `height` pixel attributes on the root SVG element.** A chart with fixed pixel dimensions overflows its container on mobile and cannot be embedded responsively. Use `width=\"100%\"` and `height=\"auto\"` and let `viewBox` drive the aspect ratio.\n\n## Full reference\n\n### Tufte's core rules\n\n1. **Show the data** — maximize the data-ink ratio (data-ink \u002F total\n   ink).\n2. **Avoid chartjunk** — decorative elements that do not convey\n   information.\n3. **Use small multiples** — repeat a chart design across subsets for\n   comparison.\n4. **Integrate text and graphics** — labels belong on the chart, not\n   in a distant legend.\n\n### Cleveland & McGill encoding ranking\n\nPerceptual accuracy, most to least accurate for quantitative data:\n\n1. Position along a common scale\n2. Position along non-aligned scales\n3. Length\n4. Angle \u002F slope\n5. Area\n6. Volume \u002F curvature\n7. Color saturation \u002F shading\n8. Color hue\n\nAlways pick the highest-ranked encoding that fits the relationship.\n\n### Color palettes\n\n- **Sequential** (low to high): single hue, varying lightness (e.g.\n  `#f7fbff` to `#08306b`). Good for heatmaps, choropleths, and\n  continuous data.\n- **Diverging** (negative to positive with neutral center): two hues\n  with light center (red-white-blue, brown-white-teal). Good for\n  deviation from a baseline.\n- **Categorical**: maximally distinct hues at similar lightness.\n  Limit to 5-7 colors. A safe set: `#4e79a7` `#f28e2b` `#e15759`\n  `#76b7b2` `#59a14f` `#edc948` `#b07aa1`.\n- **Colorblind safety** (~8% of men): avoid red-green as the only\n  cue. Test with deuteranopia and protanopia simulators. Safe pairs:\n  blue\u002Forange, blue\u002Fred, purple\u002Fgreen.\n\n### Typography scale\n\n| Element | Size (relative) | Weight | Case |\n|---|---|---|---|\n| Title | 1.5x base | Bold | Sentence |\n| Subtitle | 1.2x base | Regular | Sentence |\n| Axis labels | 1x base | Medium | Sentence |\n| Tick labels | 0.85x base | Regular | As-is |\n| Annotations | 0.85x base | Regular | Sentence |\n| Source note | 0.7x base | Regular | Sentence |\n\n### SVG layout template\n\n```xml\n\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" viewBox=\"0 0 800 500\"\n     role=\"img\" aria-label=\"Chart description\">\n  \u003Ctitle>Chart Title\u003C\u002Ftitle>\n  \u003Cdesc>Detailed description for screen readers\u003C\u002Fdesc>\n\n  \u003Cstyle>\n    .title { font: bold 24px sans-serif; fill: #1a1a1a; }\n    .subtitle { font: 16px sans-serif; fill: #666; }\n    .axis-label { font: 14px sans-serif; fill: #333; }\n    .tick-label { font: 12px sans-serif; fill: #666; }\n    .grid-line { stroke: #e0e0e0; stroke-width: 1; }\n    .data-label { font: 12px sans-serif; fill: #333; }\n    .source { font: 10px sans-serif; fill: #999; }\n  \u003C\u002Fstyle>\n\n  \u003C!-- Margin convention: top=50, right=30, bottom=60, left=80 -->\n  \u003Cg transform=\"translate(80, 50)\">\n    \u003C!-- Chart content here -->\n    \u003C!-- Plot area: 690 x 390 -->\n  \u003C\u002Fg>\n\n  \u003Ctext x=\"80\" y=\"30\" class=\"title\">Chart Title\u003C\u002Ftext>\n  \u003Ctext x=\"80\" y=\"48\" class=\"subtitle\">Supporting context\u003C\u002Ftext>\n  \u003Ctext x=\"80\" y=\"490\" class=\"source\">Source: Data source\u003C\u002Ftext>\n\u003C\u002Fsvg>\n```\n\nConsistent margins for an 800x500 canvas: top 50 (title and\nsubtitle), right 30 (breathing room), bottom 60 (x-axis label plus\ntick labels), left 80 (y-axis label plus tick labels).\n\n### Chart-specific guidelines\n\n- **Bar charts:** gap between bars 40-50% of bar width. Sort by value\n  descending unless order is meaningful. Horizontal bars for long\n  category labels. Always start the y-axis at zero.\n- **Line charts:** cap at 5-7 lines before it gets cluttered. Label\n  lines directly when possible. Add dots at data points for fewer\n  than 15 points. Consider area fills for 1-2 series.\n- **Scatter plots:** use 0.3-0.7 opacity when points overlap. Size by\n  area, not radius. Add a trend line only when the correlation is\n  meaningful. Label outliers directly.\n- **Tables (when better than charts):** use when precise values\n  matter more than patterns. Right-align numbers, left-align text.\n  Subtle row striping for readability. Highlight key values with\n  bold or color.\n\n### Common pitfalls\n\n- **Truncated y-axis:** non-zero start exaggerates differences.\n- **3D effects:** distort value perception — always 2D.\n- **Pie charts:** hard to compare — bar charts are more precise.\n- **Dual y-axes:** confusing — use small multiples instead.\n- **Excessive decoration:** chartjunk distracts from data.\n- **Poor contrast:** light colors on white backgrounds.\n- **Missing units:** always label what the numbers mean.\n- **Rainbow colormaps:** perceptually non-uniform — use sequential\n  or diverging palettes.\n\n### Responsive considerations\n\nUse `viewBox` without fixed width and height for fluid scaling. Test\nreadability at 50% and 200% zoom. Keep minimum effective text size\naround 10px. On mobile, stack small multiples vertically and prefer\nhorizontal bars.\n\n### References\n\n- `references\u002Fbest-practices.md` — Tufte, Cleveland & McGill, color\n  palettes, SVG template, and chart-specific guidelines source.\n",{"name":5,"metadata":55,"description":61},{"processkit":56},{"id":57,"created":58,"version":59,"category":42,"apiVersion":60},"SKILL-infographics",1775433600000,"1.1.0","processkit.projectious.work\u002Fv1","Creates data-driven infographics and charts as accessible SVG. Use when visualizing data, choosing a chart type, generating an SVG chart or infographic, or reviewing a visualization for clarity and accuracy.\n","main","4876a92620ee792aac2ac9a1a806322d8a572367","archive\u002Fprocesskit-install-20261101\u002Fcontext\u002Ftemplates\u002Fprocesskit\u002Fv0.17.0\u002Fcontext\u002Fskills\u002Fdocuments\u002Finfographics","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit","https:\u002F\u002Fprojectious-work.github.io\u002Fprocesskit\u002F","https:\u002F\u002Fgithub.com\u002Fprojectious-work","2026-11-11 23:24:18",{"source":8,"skillName":5,"commands":70,"prompt":80,"zipAvailable":81},[71,74,77],{"tool":72,"command":73},"npx","npx skills add projectious-work\u002Fprocesskit --skill infographics",{"tool":75,"command":76},"bunx","bunx skills add projectious-work\u002Fprocesskit --skill infographics",{"tool":78,"command":79},"pnpm","pnpm dlx skills add projectious-work\u002Fprocesskit --skill infographics","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Farchive\u002Fprocesskit-install-20261101\u002Fcontext\u002Ftemplates\u002Fprocesskit\u002Fv0.17.0\u002Fcontext\u002Fskills\u002Fdocuments\u002Finfographics\u002FSKILL.md",true,[83],{"path":84,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":87,"sourceHtmlUrl":88},"references\u002Fbest-practices.md","REFERENCE","参考文档",4318,"https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Farchive\u002Fprocesskit-install-20261101\u002Fcontext\u002Ftemplates\u002Fprocesskit\u002Fv0.17.0\u002Fcontext\u002Fskills\u002Fdocuments\u002Finfographics\u002Freferences\u002Fbest-practices.md",[90,113,133,154,171,189],{"skillNo":91,"name":92,"nameZh":6,"description":93,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":99,"publishedAt":50},"01M6X5MTC89B4ZGXW3JVSQCPF8","skill-management","Manage Skill package manifests as v1 ontology entities.","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Fsrc\u002Fcontext\u002Fskills\u002Fprocesskit\u002Fskill-management\u002FSKILL.md",[96],{"categoryNo":97,"categoryName":98,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[100,101,102,103,104,105,45,106,107,108,92,109,32,110,37,111,112],"management","skill management","create","update","package","alpha","list","manage","ontology","get","manifests","skill package","transition",{"skillNo":114,"name":115,"nameZh":6,"description":116,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":117,"categories":118,"keywords":120,"publishedAt":50},"01M6X5MCV74NHW5MEDNHZRF2C8","schema-management","Manage generated processkit schema contracts through deterministic MCP rebuild and inspection workflows.","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Fsrc\u002Fcontext\u002Fskills\u002Fprocesskit\u002Fschema-management\u002FSKILL.md",[119],{"categoryNo":97,"categoryName":98,"taxonomyType":21,"taxonomyTypeDesc":22},[100,121,122,123,124,125,105,45,126,127,107,128,129,130,109,131,132],"schema","schema management","MCP","workflows","validation","generated","rebuild","contracts","wed","deterministic","contract","mode",{"skillNo":134,"name":135,"nameZh":6,"description":136,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":137,"categories":138,"keywords":139,"publishedAt":50},"01M6X5M5G6YJ96AMZGSCZJ1D13","proposition-management","Record claims, risks, beliefs, world facts, WSJF estimates, and assumptions through the Proposition interface.","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Fsrc\u002Fcontext\u002Fskills\u002Fprocesskit\u002Fproposition-management\u002FSKILL.md",[],[100,140,141,102,103,142,105,45,143,144,145,146,109,147,148,149,150,151,152,153],"proposition","proposition management","index","log","world","record","query","creation","event","interface","updates","facts","claims","WSJF",{"skillNo":155,"name":156,"nameZh":6,"description":157,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":158,"categories":159,"keywords":160,"publishedAt":50},"01M6X5KMQ83QN9M6MPWZM7344F","ontology-management","Manage generated v1 ontology entities that do not require a dedicated domain server.","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Fsrc\u002Fcontext\u002Fskills\u002Fprocesskit\u002Fontology-management\u002FSKILL.md",[],[100,108,161,102,105,162,163,126,164,143,107,165,166,109,167,168,148,169,37,170],"ontology management","lifecycle","archive","roadmap","do","domain","iteration","keep","measurement","generic",{"skillNo":172,"name":173,"nameZh":6,"description":174,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":175,"categories":176,"keywords":177,"publishedAt":50},"01M6X5KCY2DN3SM21RERSFNEBT","okf-compatibility","Import, export, and validate conformant Open Knowledge Format bundles.","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Fsrc\u002Fcontext\u002Fskills\u002Fprocesskit\u002Fokf-compatibility\u002FSKILL.md",[],[178,179,180,181,105,182,183,184,45,185,186,187,188],"okf","compatibility","okf compatibility","validate","open","knowledge","format","export","bundles","bundle","import",{"skillNo":190,"name":191,"nameZh":6,"description":192,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":193,"categories":194,"keywords":195,"publishedAt":50},"01M6X5JA8S5PNGJVFW4EQY8T83","capability-management","Manage versioned Capability entities and their governed lifecycle.","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Fsrc\u002Fcontext\u002Fskills\u002Fprocesskit\u002Fcapability-management\u002FSKILL.md",[],[100,196,197,102,103,142,105,162,45,106,143,198,107,145,109,168,148,149,199,112],"capability","capability management","queries","changes"]