Creator · AgriciDaniel
Last updated · Sep 2, 2026
Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts with automatic platform detection (HTML vs JSX/MDX). Enforces chart type diversity, accessible markup (role=img,
Creator · AgriciDaniel
Last updated · Sep 2, 2026
Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts with automatic platform detection (HTML vs JSX/MDX). Enforces chart type diversity, accessible markup (role=img,
Creator · AgriciDaniel
Last updated · Sep 2, 2026
Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts with automatic platform detection (HTML vs JSX/MDX). Enforces chart type diversity, accessible markup (role=img,
Creator · AgriciDaniel
Last updated · Sep 2, 2026
Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts with automatic platform detection (HTML vs JSX/MDX). Enforces chart type diversity, accessible markup (role=img,
Sandbox only
Install targets
Codex install prompt
Install the "blog-chart" agent skill from https://github.com/AgriciDaniel/claude-blog/tree/main/brain/.raw/sources/claude-blog-skill/skills/blog-chart. Read its SKILL.md or equivalent instructions first, install only the files needed for this workspace, and summarize any required setup before using it. Skill purpose: Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts with automatic platform detection (HTML vs JSX/MDX). Enforces chart type diversity, accessible markup (role=img, aria-labelledby), source attribution, and transparent backgrounds. Use whenever the user mentions data visualization, charts, graphs, comparison tables that need to be visualized, or wants to embed inline SVG visualizations in a blog post, even if not invoking blog-write. Use when user says "blog chart", "generate chart", "data visualization", "svg chart", "blog graph", "visualize data", or when the blog-write workflow identifies chart-worthy data points (3+ comparable metrics, trends, before/after data). After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {"event_id":"install_<unique-id>","skill_slug":"agricidaniel-blog-chart","task":"Install blog-chart","agent":"codex","outcome":"success","install_used":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes.Supply asset profile
Deep research, source comparison, literature review, RAG, knowledge search, and reports.
Scenario
Research agents
I need my agent to research a topic, compare sources, and produce a concise report.
Agent fit
Claude Code + OpenAI Agents + CLI
Codex, Claude Code, Cursor, CLI, or custom agents.
Install
Ready
npx skills add AgriciDaniel/claude-blog --skill blog-chart
Maintenance
fresh
8d since push
Risk
Needs review
Dependency or permission surface needs review
GitHub quality
2.0K
80/100 Quality · 78/100 Trust
Coverage tags
Review notes
Dependency or permission surface needs review · Permission surface may require sandboxing
Agent adoption scorecard
These scores combine public repository metadata, OpenAgentSkill review signals, maintenance freshness, and install readiness. They are a shortlist signal, not a replacement for human review.
Quality
StrongSolid option that is likely worth shortlisting for production workflows.
Trust
Sandbox onlyUseful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
Audit
Needs reviewA machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
OpenAgentSkill Trust Score v5
Run only in a sandbox and compare close alternatives before using it for real work.
Stars
2.0K GitHub stars
Repo activity
2.0K stars, 333 forks
Maintenance
8d since push
License
MIT
Install
npx skills add AgriciDaniel/claude-blog --skill blog-chart
Install safety
Agent-readable metadata
Use this block or the embedded JSON to decide whether an agent should install this skill, choose an alternative, or ask for human review first.
Suited tasks
Suited agents
Install decision
Trust and risk
Outcome loop
Install command
npx skills add AgriciDaniel/claude-blog --skill blog-chartDo not use when
Alternative
1.9K Stars
npx skills add yanliudesign/mono-color-skill --skill mono-color
Alternative
61.0K Stars
npx skills add mvanhorn/last30days-skill -g
Alternative
38.4K Stars
npx skills add Imbad0202/academic-research-skills
Alternative
28.0K Stars
npx skills add assafelovic/gpt-researcher
Agent safety v2
Sparse or mixed signals. Useful for discovery, but not for autonomous installation.
Test manually in an isolated workspace and compare against safer alternatives.
high
Skill metadata references terminal, CLI, shell, subprocess, or command execution workflows.
medium
Skill likely fetches remote pages, APIs, repositories, or external services.
high
Skill metadata references credentials, tokens, environment variables, or secret-bearing workflows.
Agent resolve plan
The Resolve API returns the selected skill, alternatives, safety policy, audit notes, install target, and copy-paste prompt an agent can follow without scraping this page.
Open JSON
/api/agent/resolve?task=Use%20blog-chart%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Resolve text
/api/agent/resolve?task=Use%20blog-chart%20for%20an%20agent%20workflow&agent=codex&max_risk=medium&format=text
Install handoff
/api/skills/agricidaniel-blog-chart/install
Agent should check
Copy prompt
Task: Use blog-chart in this workspace.
Resolve first: https://www.openagentskill.com/api/agent/resolve?task=Use%20blog-chart%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Review install handoff: https://www.openagentskill.com/api/skills/agricidaniel-blog-chart/install
Install command: npx skills add AgriciDaniel/claude-blog --skill blog-chart
Before running it, summarize audit warnings, required permissions, and the fallback skill if install is risky.Agent handoff
Use the public install endpoint to fetch the command, safety checklist, target prompts, and canonical links for this skill.
Install handoff
/api/skills/agricidaniel-blog-chart/install
LLM text format
/api/skills/agricidaniel-blog-chart/install?format=text
Find alternatives
/api/skills/search?q=blog-chart&limit=3
Agent prompt
Use blog-chart for this task. Review https://www.openagentskill.com/api/skills/agricidaniel-blog-chart/install, then install with: npx skills add AgriciDaniel/claude-blog --skill blog-chartRegistry metadata
This page exposes the same decision, trust, audit, use-case, and install signals through the Registry API, so agents can rank this skill without scraping the UI.
Manifest
/api/registry/manifest/agricidaniel-blog-chart
LLM text
/api/registry/manifest/agricidaniel-blog-chart?format=text
Install alias
/api/registry/install/agricidaniel-blog-chart
Recommend
/api/registry/recommend?task=Use%20blog-chart%20in%20an%20agent%20workflow&limit=3
Agent fit
Research agents
Use-case tags
Platforms
Claude Code, OpenAI Agents
Audit report
A machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
Agent decision cockpit
Use this as a leading candidate, then validate the README and install path in your own agent stack.
Role in stack
Primary pick
Primary fit
Research agents
Trust label
Production-ready
Install path
Command ready
Use when
Evidence
review first
Implementation path
Trust profile
Useful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
GitHub adoption
PASS2.0K GitHub stars
Stars/forks activity
PASS2.0K stars, 333 forks; issue activity unavailable in current metadata
Recent maintenance
PASS8d since push
License clarity
PASSMIT
Good signals
Review before install
Recommended action
Run only in a sandbox and compare close alternatives before using it for real work.
Quality profile
Solid option that is likely worth shortlisting for production workflows.
Workflow fit
Investigate faster
I need my agent to research a topic, compare sources, and produce a concise report.
Analyze datasets
I need my agent to analyze CSV data, produce insights, and explain trends.
Search private knowledge
I need my agent to build a RAG workflow over documents and retrieve reliable context.
Workflow fit
Find, compare, and synthesize
A workflow for agents that gather sources, compare claims, summarize long material, and draft useful research briefs.
Turn skills into distribution
A workflow for turning newly indexed skills into SEO briefs, social drafts, comparison pages, and reusable publishing workflows.
Operate and verify web apps
A workflow for agents that navigate products, fill forms, take screenshots, and verify real user flows across web applications.
Alternative shortlist
Similar skills that may fit this task.
Generate original one-ink or controlled two-ink editorial images from any theme, sentence, article idea, object, or reference photo. Always use this skill when the user asks for 单色海报、双色印刷、单色调视觉、蓝色/绿色孔版印刷、risograph、网点照片、复古或当代编辑排版、zine poster, monochrome editorial poster, duotone print, or asks to use the mono-color style. It uses an adaptive white, gray, or pale-beige substrate, no more than two printing inks, active negative space, terse human language, and strong serif/grotesk/mono typography without making retro styling the default or copying a source composition, wording, logo, or artwork. Produce both the final generation prompt and the generated raster image unless the user explicitly asks for prompt only.
Research the last 30 days across Reddit, X, YouTube, Hacker News, Polymarket, GitHub, and the web, then synthesize a grounded brief for an AI agent.
Academic Research Skills for Claude Code: research → write → review → revise → finalize
Run autonomous deep research over web and local sources
--- name: blog-chart description: > Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts with automatic platform detection (HTML vs JSX/MDX). Enforces chart type diversity, accessible markup (role=img, aria-labelledby), source attribution, and transparent backgrounds. Use whenever the user mentions data visualization, charts, graphs, comparison tables that need to be visualized, or wants to embed inline SVG visualizations in a blog post, even if not invoking blog-write. Use when user says "blog chart", "generate chart", "data visualization", "svg chart", "blog graph", "visualize data", or when the blog-write workflow identifies chart-worthy data points (3+ comparable metrics, trends, before/after data). user-invokable: false license: MIT ---
# Blog Chart: Built-In SVG Data Visualization
Generates dark-mode-compatible inline SVG charts for blog posts. Invoked internally by `blog-write` and `blog-rewrite` when chart-worthy data is identified. Not a standalone user-facing command.
**Styling source of truth:** `skills/blog/references/visual-media.md`
For supported chart types, prefer the deterministic CLI:
```bash python3 skills/blog-chart/scripts/generate_chart_svg.py --input chart.json --output chart.html --json ```
## Input Format
The writer or researcher passes a chart request:
``` Chart Request: - Type: horizontal bar - Title: "AI Citation Sources by Platform" - Data: ChatGPT 43.8%, Perplexity 6.6%, Google AI Overviews 2.2%, Reddit 7.15% - Source: [Verified source], [publication date] - Platform: mdx (or html) ```
## Chart Type Selection
Select based on the data pattern. Prefer chart type diversity, but repeat a type when comparability or reader comprehension clearly benefits.
| Data Pattern | Best Chart Type | |-------------|-----------------| | Before/after comparison | Grouped bar chart | | Ranked factors / correlations | Lollipop chart | | Parts of whole / market share | Donut chart | | Trend over time | Line chart | | Percentage improvement | Horizontal bar chart | | Distribution / range | Area chart | | Multi-dimensional scoring | Radar chart |
## Styling Rules (Non-Negotiable)
All charts must work on both dark and light backgrounds:
``` Text elements: fill="currentColor" Grid lines: stroke="currentColor" opacity="0.08" Axis lines: stroke="currentColor" opacity="0.3" Background: transparent (no fill on root SVG) Subtitle text: fill="var(--chart-muted, currentColor)" Source text: fill="var(--chart-muted, currentColor)" Label text: fill="currentColor" opacity="0.8" ```
Set `--chart-muted` to an accessible text token in the host theme. If no token exists, use `#4b5563` on light backgrounds and `#d1d5db` on dark backgrounds. Do not rely on low-opacity source or subtitle text for visible attribution.
### Color Palette
| Color | Hex | Use Case | |-------|-----|----------| | Orange | `#f97316` | Primary / highest value | | Sky Blue | `#38bdf8` | Secondary / comparison | | Purple | `#a78bfa` | Tertiary / special category | | Green | `#22c55e` | Quaternary / positive indicator |
For text inside approved colored elements: use `fill="#111827"` with `fontWeight="800"`. Only use white text after checking the contrast ratio is at least 4.5:1 against that specific fill color.
Do not rely on color alone. Add direct labels, patterns, line dashes, marker shapes, or legend text so colorblind readers can distinguish series.
## Standard SVG Shell (HTML)
```xml <svg viewBox="0 0 560 380" style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif" role="img" aria-labelledby="chart-title chart-desc" > <title id="chart-title">Chart Title</title> <desc id="chart-desc">Description for screen readers with all key data points and source</desc>
<!-- Chart content -->
<text x="280" y="372" text-anchor="middle" font-size="10" fill="var(--chart-muted, currentColor)"> Source: Source Name (Year) </text> </svg> ```
## JSX/MDX Shell (camelCase attributes)
```jsx <svg viewBox="0 0 560 380" style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}} role="img" aria-labelledby="chart-title chart-desc" > <title id="chart-title">Chart Title</title> <desc id="chart-desc">Description for screen readers</desc>
{/* Chart content */}
<text x="280" y="372" textAnchor="middle" fontSize="10" fill="var(--chart-muted, currentColor)"> Source: Source Name (Year) </text> </svg> ```
## JSX Attribute Conversion (Required for MDX)
| HTML | JSX | |------|-----| | `stroke-width` | `strokeWidth` | | `stroke-dasharray` | `strokeDasharray` | | `stroke-linecap` | `strokeLinecap` | | `text-anchor` | `textAnchor` | | `font-size` | `fontSize` | | `font-weight` | `fontWeight` | | `font-family` | `fontFamily` | | `class` | `className` | | `style="..."` | `style={{...}}` |
## Chart Type Construction
### Horizontal Bar Chart
Best for: percentage improvements, single-metric comparisons.
1. Define chart area: x=80, y=40, width=440, height=280 2. Calculate bar height: `chartHeight / dataCount - gap` (gap=8) 3. Calculate bar width: `(value / maxValue) * chartWidth` 4. Position bars: `y = chartY + index * (barHeight + gap)` 5. Label on left (right-aligned at x=75): category name 6. Value label at end of bar: percentage or number 7. Source text at bottom center
### Grouped Bar Chart
Best for: before/after, A vs B comparisons.
1. Define groups along Y axis, bars within each group 2. Use 2 colors (primary + secondary) for the two series 3. Add legend at top: colored square + label for each series 4. Gap between groups > gap within groups
### Donut Chart
Best for: parts of whole, market share.
1. Center: cx=280, cy=180, outer radius=140, inner radius=80 2. Calculate arc segments using cumulative angles 3. Each segment: `<path d="M... A... L... A... Z" fill="color" />` 4. Center text: total or key label 5. Legend below chart with color squares + labels + values
### Line Chart
Best for: trends over time.
1. X axis: time periods, evenly spaced 2. Y axis: value range with 4-5 grid lines 3. Draw grid lines: `stroke="currentColor" opacity="0.08"` 4. Plot data points: `<circle cx=... cy=... r="4" fill="color" />` 5. Connect with: `<polyline points="..." fill="none" stroke="color" strokeWidth="2" />` 6. Optional: area fill below line with `opacity="0.1"`
### Lollipop Chart
Best for: ranked factors, correlations.
1. Horizontal orientation (like bar chart but with circles) 2. Thin line from axis to data point: `stroke="currentColor" opacity="0.15" strokeWidth="1"` 3. Circle at data point: `r="6"` with fill color 4. Value label next to circle 5. Categories on Y axis (left-aligned)
### Area Chart
Best for: distribution, cumulative data.
1. Same as line chart but with filled area below 2. Area fill: `<path d="M... L... L... Z" fill="color" opacity="0.15" />` 3. Line on top: `stroke="color" strokeWidth="2" fill="none"` 4. Grid lines behind the area
### Radar Chart
Best for: multi-dimensional scoring (5-7 axes).
1. Center: cx=280, cy=190 2. Draw concentric polygons for grid (3-4 levels) 3. Calculate axis endpoints at equal angles 4. Plot data points on each axis proportional to value 5. Connect data points with filled polygon: `fill="color" opacity="0.2" stroke="color"` 6. Label each axis at the outer edge
## Label Rules
- Wrap long labels at word boundaries into `<tspan>` lines. - Truncate only when wrapping would collide with data marks, and keep the full label in `<desc>` or adjacent prose. - Use stable chart dimensions with a responsive `max-width: 100%; height: auto` style, or choose a justified wider viewBox for dense labels. - Check mobile widths so axis labels, legends, and value labels do not overlap.
## Output Format
Wrap every chart in a `<figure>` element:
**HTML:** ```html <figure> <svg viewBox="0 0 560 380" style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif" role="img" aria-labelledby="chart-title chart-desc"> <title id="chart-title">[Chart Title]</title> <desc id="chart-desc">[Full description with data points for screen readers]</desc> <!-- chart content --> <text x="280" y="372" text-anchor="middle" font-size="10" fill="var(--chart-muted, currentColor)"> Source: [Source Name] ([Year]) </text> </svg> <figcaption>Source: <a href="[Source URL]">[Source Name]</a>, [publication date].</figcaption> </figure> ```
**MDX:** ```mdx <figure className="chart-container" style={{margin: '2.5rem 0', textAlign: 'center', padding: '1.5rem', borderRadius: '12px'}}> <svg viewBox="0 0 560 380" style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}} role="img" aria-labelledby="chart-title chart-desc"> <title id="chart-title">[Chart Title]</title> <desc id="chart-desc">[Full description]</desc> {/* chart content with camelCase attributes */} <text x="280" y="372" textAnchor="middle" fontSize="10" fill="var(--chart-muted, currentColor)"> Source: [Source Name] ([Year]) </text> </svg> <figcaption>Source: <a href="[Source URL]">[Source Name]</a>, [publication date].</figcaption> </figure> ```
## Quality Checklist (Verify Before Returning)
- [ ] No hardcoded text colors except contrast-checked labels inside colored elements - [ ] No white/light backgrounds (transparent or none) - [ ] Source attribution text present at bottom and semantic `<figcaption>` present - [ ] `role="img"` and `aria-labelledby` present on `<svg>` - [ ] `<title id>` and `<desc id>` present inside `<svg>` - [ ] Chart type choice supports comprehension and comparability - [ ] If MDX: all attributes camelCased (no hyphens in attribute names) - [ ] Data values match the source data exactly - [ ] Color palette uses only approved colors - [ ] ViewBox is `0 0 560 380` (standard) or justified alternative - [ ] Labels, shapes, patterns, or line styles provide redundancy beyond color
Source provenance
Decision snapshot
2,016 GitHub stars
Audit
Install and adoption review
Agent-proven evidence
Outcome reports after resolve, review, install, and one narrow run.
No agent outcome data yet. The first agent run can report success, setup needs, risk blocks, failure, or not-relevant through /api/agent/outcome.
Install
Free and open source. Review the report before installing into production agents.
Growth loop
Scenario-led draft for blog-chart, ready for a manual X post.
blog-chart: Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports h... 2.0K stars https://www.openagentskill.com/skills/agricidaniel-blog-chart?ref=x
Listing + install path for blog-chart: https://www.openagentskill.com/skills/agricidaniel-blog-chart?ref=x Install: npx skills add AgriciDaniel/claude-blog --skill blog-chart
Listing source
This listing was indexed from public sources and is not marked official until a maintainer claim is approved.
Attribution links to the public repository or creator profile. Creators can claim the listing to update ownership signals.
Claim this skillOwner claim
This Registry indexed listing is attributed to AgriciDaniel but is not marked official yet. Claim it to add a verified owner signal and make future launch, install, and audit updates easier to trust.
Creator backlink kit
Show the canonical listing, current trust and audit signals, and real Agent-Proven evidence where developers evaluate the repository.
[](https://www.openagentskill.com/skills/agricidaniel-blog-chart?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/agricidaniel-blog-chart?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/agricidaniel-blog-chart/audit)
[](https://www.openagentskill.com/skills/agricidaniel-blog-chart?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)AgriciDaniel
@agricidaniel
Share whether this skill looks useful for your agent workflow. Aggregated feedback improves rankings over time.
Sandbox only
mono-color
Generate original one-ink or controlled two-ink editorial images from any theme, sentence, article idea, object, or reference photo. Always use this skill when the user asks for 单色海报、双色印刷、单色调视觉、蓝色/绿色孔版印刷、risograph、网点照片、复古或当代编辑排版、zine poster, monochrome editorial poster, duotone print, or asks to use the mono-color style. It uses an adaptive white, gray, or pale-beige substrate, no more than two printing inks, active negative space, terse human language, and strong serif/grotesk/mono typography without making retro styling the default or copying a source composition, wording, logo, or artwork. Produce both the final generation prompt and the generated raster image unless the user explicitly asks for prompt only.
1.9K StarsLast30days Skill
Research the last 30 days across Reddit, X, YouTube, Hacker News, Polymarket, GitHub, and the web, then synthesize a grounded brief for an AI agent.
61.0K StarsAcademic Research Skills
Academic Research Skills for Claude Code: research → write → review → revise → finalize
38.4K StarsGPT Researcher
Run autonomous deep research over web and local sources
28.0K StarsSandbox only
Install targets
Codex install prompt
Install the "blog-chart" agent skill from https://github.com/AgriciDaniel/claude-blog/tree/main/brain/.raw/sources/claude-blog-skill/skills/blog-chart. Read its SKILL.md or equivalent instructions first, install only the files needed for this workspace, and summarize any required setup before using it. Skill purpose: Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts with automatic platform detection (HTML vs JSX/MDX). Enforces chart type diversity, accessible markup (role=img, aria-labelledby), source attribution, and transparent backgrounds. Use whenever the user mentions data visualization, charts, graphs, comparison tables that need to be visualized, or wants to embed inline SVG visualizations in a blog post, even if not invoking blog-write. Use when user says "blog chart", "generate chart", "data visualization", "svg chart", "blog graph", "visualize data", or when the blog-write workflow identifies chart-worthy data points (3+ comparable metrics, trends, before/after data). After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {"event_id":"install_<unique-id>","skill_slug":"agricidaniel-blog-chart","task":"Install blog-chart","agent":"codex","outcome":"success","install_used":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes.Supply asset profile
Deep research, source comparison, literature review, RAG, knowledge search, and reports.
Scenario
Research agents
I need my agent to research a topic, compare sources, and produce a concise report.
Agent fit
Claude Code + OpenAI Agents + CLI
Codex, Claude Code, Cursor, CLI, or custom agents.
Install
Ready
npx skills add AgriciDaniel/claude-blog --skill blog-chart
Maintenance
fresh
8d since push
Risk
Needs review
Dependency or permission surface needs review
GitHub quality
2.0K
80/100 Quality · 78/100 Trust
Coverage tags
Review notes
Dependency or permission surface needs review · Permission surface may require sandboxing
Agent adoption scorecard
These scores combine public repository metadata, OpenAgentSkill review signals, maintenance freshness, and install readiness. They are a shortlist signal, not a replacement for human review.
Quality
StrongSolid option that is likely worth shortlisting for production workflows.
Trust
Sandbox onlyUseful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
Audit
Needs reviewA machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
OpenAgentSkill Trust Score v5
Run only in a sandbox and compare close alternatives before using it for real work.
Stars
2.0K GitHub stars
Repo activity
2.0K stars, 333 forks
Maintenance
8d since push
License
MIT
Install
npx skills add AgriciDaniel/claude-blog --skill blog-chart
Install safety
Agent-readable metadata
Use this block or the embedded JSON to decide whether an agent should install this skill, choose an alternative, or ask for human review first.
Suited tasks
Suited agents
Install decision
Trust and risk
Outcome loop
Install command
npx skills add AgriciDaniel/claude-blog --skill blog-chartDo not use when
Alternative
1.9K Stars
npx skills add yanliudesign/mono-color-skill --skill mono-color
Alternative
61.0K Stars
npx skills add mvanhorn/last30days-skill -g
Alternative
38.4K Stars
npx skills add Imbad0202/academic-research-skills
Alternative
28.0K Stars
npx skills add assafelovic/gpt-researcher
Agent safety v2
Sparse or mixed signals. Useful for discovery, but not for autonomous installation.
Test manually in an isolated workspace and compare against safer alternatives.
high
Skill metadata references terminal, CLI, shell, subprocess, or command execution workflows.
medium
Skill likely fetches remote pages, APIs, repositories, or external services.
high
Skill metadata references credentials, tokens, environment variables, or secret-bearing workflows.
Agent resolve plan
The Resolve API returns the selected skill, alternatives, safety policy, audit notes, install target, and copy-paste prompt an agent can follow without scraping this page.
Open JSON
/api/agent/resolve?task=Use%20blog-chart%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Resolve text
/api/agent/resolve?task=Use%20blog-chart%20for%20an%20agent%20workflow&agent=codex&max_risk=medium&format=text
Install handoff
/api/skills/agricidaniel-blog-chart/install
Agent should check
Copy prompt
Task: Use blog-chart in this workspace.
Resolve first: https://www.openagentskill.com/api/agent/resolve?task=Use%20blog-chart%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Review install handoff: https://www.openagentskill.com/api/skills/agricidaniel-blog-chart/install
Install command: npx skills add AgriciDaniel/claude-blog --skill blog-chart
Before running it, summarize audit warnings, required permissions, and the fallback skill if install is risky.Agent handoff
Use the public install endpoint to fetch the command, safety checklist, target prompts, and canonical links for this skill.
Install handoff
/api/skills/agricidaniel-blog-chart/install
LLM text format
/api/skills/agricidaniel-blog-chart/install?format=text
Find alternatives
/api/skills/search?q=blog-chart&limit=3
Agent prompt
Use blog-chart for this task. Review https://www.openagentskill.com/api/skills/agricidaniel-blog-chart/install, then install with: npx skills add AgriciDaniel/claude-blog --skill blog-chartRegistry metadata
This page exposes the same decision, trust, audit, use-case, and install signals through the Registry API, so agents can rank this skill without scraping the UI.
Manifest
/api/registry/manifest/agricidaniel-blog-chart
LLM text
/api/registry/manifest/agricidaniel-blog-chart?format=text
Install alias
/api/registry/install/agricidaniel-blog-chart
Recommend
/api/registry/recommend?task=Use%20blog-chart%20in%20an%20agent%20workflow&limit=3
Agent fit
Research agents
Use-case tags
Platforms
Claude Code, OpenAI Agents
Audit report
A machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
Agent decision cockpit
Use this as a leading candidate, then validate the README and install path in your own agent stack.
Role in stack
Primary pick
Primary fit
Research agents
Trust label
Production-ready
Install path
Command ready
Use when
Evidence
review first
Implementation path
Trust profile
Useful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
GitHub adoption
PASS2.0K GitHub stars
Stars/forks activity
PASS2.0K stars, 333 forks; issue activity unavailable in current metadata
Recent maintenance
PASS8d since push
License clarity
PASSMIT
Good signals
Review before install
Recommended action
Run only in a sandbox and compare close alternatives before using it for real work.
Quality profile
Solid option that is likely worth shortlisting for production workflows.
Workflow fit
Investigate faster
I need my agent to research a topic, compare sources, and produce a concise report.
Analyze datasets
I need my agent to analyze CSV data, produce insights, and explain trends.
Search private knowledge
I need my agent to build a RAG workflow over documents and retrieve reliable context.
Workflow fit
Find, compare, and synthesize
A workflow for agents that gather sources, compare claims, summarize long material, and draft useful research briefs.
Turn skills into distribution
A workflow for turning newly indexed skills into SEO briefs, social drafts, comparison pages, and reusable publishing workflows.
Operate and verify web apps
A workflow for agents that navigate products, fill forms, take screenshots, and verify real user flows across web applications.
Alternative shortlist
Similar skills that may fit this task.
Generate original one-ink or controlled two-ink editorial images from any theme, sentence, article idea, object, or reference photo. Always use this skill when the user asks for 单色海报、双色印刷、单色调视觉、蓝色/绿色孔版印刷、risograph、网点照片、复古或当代编辑排版、zine poster, monochrome editorial poster, duotone print, or asks to use the mono-color style. It uses an adaptive white, gray, or pale-beige substrate, no more than two printing inks, active negative space, terse human language, and strong serif/grotesk/mono typography without making retro styling the default or copying a source composition, wording, logo, or artwork. Produce both the final generation prompt and the generated raster image unless the user explicitly asks for prompt only.
Research the last 30 days across Reddit, X, YouTube, Hacker News, Polymarket, GitHub, and the web, then synthesize a grounded brief for an AI agent.
Academic Research Skills for Claude Code: research → write → review → revise → finalize
Run autonomous deep research over web and local sources
--- name: blog-chart description: > Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts with automatic platform detection (HTML vs JSX/MDX). Enforces chart type diversity, accessible markup (role=img, aria-labelledby), source attribution, and transparent backgrounds. Use whenever the user mentions data visualization, charts, graphs, comparison tables that need to be visualized, or wants to embed inline SVG visualizations in a blog post, even if not invoking blog-write. Use when user says "blog chart", "generate chart", "data visualization", "svg chart", "blog graph", "visualize data", or when the blog-write workflow identifies chart-worthy data points (3+ comparable metrics, trends, before/after data). user-invokable: false license: MIT ---
# Blog Chart: Built-In SVG Data Visualization
Generates dark-mode-compatible inline SVG charts for blog posts. Invoked internally by `blog-write` and `blog-rewrite` when chart-worthy data is identified. Not a standalone user-facing command.
**Styling source of truth:** `skills/blog/references/visual-media.md`
For supported chart types, prefer the deterministic CLI:
```bash python3 skills/blog-chart/scripts/generate_chart_svg.py --input chart.json --output chart.html --json ```
## Input Format
The writer or researcher passes a chart request:
``` Chart Request: - Type: horizontal bar - Title: "AI Citation Sources by Platform" - Data: ChatGPT 43.8%, Perplexity 6.6%, Google AI Overviews 2.2%, Reddit 7.15% - Source: [Verified source], [publication date] - Platform: mdx (or html) ```
## Chart Type Selection
Select based on the data pattern. Prefer chart type diversity, but repeat a type when comparability or reader comprehension clearly benefits.
| Data Pattern | Best Chart Type | |-------------|-----------------| | Before/after comparison | Grouped bar chart | | Ranked factors / correlations | Lollipop chart | | Parts of whole / market share | Donut chart | | Trend over time | Line chart | | Percentage improvement | Horizontal bar chart | | Distribution / range | Area chart | | Multi-dimensional scoring | Radar chart |
## Styling Rules (Non-Negotiable)
All charts must work on both dark and light backgrounds:
``` Text elements: fill="currentColor" Grid lines: stroke="currentColor" opacity="0.08" Axis lines: stroke="currentColor" opacity="0.3" Background: transparent (no fill on root SVG) Subtitle text: fill="var(--chart-muted, currentColor)" Source text: fill="var(--chart-muted, currentColor)" Label text: fill="currentColor" opacity="0.8" ```
Set `--chart-muted` to an accessible text token in the host theme. If no token exists, use `#4b5563` on light backgrounds and `#d1d5db` on dark backgrounds. Do not rely on low-opacity source or subtitle text for visible attribution.
### Color Palette
| Color | Hex | Use Case | |-------|-----|----------| | Orange | `#f97316` | Primary / highest value | | Sky Blue | `#38bdf8` | Secondary / comparison | | Purple | `#a78bfa` | Tertiary / special category | | Green | `#22c55e` | Quaternary / positive indicator |
For text inside approved colored elements: use `fill="#111827"` with `fontWeight="800"`. Only use white text after checking the contrast ratio is at least 4.5:1 against that specific fill color.
Do not rely on color alone. Add direct labels, patterns, line dashes, marker shapes, or legend text so colorblind readers can distinguish series.
## Standard SVG Shell (HTML)
```xml <svg viewBox="0 0 560 380" style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif" role="img" aria-labelledby="chart-title chart-desc" > <title id="chart-title">Chart Title</title> <desc id="chart-desc">Description for screen readers with all key data points and source</desc>
<!-- Chart content -->
<text x="280" y="372" text-anchor="middle" font-size="10" fill="var(--chart-muted, currentColor)"> Source: Source Name (Year) </text> </svg> ```
## JSX/MDX Shell (camelCase attributes)
```jsx <svg viewBox="0 0 560 380" style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}} role="img" aria-labelledby="chart-title chart-desc" > <title id="chart-title">Chart Title</title> <desc id="chart-desc">Description for screen readers</desc>
{/* Chart content */}
<text x="280" y="372" textAnchor="middle" fontSize="10" fill="var(--chart-muted, currentColor)"> Source: Source Name (Year) </text> </svg> ```
## JSX Attribute Conversion (Required for MDX)
| HTML | JSX | |------|-----| | `stroke-width` | `strokeWidth` | | `stroke-dasharray` | `strokeDasharray` | | `stroke-linecap` | `strokeLinecap` | | `text-anchor` | `textAnchor` | | `font-size` | `fontSize` | | `font-weight` | `fontWeight` | | `font-family` | `fontFamily` | | `class` | `className` | | `style="..."` | `style={{...}}` |
## Chart Type Construction
### Horizontal Bar Chart
Best for: percentage improvements, single-metric comparisons.
1. Define chart area: x=80, y=40, width=440, height=280 2. Calculate bar height: `chartHeight / dataCount - gap` (gap=8) 3. Calculate bar width: `(value / maxValue) * chartWidth` 4. Position bars: `y = chartY + index * (barHeight + gap)` 5. Label on left (right-aligned at x=75): category name 6. Value label at end of bar: percentage or number 7. Source text at bottom center
### Grouped Bar Chart
Best for: before/after, A vs B comparisons.
1. Define groups along Y axis, bars within each group 2. Use 2 colors (primary + secondary) for the two series 3. Add legend at top: colored square + label for each series 4. Gap between groups > gap within groups
### Donut Chart
Best for: parts of whole, market share.
1. Center: cx=280, cy=180, outer radius=140, inner radius=80 2. Calculate arc segments using cumulative angles 3. Each segment: `<path d="M... A... L... A... Z" fill="color" />` 4. Center text: total or key label 5. Legend below chart with color squares + labels + values
### Line Chart
Best for: trends over time.
1. X axis: time periods, evenly spaced 2. Y axis: value range with 4-5 grid lines 3. Draw grid lines: `stroke="currentColor" opacity="0.08"` 4. Plot data points: `<circle cx=... cy=... r="4" fill="color" />` 5. Connect with: `<polyline points="..." fill="none" stroke="color" strokeWidth="2" />` 6. Optional: area fill below line with `opacity="0.1"`
### Lollipop Chart
Best for: ranked factors, correlations.
1. Horizontal orientation (like bar chart but with circles) 2. Thin line from axis to data point: `stroke="currentColor" opacity="0.15" strokeWidth="1"` 3. Circle at data point: `r="6"` with fill color 4. Value label next to circle 5. Categories on Y axis (left-aligned)
### Area Chart
Best for: distribution, cumulative data.
1. Same as line chart but with filled area below 2. Area fill: `<path d="M... L... L... Z" fill="color" opacity="0.15" />` 3. Line on top: `stroke="color" strokeWidth="2" fill="none"` 4. Grid lines behind the area
### Radar Chart
Best for: multi-dimensional scoring (5-7 axes).
1. Center: cx=280, cy=190 2. Draw concentric polygons for grid (3-4 levels) 3. Calculate axis endpoints at equal angles 4. Plot data points on each axis proportional to value 5. Connect data points with filled polygon: `fill="color" opacity="0.2" stroke="color"` 6. Label each axis at the outer edge
## Label Rules
- Wrap long labels at word boundaries into `<tspan>` lines. - Truncate only when wrapping would collide with data marks, and keep the full label in `<desc>` or adjacent prose. - Use stable chart dimensions with a responsive `max-width: 100%; height: auto` style, or choose a justified wider viewBox for dense labels. - Check mobile widths so axis labels, legends, and value labels do not overlap.
## Output Format
Wrap every chart in a `<figure>` element:
**HTML:** ```html <figure> <svg viewBox="0 0 560 380" style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif" role="img" aria-labelledby="chart-title chart-desc"> <title id="chart-title">[Chart Title]</title> <desc id="chart-desc">[Full description with data points for screen readers]</desc> <!-- chart content --> <text x="280" y="372" text-anchor="middle" font-size="10" fill="var(--chart-muted, currentColor)"> Source: [Source Name] ([Year]) </text> </svg> <figcaption>Source: <a href="[Source URL]">[Source Name]</a>, [publication date].</figcaption> </figure> ```
**MDX:** ```mdx <figure className="chart-container" style={{margin: '2.5rem 0', textAlign: 'center', padding: '1.5rem', borderRadius: '12px'}}> <svg viewBox="0 0 560 380" style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}} role="img" aria-labelledby="chart-title chart-desc"> <title id="chart-title">[Chart Title]</title> <desc id="chart-desc">[Full description]</desc> {/* chart content with camelCase attributes */} <text x="280" y="372" textAnchor="middle" fontSize="10" fill="var(--chart-muted, currentColor)"> Source: [Source Name] ([Year]) </text> </svg> <figcaption>Source: <a href="[Source URL]">[Source Name]</a>, [publication date].</figcaption> </figure> ```
## Quality Checklist (Verify Before Returning)
- [ ] No hardcoded text colors except contrast-checked labels inside colored elements - [ ] No white/light backgrounds (transparent or none) - [ ] Source attribution text present at bottom and semantic `<figcaption>` present - [ ] `role="img"` and `aria-labelledby` present on `<svg>` - [ ] `<title id>` and `<desc id>` present inside `<svg>` - [ ] Chart type choice supports comprehension and comparability - [ ] If MDX: all attributes camelCased (no hyphens in attribute names) - [ ] Data values match the source data exactly - [ ] Color palette uses only approved colors - [ ] ViewBox is `0 0 560 380` (standard) or justified alternative - [ ] Labels, shapes, patterns, or line styles provide redundancy beyond color
Source provenance
Decision snapshot
2,016 GitHub stars
Audit
Install and adoption review
Agent-proven evidence
Outcome reports after resolve, review, install, and one narrow run.
No agent outcome data yet. The first agent run can report success, setup needs, risk blocks, failure, or not-relevant through /api/agent/outcome.
Install
Free and open source. Review the report before installing into production agents.
Growth loop
Scenario-led draft for blog-chart, ready for a manual X post.
blog-chart: Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports h... 2.0K stars https://www.openagentskill.com/skills/agricidaniel-blog-chart?ref=x
Listing + install path for blog-chart: https://www.openagentskill.com/skills/agricidaniel-blog-chart?ref=x Install: npx skills add AgriciDaniel/claude-blog --skill blog-chart
Listing source
This listing was indexed from public sources and is not marked official until a maintainer claim is approved.
Attribution links to the public repository or creator profile. Creators can claim the listing to update ownership signals.
Claim this skillOwner claim
This Registry indexed listing is attributed to AgriciDaniel but is not marked official yet. Claim it to add a verified owner signal and make future launch, install, and audit updates easier to trust.
Creator backlink kit
Show the canonical listing, current trust and audit signals, and real Agent-Proven evidence where developers evaluate the repository.
[](https://www.openagentskill.com/skills/agricidaniel-blog-chart?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/agricidaniel-blog-chart?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/agricidaniel-blog-chart/audit)
[](https://www.openagentskill.com/skills/agricidaniel-blog-chart?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)AgriciDaniel
@agricidaniel
Share whether this skill looks useful for your agent workflow. Aggregated feedback improves rankings over time.
Sandbox only
mono-color
Generate original one-ink or controlled two-ink editorial images from any theme, sentence, article idea, object, or reference photo. Always use this skill when the user asks for 单色海报、双色印刷、单色调视觉、蓝色/绿色孔版印刷、risograph、网点照片、复古或当代编辑排版、zine poster, monochrome editorial poster, duotone print, or asks to use the mono-color style. It uses an adaptive white, gray, or pale-beige substrate, no more than two printing inks, active negative space, terse human language, and strong serif/grotesk/mono typography without making retro styling the default or copying a source composition, wording, logo, or artwork. Produce both the final generation prompt and the generated raster image unless the user explicitly asks for prompt only.
1.9K StarsLast30days Skill
Research the last 30 days across Reddit, X, YouTube, Hacker News, Polymarket, GitHub, and the web, then synthesize a grounded brief for an AI agent.
61.0K StarsAcademic Research Skills
Academic Research Skills for Claude Code: research → write → review → revise → finalize
38.4K StarsGPT Researcher
Run autonomous deep research over web and local sources
28.0K StarsSandbox only
Install targets
Codex install prompt
Install the "blog-chart" agent skill from https://github.com/AgriciDaniel/claude-blog/tree/main/brain/.raw/sources/claude-blog-skill/skills/blog-chart. Read its SKILL.md or equivalent instructions first, install only the files needed for this workspace, and summarize any required setup before using it. Skill purpose: Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts with automatic platform detection (HTML vs JSX/MDX). Enforces chart type diversity, accessible markup (role=img, aria-labelledby), source attribution, and transparent backgrounds. Use whenever the user mentions data visualization, charts, graphs, comparison tables that need to be visualized, or wants to embed inline SVG visualizations in a blog post, even if not invoking blog-write. Use when user says "blog chart", "generate chart", "data visualization", "svg chart", "blog graph", "visualize data", or when the blog-write workflow identifies chart-worthy data points (3+ comparable metrics, trends, before/after data). After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {"event_id":"install_<unique-id>","skill_slug":"agricidaniel-blog-chart","task":"Install blog-chart","agent":"codex","outcome":"success","install_used":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes.Supply asset profile
Deep research, source comparison, literature review, RAG, knowledge search, and reports.
Scenario
Research agents
I need my agent to research a topic, compare sources, and produce a concise report.
Agent fit
Claude Code + OpenAI Agents + CLI
Codex, Claude Code, Cursor, CLI, or custom agents.
Install
Ready
npx skills add AgriciDaniel/claude-blog --skill blog-chart
Maintenance
fresh
8d since push
Risk
Needs review
Dependency or permission surface needs review
GitHub quality
2.0K
80/100 Quality · 78/100 Trust
Coverage tags
Review notes
Dependency or permission surface needs review · Permission surface may require sandboxing
Agent adoption scorecard
These scores combine public repository metadata, OpenAgentSkill review signals, maintenance freshness, and install readiness. They are a shortlist signal, not a replacement for human review.
Quality
StrongSolid option that is likely worth shortlisting for production workflows.
Trust
Sandbox onlyUseful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
Audit
Needs reviewA machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
OpenAgentSkill Trust Score v5
Run only in a sandbox and compare close alternatives before using it for real work.
Stars
2.0K GitHub stars
Repo activity
2.0K stars, 333 forks
Maintenance
8d since push
License
MIT
Install
npx skills add AgriciDaniel/claude-blog --skill blog-chart
Install safety
Agent-readable metadata
Use this block or the embedded JSON to decide whether an agent should install this skill, choose an alternative, or ask for human review first.
Suited tasks
Suited agents
Install decision
Trust and risk
Outcome loop
Install command
npx skills add AgriciDaniel/claude-blog --skill blog-chartDo not use when
Alternative
1.9K Stars
npx skills add yanliudesign/mono-color-skill --skill mono-color
Alternative
61.0K Stars
npx skills add mvanhorn/last30days-skill -g
Alternative
38.4K Stars
npx skills add Imbad0202/academic-research-skills
Alternative
28.0K Stars
npx skills add assafelovic/gpt-researcher
Agent safety v2
Sparse or mixed signals. Useful for discovery, but not for autonomous installation.
Test manually in an isolated workspace and compare against safer alternatives.
high
Skill metadata references terminal, CLI, shell, subprocess, or command execution workflows.
medium
Skill likely fetches remote pages, APIs, repositories, or external services.
high
Skill metadata references credentials, tokens, environment variables, or secret-bearing workflows.
Agent resolve plan
The Resolve API returns the selected skill, alternatives, safety policy, audit notes, install target, and copy-paste prompt an agent can follow without scraping this page.
Open JSON
/api/agent/resolve?task=Use%20blog-chart%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Resolve text
/api/agent/resolve?task=Use%20blog-chart%20for%20an%20agent%20workflow&agent=codex&max_risk=medium&format=text
Install handoff
/api/skills/agricidaniel-blog-chart/install
Agent should check
Copy prompt
Task: Use blog-chart in this workspace.
Resolve first: https://www.openagentskill.com/api/agent/resolve?task=Use%20blog-chart%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Review install handoff: https://www.openagentskill.com/api/skills/agricidaniel-blog-chart/install
Install command: npx skills add AgriciDaniel/claude-blog --skill blog-chart
Before running it, summarize audit warnings, required permissions, and the fallback skill if install is risky.Agent handoff
Use the public install endpoint to fetch the command, safety checklist, target prompts, and canonical links for this skill.
Install handoff
/api/skills/agricidaniel-blog-chart/install
LLM text format
/api/skills/agricidaniel-blog-chart/install?format=text
Find alternatives
/api/skills/search?q=blog-chart&limit=3
Agent prompt
Use blog-chart for this task. Review https://www.openagentskill.com/api/skills/agricidaniel-blog-chart/install, then install with: npx skills add AgriciDaniel/claude-blog --skill blog-chartRegistry metadata
This page exposes the same decision, trust, audit, use-case, and install signals through the Registry API, so agents can rank this skill without scraping the UI.
Manifest
/api/registry/manifest/agricidaniel-blog-chart
LLM text
/api/registry/manifest/agricidaniel-blog-chart?format=text
Install alias
/api/registry/install/agricidaniel-blog-chart
Recommend
/api/registry/recommend?task=Use%20blog-chart%20in%20an%20agent%20workflow&limit=3
Agent fit
Research agents
Use-case tags
Platforms
Claude Code, OpenAI Agents
Audit report
A machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
Agent decision cockpit
Use this as a leading candidate, then validate the README and install path in your own agent stack.
Role in stack
Primary pick
Primary fit
Research agents
Trust label
Production-ready
Install path
Command ready
Use when
Evidence
review first
Implementation path
Trust profile
Useful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
GitHub adoption
PASS2.0K GitHub stars
Stars/forks activity
PASS2.0K stars, 333 forks; issue activity unavailable in current metadata
Recent maintenance
PASS8d since push
License clarity
PASSMIT
Good signals
Review before install
Recommended action
Run only in a sandbox and compare close alternatives before using it for real work.
Quality profile
Solid option that is likely worth shortlisting for production workflows.
Workflow fit
Investigate faster
I need my agent to research a topic, compare sources, and produce a concise report.
Analyze datasets
I need my agent to analyze CSV data, produce insights, and explain trends.
Search private knowledge
I need my agent to build a RAG workflow over documents and retrieve reliable context.
Workflow fit
Find, compare, and synthesize
A workflow for agents that gather sources, compare claims, summarize long material, and draft useful research briefs.
Turn skills into distribution
A workflow for turning newly indexed skills into SEO briefs, social drafts, comparison pages, and reusable publishing workflows.
Operate and verify web apps
A workflow for agents that navigate products, fill forms, take screenshots, and verify real user flows across web applications.
Alternative shortlist
Similar skills that may fit this task.
Generate original one-ink or controlled two-ink editorial images from any theme, sentence, article idea, object, or reference photo. Always use this skill when the user asks for 单色海报、双色印刷、单色调视觉、蓝色/绿色孔版印刷、risograph、网点照片、复古或当代编辑排版、zine poster, monochrome editorial poster, duotone print, or asks to use the mono-color style. It uses an adaptive white, gray, or pale-beige substrate, no more than two printing inks, active negative space, terse human language, and strong serif/grotesk/mono typography without making retro styling the default or copying a source composition, wording, logo, or artwork. Produce both the final generation prompt and the generated raster image unless the user explicitly asks for prompt only.
Research the last 30 days across Reddit, X, YouTube, Hacker News, Polymarket, GitHub, and the web, then synthesize a grounded brief for an AI agent.
Academic Research Skills for Claude Code: research → write → review → revise → finalize
Run autonomous deep research over web and local sources
--- name: blog-chart description: > Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts with automatic platform detection (HTML vs JSX/MDX). Enforces chart type diversity, accessible markup (role=img, aria-labelledby), source attribution, and transparent backgrounds. Use whenever the user mentions data visualization, charts, graphs, comparison tables that need to be visualized, or wants to embed inline SVG visualizations in a blog post, even if not invoking blog-write. Use when user says "blog chart", "generate chart", "data visualization", "svg chart", "blog graph", "visualize data", or when the blog-write workflow identifies chart-worthy data points (3+ comparable metrics, trends, before/after data). user-invokable: false license: MIT ---
# Blog Chart: Built-In SVG Data Visualization
Generates dark-mode-compatible inline SVG charts for blog posts. Invoked internally by `blog-write` and `blog-rewrite` when chart-worthy data is identified. Not a standalone user-facing command.
**Styling source of truth:** `skills/blog/references/visual-media.md`
For supported chart types, prefer the deterministic CLI:
```bash python3 skills/blog-chart/scripts/generate_chart_svg.py --input chart.json --output chart.html --json ```
## Input Format
The writer or researcher passes a chart request:
``` Chart Request: - Type: horizontal bar - Title: "AI Citation Sources by Platform" - Data: ChatGPT 43.8%, Perplexity 6.6%, Google AI Overviews 2.2%, Reddit 7.15% - Source: [Verified source], [publication date] - Platform: mdx (or html) ```
## Chart Type Selection
Select based on the data pattern. Prefer chart type diversity, but repeat a type when comparability or reader comprehension clearly benefits.
| Data Pattern | Best Chart Type | |-------------|-----------------| | Before/after comparison | Grouped bar chart | | Ranked factors / correlations | Lollipop chart | | Parts of whole / market share | Donut chart | | Trend over time | Line chart | | Percentage improvement | Horizontal bar chart | | Distribution / range | Area chart | | Multi-dimensional scoring | Radar chart |
## Styling Rules (Non-Negotiable)
All charts must work on both dark and light backgrounds:
``` Text elements: fill="currentColor" Grid lines: stroke="currentColor" opacity="0.08" Axis lines: stroke="currentColor" opacity="0.3" Background: transparent (no fill on root SVG) Subtitle text: fill="var(--chart-muted, currentColor)" Source text: fill="var(--chart-muted, currentColor)" Label text: fill="currentColor" opacity="0.8" ```
Set `--chart-muted` to an accessible text token in the host theme. If no token exists, use `#4b5563` on light backgrounds and `#d1d5db` on dark backgrounds. Do not rely on low-opacity source or subtitle text for visible attribution.
### Color Palette
| Color | Hex | Use Case | |-------|-----|----------| | Orange | `#f97316` | Primary / highest value | | Sky Blue | `#38bdf8` | Secondary / comparison | | Purple | `#a78bfa` | Tertiary / special category | | Green | `#22c55e` | Quaternary / positive indicator |
For text inside approved colored elements: use `fill="#111827"` with `fontWeight="800"`. Only use white text after checking the contrast ratio is at least 4.5:1 against that specific fill color.
Do not rely on color alone. Add direct labels, patterns, line dashes, marker shapes, or legend text so colorblind readers can distinguish series.
## Standard SVG Shell (HTML)
```xml <svg viewBox="0 0 560 380" style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif" role="img" aria-labelledby="chart-title chart-desc" > <title id="chart-title">Chart Title</title> <desc id="chart-desc">Description for screen readers with all key data points and source</desc>
<!-- Chart content -->
<text x="280" y="372" text-anchor="middle" font-size="10" fill="var(--chart-muted, currentColor)"> Source: Source Name (Year) </text> </svg> ```
## JSX/MDX Shell (camelCase attributes)
```jsx <svg viewBox="0 0 560 380" style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}} role="img" aria-labelledby="chart-title chart-desc" > <title id="chart-title">Chart Title</title> <desc id="chart-desc">Description for screen readers</desc>
{/* Chart content */}
<text x="280" y="372" textAnchor="middle" fontSize="10" fill="var(--chart-muted, currentColor)"> Source: Source Name (Year) </text> </svg> ```
## JSX Attribute Conversion (Required for MDX)
| HTML | JSX | |------|-----| | `stroke-width` | `strokeWidth` | | `stroke-dasharray` | `strokeDasharray` | | `stroke-linecap` | `strokeLinecap` | | `text-anchor` | `textAnchor` | | `font-size` | `fontSize` | | `font-weight` | `fontWeight` | | `font-family` | `fontFamily` | | `class` | `className` | | `style="..."` | `style={{...}}` |
## Chart Type Construction
### Horizontal Bar Chart
Best for: percentage improvements, single-metric comparisons.
1. Define chart area: x=80, y=40, width=440, height=280 2. Calculate bar height: `chartHeight / dataCount - gap` (gap=8) 3. Calculate bar width: `(value / maxValue) * chartWidth` 4. Position bars: `y = chartY + index * (barHeight + gap)` 5. Label on left (right-aligned at x=75): category name 6. Value label at end of bar: percentage or number 7. Source text at bottom center
### Grouped Bar Chart
Best for: before/after, A vs B comparisons.
1. Define groups along Y axis, bars within each group 2. Use 2 colors (primary + secondary) for the two series 3. Add legend at top: colored square + label for each series 4. Gap between groups > gap within groups
### Donut Chart
Best for: parts of whole, market share.
1. Center: cx=280, cy=180, outer radius=140, inner radius=80 2. Calculate arc segments using cumulative angles 3. Each segment: `<path d="M... A... L... A... Z" fill="color" />` 4. Center text: total or key label 5. Legend below chart with color squares + labels + values
### Line Chart
Best for: trends over time.
1. X axis: time periods, evenly spaced 2. Y axis: value range with 4-5 grid lines 3. Draw grid lines: `stroke="currentColor" opacity="0.08"` 4. Plot data points: `<circle cx=... cy=... r="4" fill="color" />` 5. Connect with: `<polyline points="..." fill="none" stroke="color" strokeWidth="2" />` 6. Optional: area fill below line with `opacity="0.1"`
### Lollipop Chart
Best for: ranked factors, correlations.
1. Horizontal orientation (like bar chart but with circles) 2. Thin line from axis to data point: `stroke="currentColor" opacity="0.15" strokeWidth="1"` 3. Circle at data point: `r="6"` with fill color 4. Value label next to circle 5. Categories on Y axis (left-aligned)
### Area Chart
Best for: distribution, cumulative data.
1. Same as line chart but with filled area below 2. Area fill: `<path d="M... L... L... Z" fill="color" opacity="0.15" />` 3. Line on top: `stroke="color" strokeWidth="2" fill="none"` 4. Grid lines behind the area
### Radar Chart
Best for: multi-dimensional scoring (5-7 axes).
1. Center: cx=280, cy=190 2. Draw concentric polygons for grid (3-4 levels) 3. Calculate axis endpoints at equal angles 4. Plot data points on each axis proportional to value 5. Connect data points with filled polygon: `fill="color" opacity="0.2" stroke="color"` 6. Label each axis at the outer edge
## Label Rules
- Wrap long labels at word boundaries into `<tspan>` lines. - Truncate only when wrapping would collide with data marks, and keep the full label in `<desc>` or adjacent prose. - Use stable chart dimensions with a responsive `max-width: 100%; height: auto` style, or choose a justified wider viewBox for dense labels. - Check mobile widths so axis labels, legends, and value labels do not overlap.
## Output Format
Wrap every chart in a `<figure>` element:
**HTML:** ```html <figure> <svg viewBox="0 0 560 380" style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif" role="img" aria-labelledby="chart-title chart-desc"> <title id="chart-title">[Chart Title]</title> <desc id="chart-desc">[Full description with data points for screen readers]</desc> <!-- chart content --> <text x="280" y="372" text-anchor="middle" font-size="10" fill="var(--chart-muted, currentColor)"> Source: [Source Name] ([Year]) </text> </svg> <figcaption>Source: <a href="[Source URL]">[Source Name]</a>, [publication date].</figcaption> </figure> ```
**MDX:** ```mdx <figure className="chart-container" style={{margin: '2.5rem 0', textAlign: 'center', padding: '1.5rem', borderRadius: '12px'}}> <svg viewBox="0 0 560 380" style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}} role="img" aria-labelledby="chart-title chart-desc"> <title id="chart-title">[Chart Title]</title> <desc id="chart-desc">[Full description]</desc> {/* chart content with camelCase attributes */} <text x="280" y="372" textAnchor="middle" fontSize="10" fill="var(--chart-muted, currentColor)"> Source: [Source Name] ([Year]) </text> </svg> <figcaption>Source: <a href="[Source URL]">[Source Name]</a>, [publication date].</figcaption> </figure> ```
## Quality Checklist (Verify Before Returning)
- [ ] No hardcoded text colors except contrast-checked labels inside colored elements - [ ] No white/light backgrounds (transparent or none) - [ ] Source attribution text present at bottom and semantic `<figcaption>` present - [ ] `role="img"` and `aria-labelledby` present on `<svg>` - [ ] `<title id>` and `<desc id>` present inside `<svg>` - [ ] Chart type choice supports comprehension and comparability - [ ] If MDX: all attributes camelCased (no hyphens in attribute names) - [ ] Data values match the source data exactly - [ ] Color palette uses only approved colors - [ ] ViewBox is `0 0 560 380` (standard) or justified alternative - [ ] Labels, shapes, patterns, or line styles provide redundancy beyond color
Source provenance
Decision snapshot
2,016 GitHub stars
Audit
Install and adoption review
Agent-proven evidence
Outcome reports after resolve, review, install, and one narrow run.
No agent outcome data yet. The first agent run can report success, setup needs, risk blocks, failure, or not-relevant through /api/agent/outcome.
Install
Free and open source. Review the report before installing into production agents.
Growth loop
Scenario-led draft for blog-chart, ready for a manual X post.
blog-chart: Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports h... 2.0K stars https://www.openagentskill.com/skills/agricidaniel-blog-chart?ref=x
Listing + install path for blog-chart: https://www.openagentskill.com/skills/agricidaniel-blog-chart?ref=x Install: npx skills add AgriciDaniel/claude-blog --skill blog-chart
Listing source
This listing was indexed from public sources and is not marked official until a maintainer claim is approved.
Attribution links to the public repository or creator profile. Creators can claim the listing to update ownership signals.
Claim this skillOwner claim
This Registry indexed listing is attributed to AgriciDaniel but is not marked official yet. Claim it to add a verified owner signal and make future launch, install, and audit updates easier to trust.
Creator backlink kit
Show the canonical listing, current trust and audit signals, and real Agent-Proven evidence where developers evaluate the repository.
[](https://www.openagentskill.com/skills/agricidaniel-blog-chart?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/agricidaniel-blog-chart?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/agricidaniel-blog-chart/audit)
[](https://www.openagentskill.com/skills/agricidaniel-blog-chart?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)AgriciDaniel
@agricidaniel
Share whether this skill looks useful for your agent workflow. Aggregated feedback improves rankings over time.
Sandbox only
mono-color
Generate original one-ink or controlled two-ink editorial images from any theme, sentence, article idea, object, or reference photo. Always use this skill when the user asks for 单色海报、双色印刷、单色调视觉、蓝色/绿色孔版印刷、risograph、网点照片、复古或当代编辑排版、zine poster, monochrome editorial poster, duotone print, or asks to use the mono-color style. It uses an adaptive white, gray, or pale-beige substrate, no more than two printing inks, active negative space, terse human language, and strong serif/grotesk/mono typography without making retro styling the default or copying a source composition, wording, logo, or artwork. Produce both the final generation prompt and the generated raster image unless the user explicitly asks for prompt only.
1.9K StarsLast30days Skill
Research the last 30 days across Reddit, X, YouTube, Hacker News, Polymarket, GitHub, and the web, then synthesize a grounded brief for an AI agent.
61.0K StarsAcademic Research Skills
Academic Research Skills for Claude Code: research → write → review → revise → finalize
38.4K StarsGPT Researcher
Run autonomous deep research over web and local sources
28.0K StarsSandbox only
Install targets
Codex install prompt
Install the "blog-chart" agent skill from https://github.com/AgriciDaniel/claude-blog/tree/main/brain/.raw/sources/claude-blog-skill/skills/blog-chart. Read its SKILL.md or equivalent instructions first, install only the files needed for this workspace, and summarize any required setup before using it. Skill purpose: Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts with automatic platform detection (HTML vs JSX/MDX). Enforces chart type diversity, accessible markup (role=img, aria-labelledby), source attribution, and transparent backgrounds. Use whenever the user mentions data visualization, charts, graphs, comparison tables that need to be visualized, or wants to embed inline SVG visualizations in a blog post, even if not invoking blog-write. Use when user says "blog chart", "generate chart", "data visualization", "svg chart", "blog graph", "visualize data", or when the blog-write workflow identifies chart-worthy data points (3+ comparable metrics, trends, before/after data). After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {"event_id":"install_<unique-id>","skill_slug":"agricidaniel-blog-chart","task":"Install blog-chart","agent":"codex","outcome":"success","install_used":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes.Supply asset profile
Deep research, source comparison, literature review, RAG, knowledge search, and reports.
Scenario
Research agents
I need my agent to research a topic, compare sources, and produce a concise report.
Agent fit
Claude Code + OpenAI Agents + CLI
Codex, Claude Code, Cursor, CLI, or custom agents.
Install
Ready
npx skills add AgriciDaniel/claude-blog --skill blog-chart
Maintenance
fresh
8d since push
Risk
Needs review
Dependency or permission surface needs review
GitHub quality
2.0K
80/100 Quality · 78/100 Trust
Coverage tags
Review notes
Dependency or permission surface needs review · Permission surface may require sandboxing
Agent adoption scorecard
These scores combine public repository metadata, OpenAgentSkill review signals, maintenance freshness, and install readiness. They are a shortlist signal, not a replacement for human review.
Quality
StrongSolid option that is likely worth shortlisting for production workflows.
Trust
Sandbox onlyUseful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
Audit
Needs reviewA machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
OpenAgentSkill Trust Score v5
Run only in a sandbox and compare close alternatives before using it for real work.
Stars
2.0K GitHub stars
Repo activity
2.0K stars, 333 forks
Maintenance
8d since push
License
MIT
Install
npx skills add AgriciDaniel/claude-blog --skill blog-chart
Install safety
Agent-readable metadata
Use this block or the embedded JSON to decide whether an agent should install this skill, choose an alternative, or ask for human review first.
Suited tasks
Suited agents
Install decision
Trust and risk
Outcome loop
Install command
npx skills add AgriciDaniel/claude-blog --skill blog-chartDo not use when
Alternative
1.9K Stars
npx skills add yanliudesign/mono-color-skill --skill mono-color
Alternative
61.0K Stars
npx skills add mvanhorn/last30days-skill -g
Alternative
38.4K Stars
npx skills add Imbad0202/academic-research-skills
Alternative
28.0K Stars
npx skills add assafelovic/gpt-researcher
Agent safety v2
Sparse or mixed signals. Useful for discovery, but not for autonomous installation.
Test manually in an isolated workspace and compare against safer alternatives.
high
Skill metadata references terminal, CLI, shell, subprocess, or command execution workflows.
medium
Skill likely fetches remote pages, APIs, repositories, or external services.
high
Skill metadata references credentials, tokens, environment variables, or secret-bearing workflows.
Agent resolve plan
The Resolve API returns the selected skill, alternatives, safety policy, audit notes, install target, and copy-paste prompt an agent can follow without scraping this page.
Open JSON
/api/agent/resolve?task=Use%20blog-chart%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Resolve text
/api/agent/resolve?task=Use%20blog-chart%20for%20an%20agent%20workflow&agent=codex&max_risk=medium&format=text
Install handoff
/api/skills/agricidaniel-blog-chart/install
Agent should check
Copy prompt
Task: Use blog-chart in this workspace.
Resolve first: https://www.openagentskill.com/api/agent/resolve?task=Use%20blog-chart%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Review install handoff: https://www.openagentskill.com/api/skills/agricidaniel-blog-chart/install
Install command: npx skills add AgriciDaniel/claude-blog --skill blog-chart
Before running it, summarize audit warnings, required permissions, and the fallback skill if install is risky.Agent handoff
Use the public install endpoint to fetch the command, safety checklist, target prompts, and canonical links for this skill.
Install handoff
/api/skills/agricidaniel-blog-chart/install
LLM text format
/api/skills/agricidaniel-blog-chart/install?format=text
Find alternatives
/api/skills/search?q=blog-chart&limit=3
Agent prompt
Use blog-chart for this task. Review https://www.openagentskill.com/api/skills/agricidaniel-blog-chart/install, then install with: npx skills add AgriciDaniel/claude-blog --skill blog-chartRegistry metadata
This page exposes the same decision, trust, audit, use-case, and install signals through the Registry API, so agents can rank this skill without scraping the UI.
Manifest
/api/registry/manifest/agricidaniel-blog-chart
LLM text
/api/registry/manifest/agricidaniel-blog-chart?format=text
Install alias
/api/registry/install/agricidaniel-blog-chart
Recommend
/api/registry/recommend?task=Use%20blog-chart%20in%20an%20agent%20workflow&limit=3
Agent fit
Research agents
Use-case tags
Platforms
Claude Code, OpenAI Agents
Audit report
A machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
Agent decision cockpit
Use this as a leading candidate, then validate the README and install path in your own agent stack.
Role in stack
Primary pick
Primary fit
Research agents
Trust label
Production-ready
Install path
Command ready
Use when
Evidence
review first
Implementation path
Trust profile
Useful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
GitHub adoption
PASS2.0K GitHub stars
Stars/forks activity
PASS2.0K stars, 333 forks; issue activity unavailable in current metadata
Recent maintenance
PASS8d since push
License clarity
PASSMIT
Good signals
Review before install
Recommended action
Run only in a sandbox and compare close alternatives before using it for real work.
Quality profile
Solid option that is likely worth shortlisting for production workflows.
Workflow fit
Investigate faster
I need my agent to research a topic, compare sources, and produce a concise report.
Analyze datasets
I need my agent to analyze CSV data, produce insights, and explain trends.
Search private knowledge
I need my agent to build a RAG workflow over documents and retrieve reliable context.
Workflow fit
Find, compare, and synthesize
A workflow for agents that gather sources, compare claims, summarize long material, and draft useful research briefs.
Turn skills into distribution
A workflow for turning newly indexed skills into SEO briefs, social drafts, comparison pages, and reusable publishing workflows.
Operate and verify web apps
A workflow for agents that navigate products, fill forms, take screenshots, and verify real user flows across web applications.
Alternative shortlist
Similar skills that may fit this task.
Generate original one-ink or controlled two-ink editorial images from any theme, sentence, article idea, object, or reference photo. Always use this skill when the user asks for 单色海报、双色印刷、单色调视觉、蓝色/绿色孔版印刷、risograph、网点照片、复古或当代编辑排版、zine poster, monochrome editorial poster, duotone print, or asks to use the mono-color style. It uses an adaptive white, gray, or pale-beige substrate, no more than two printing inks, active negative space, terse human language, and strong serif/grotesk/mono typography without making retro styling the default or copying a source composition, wording, logo, or artwork. Produce both the final generation prompt and the generated raster image unless the user explicitly asks for prompt only.
Research the last 30 days across Reddit, X, YouTube, Hacker News, Polymarket, GitHub, and the web, then synthesize a grounded brief for an AI agent.
Academic Research Skills for Claude Code: research → write → review → revise → finalize
Run autonomous deep research over web and local sources
--- name: blog-chart description: > Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts with automatic platform detection (HTML vs JSX/MDX). Enforces chart type diversity, accessible markup (role=img, aria-labelledby), source attribution, and transparent backgrounds. Use whenever the user mentions data visualization, charts, graphs, comparison tables that need to be visualized, or wants to embed inline SVG visualizations in a blog post, even if not invoking blog-write. Use when user says "blog chart", "generate chart", "data visualization", "svg chart", "blog graph", "visualize data", or when the blog-write workflow identifies chart-worthy data points (3+ comparable metrics, trends, before/after data). user-invokable: false license: MIT ---
# Blog Chart: Built-In SVG Data Visualization
Generates dark-mode-compatible inline SVG charts for blog posts. Invoked internally by `blog-write` and `blog-rewrite` when chart-worthy data is identified. Not a standalone user-facing command.
**Styling source of truth:** `skills/blog/references/visual-media.md`
For supported chart types, prefer the deterministic CLI:
```bash python3 skills/blog-chart/scripts/generate_chart_svg.py --input chart.json --output chart.html --json ```
## Input Format
The writer or researcher passes a chart request:
``` Chart Request: - Type: horizontal bar - Title: "AI Citation Sources by Platform" - Data: ChatGPT 43.8%, Perplexity 6.6%, Google AI Overviews 2.2%, Reddit 7.15% - Source: [Verified source], [publication date] - Platform: mdx (or html) ```
## Chart Type Selection
Select based on the data pattern. Prefer chart type diversity, but repeat a type when comparability or reader comprehension clearly benefits.
| Data Pattern | Best Chart Type | |-------------|-----------------| | Before/after comparison | Grouped bar chart | | Ranked factors / correlations | Lollipop chart | | Parts of whole / market share | Donut chart | | Trend over time | Line chart | | Percentage improvement | Horizontal bar chart | | Distribution / range | Area chart | | Multi-dimensional scoring | Radar chart |
## Styling Rules (Non-Negotiable)
All charts must work on both dark and light backgrounds:
``` Text elements: fill="currentColor" Grid lines: stroke="currentColor" opacity="0.08" Axis lines: stroke="currentColor" opacity="0.3" Background: transparent (no fill on root SVG) Subtitle text: fill="var(--chart-muted, currentColor)" Source text: fill="var(--chart-muted, currentColor)" Label text: fill="currentColor" opacity="0.8" ```
Set `--chart-muted` to an accessible text token in the host theme. If no token exists, use `#4b5563` on light backgrounds and `#d1d5db` on dark backgrounds. Do not rely on low-opacity source or subtitle text for visible attribution.
### Color Palette
| Color | Hex | Use Case | |-------|-----|----------| | Orange | `#f97316` | Primary / highest value | | Sky Blue | `#38bdf8` | Secondary / comparison | | Purple | `#a78bfa` | Tertiary / special category | | Green | `#22c55e` | Quaternary / positive indicator |
For text inside approved colored elements: use `fill="#111827"` with `fontWeight="800"`. Only use white text after checking the contrast ratio is at least 4.5:1 against that specific fill color.
Do not rely on color alone. Add direct labels, patterns, line dashes, marker shapes, or legend text so colorblind readers can distinguish series.
## Standard SVG Shell (HTML)
```xml <svg viewBox="0 0 560 380" style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif" role="img" aria-labelledby="chart-title chart-desc" > <title id="chart-title">Chart Title</title> <desc id="chart-desc">Description for screen readers with all key data points and source</desc>
<!-- Chart content -->
<text x="280" y="372" text-anchor="middle" font-size="10" fill="var(--chart-muted, currentColor)"> Source: Source Name (Year) </text> </svg> ```
## JSX/MDX Shell (camelCase attributes)
```jsx <svg viewBox="0 0 560 380" style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}} role="img" aria-labelledby="chart-title chart-desc" > <title id="chart-title">Chart Title</title> <desc id="chart-desc">Description for screen readers</desc>
{/* Chart content */}
<text x="280" y="372" textAnchor="middle" fontSize="10" fill="var(--chart-muted, currentColor)"> Source: Source Name (Year) </text> </svg> ```
## JSX Attribute Conversion (Required for MDX)
| HTML | JSX | |------|-----| | `stroke-width` | `strokeWidth` | | `stroke-dasharray` | `strokeDasharray` | | `stroke-linecap` | `strokeLinecap` | | `text-anchor` | `textAnchor` | | `font-size` | `fontSize` | | `font-weight` | `fontWeight` | | `font-family` | `fontFamily` | | `class` | `className` | | `style="..."` | `style={{...}}` |
## Chart Type Construction
### Horizontal Bar Chart
Best for: percentage improvements, single-metric comparisons.
1. Define chart area: x=80, y=40, width=440, height=280 2. Calculate bar height: `chartHeight / dataCount - gap` (gap=8) 3. Calculate bar width: `(value / maxValue) * chartWidth` 4. Position bars: `y = chartY + index * (barHeight + gap)` 5. Label on left (right-aligned at x=75): category name 6. Value label at end of bar: percentage or number 7. Source text at bottom center
### Grouped Bar Chart
Best for: before/after, A vs B comparisons.
1. Define groups along Y axis, bars within each group 2. Use 2 colors (primary + secondary) for the two series 3. Add legend at top: colored square + label for each series 4. Gap between groups > gap within groups
### Donut Chart
Best for: parts of whole, market share.
1. Center: cx=280, cy=180, outer radius=140, inner radius=80 2. Calculate arc segments using cumulative angles 3. Each segment: `<path d="M... A... L... A... Z" fill="color" />` 4. Center text: total or key label 5. Legend below chart with color squares + labels + values
### Line Chart
Best for: trends over time.
1. X axis: time periods, evenly spaced 2. Y axis: value range with 4-5 grid lines 3. Draw grid lines: `stroke="currentColor" opacity="0.08"` 4. Plot data points: `<circle cx=... cy=... r="4" fill="color" />` 5. Connect with: `<polyline points="..." fill="none" stroke="color" strokeWidth="2" />` 6. Optional: area fill below line with `opacity="0.1"`
### Lollipop Chart
Best for: ranked factors, correlations.
1. Horizontal orientation (like bar chart but with circles) 2. Thin line from axis to data point: `stroke="currentColor" opacity="0.15" strokeWidth="1"` 3. Circle at data point: `r="6"` with fill color 4. Value label next to circle 5. Categories on Y axis (left-aligned)
### Area Chart
Best for: distribution, cumulative data.
1. Same as line chart but with filled area below 2. Area fill: `<path d="M... L... L... Z" fill="color" opacity="0.15" />` 3. Line on top: `stroke="color" strokeWidth="2" fill="none"` 4. Grid lines behind the area
### Radar Chart
Best for: multi-dimensional scoring (5-7 axes).
1. Center: cx=280, cy=190 2. Draw concentric polygons for grid (3-4 levels) 3. Calculate axis endpoints at equal angles 4. Plot data points on each axis proportional to value 5. Connect data points with filled polygon: `fill="color" opacity="0.2" stroke="color"` 6. Label each axis at the outer edge
## Label Rules
- Wrap long labels at word boundaries into `<tspan>` lines. - Truncate only when wrapping would collide with data marks, and keep the full label in `<desc>` or adjacent prose. - Use stable chart dimensions with a responsive `max-width: 100%; height: auto` style, or choose a justified wider viewBox for dense labels. - Check mobile widths so axis labels, legends, and value labels do not overlap.
## Output Format
Wrap every chart in a `<figure>` element:
**HTML:** ```html <figure> <svg viewBox="0 0 560 380" style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif" role="img" aria-labelledby="chart-title chart-desc"> <title id="chart-title">[Chart Title]</title> <desc id="chart-desc">[Full description with data points for screen readers]</desc> <!-- chart content --> <text x="280" y="372" text-anchor="middle" font-size="10" fill="var(--chart-muted, currentColor)"> Source: [Source Name] ([Year]) </text> </svg> <figcaption>Source: <a href="[Source URL]">[Source Name]</a>, [publication date].</figcaption> </figure> ```
**MDX:** ```mdx <figure className="chart-container" style={{margin: '2.5rem 0', textAlign: 'center', padding: '1.5rem', borderRadius: '12px'}}> <svg viewBox="0 0 560 380" style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}} role="img" aria-labelledby="chart-title chart-desc"> <title id="chart-title">[Chart Title]</title> <desc id="chart-desc">[Full description]</desc> {/* chart content with camelCase attributes */} <text x="280" y="372" textAnchor="middle" fontSize="10" fill="var(--chart-muted, currentColor)"> Source: [Source Name] ([Year]) </text> </svg> <figcaption>Source: <a href="[Source URL]">[Source Name]</a>, [publication date].</figcaption> </figure> ```
## Quality Checklist (Verify Before Returning)
- [ ] No hardcoded text colors except contrast-checked labels inside colored elements - [ ] No white/light backgrounds (transparent or none) - [ ] Source attribution text present at bottom and semantic `<figcaption>` present - [ ] `role="img"` and `aria-labelledby` present on `<svg>` - [ ] `<title id>` and `<desc id>` present inside `<svg>` - [ ] Chart type choice supports comprehension and comparability - [ ] If MDX: all attributes camelCased (no hyphens in attribute names) - [ ] Data values match the source data exactly - [ ] Color palette uses only approved colors - [ ] ViewBox is `0 0 560 380` (standard) or justified alternative - [ ] Labels, shapes, patterns, or line styles provide redundancy beyond color
Source provenance
Decision snapshot
2,016 GitHub stars
Audit
Install and adoption review
Agent-proven evidence
Outcome reports after resolve, review, install, and one narrow run.
No agent outcome data yet. The first agent run can report success, setup needs, risk blocks, failure, or not-relevant through /api/agent/outcome.
Install
Free and open source. Review the report before installing into production agents.
Growth loop
Scenario-led draft for blog-chart, ready for a manual X post.
blog-chart: Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports h... 2.0K stars https://www.openagentskill.com/skills/agricidaniel-blog-chart?ref=x
Listing + install path for blog-chart: https://www.openagentskill.com/skills/agricidaniel-blog-chart?ref=x Install: npx skills add AgriciDaniel/claude-blog --skill blog-chart
Listing source
This listing was indexed from public sources and is not marked official until a maintainer claim is approved.
Attribution links to the public repository or creator profile. Creators can claim the listing to update ownership signals.
Claim this skillOwner claim
This Registry indexed listing is attributed to AgriciDaniel but is not marked official yet. Claim it to add a verified owner signal and make future launch, install, and audit updates easier to trust.
Creator backlink kit
Show the canonical listing, current trust and audit signals, and real Agent-Proven evidence where developers evaluate the repository.
[](https://www.openagentskill.com/skills/agricidaniel-blog-chart?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/agricidaniel-blog-chart?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/agricidaniel-blog-chart/audit)
[](https://www.openagentskill.com/skills/agricidaniel-blog-chart?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)AgriciDaniel
@agricidaniel
Share whether this skill looks useful for your agent workflow. Aggregated feedback improves rankings over time.
Sandbox only
mono-color
Generate original one-ink or controlled two-ink editorial images from any theme, sentence, article idea, object, or reference photo. Always use this skill when the user asks for 单色海报、双色印刷、单色调视觉、蓝色/绿色孔版印刷、risograph、网点照片、复古或当代编辑排版、zine poster, monochrome editorial poster, duotone print, or asks to use the mono-color style. It uses an adaptive white, gray, or pale-beige substrate, no more than two printing inks, active negative space, terse human language, and strong serif/grotesk/mono typography without making retro styling the default or copying a source composition, wording, logo, or artwork. Produce both the final generation prompt and the generated raster image unless the user explicitly asks for prompt only.
1.9K StarsLast30days Skill
Research the last 30 days across Reddit, X, YouTube, Hacker News, Polymarket, GitHub, and the web, then synthesize a grounded brief for an AI agent.
61.0K StarsAcademic Research Skills
Academic Research Skills for Claude Code: research → write → review → revise → finalize
38.4K StarsGPT Researcher
Run autonomous deep research over web and local sources
28.0K StarsPermission surface
secrets or environment access, shell or command execution
Agent outcomes
No agent outcome data yet
Docs
Usable metadata, review docs
Risk summary
Install readiness
Permission surface
secrets or environment access, shell or command execution
Agent outcomes
No agent outcome data yet
Docs
Usable metadata, review docs
Risk summary
Install readiness
Permission surface
secrets or environment access, shell or command execution
Agent outcomes
No agent outcome data yet
Docs
Usable metadata, review docs
Risk summary
Install readiness
Permission surface
secrets or environment access, shell or command execution
Agent outcomes
No agent outcome data yet
Docs
Usable metadata, review docs
Risk summary
Install readiness