New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Space Chart HTML Plus

by SpaceZephyr in SpaceZephyr/design-buddy

AI 全能图表生成器（扩展版）。一键生成 35+ 种设计美观的图表 HTML 文件，涵盖技术架构、流程逻辑、业务战略、数据可视化、信息展示 5 大类别。支持 3 种内置视觉风格（黑白简约、深色暗调、Claude 暖色）+ 品牌风格扩展。

No licenceAuto-check passedBusiness, Finance & HR

Install Space Chart HTML Plus

skills CLI
$ npx skills add SpaceZephyr/design-buddy --skill space-chart-html-plus -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install SpaceZephyr/design-buddy space-chart-html-plus --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/SpaceZephyr/design-buddy.git skills-src && mkdir -p .claude/skills && cp -r skills-src/space-chart-html-plus .claude/skills/space-chart-html-plus && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
space-chart-html-plus
GitHub stars
174
Token cost
~1.6k tokens
SKILL.md length
549 words
Files
7 (incl. references)
Skills in repo
16
Repo updated
First seen
Licence
None found

At a glance

AI 全能图表生成器（扩展版）。一键生成 35+ 种设计美观的图表 HTML 文件，涵盖技术架构、流程逻辑、业务战略、数据可视化、信息展示 5 大类别。支持 3 种内置视觉风格（黑白简约、深色暗调、Claude 暖色）+ 品牌风格扩展。

  • Works in 5 steps: ：识别图表类型 → ：读取对应类别模板 → ：收集内容 → …
  • Tasks that involve OKRs and executive reporting
  • SKILL.md covers 你的角色, 图表类型注册表（5 大类 / 35 种）, 视觉风格系统 and 工作流程, plus 4 more sections
  • Calls npx

What it does

Space Chart HTML Plus is an agent skill from SpaceZephyr/design-buddy. AI 全能图表生成器（扩展版）。一键生成 35+ 种设计美观的图表 HTML 文件，涵盖技术架构、流程逻辑、业务战略、数据可视化、信息展示 5 大类别。支持 3 种内置视觉风格（黑白简约、深色暗调、Claude 暖色）+ 品牌风格扩展。 触发词："画个 XX 图"、"生成 XX 图"、"做个架构图/流程图/思维导图/时序图/甘特图/漏斗图/桑基图/用户旅程/商业模式画布/SWOT/竞品分析/产品路线图/组织架构/ER 图/C4 图/BPMN/状态机/决策树/泳道图/部署图/网络拓扑/威胁建模/价值链/OKR 树/韦恩图/热力图/KPI 看板/信息图/概念图"、"帮我可视化"、"XX 风格的图表"、"换成 XX 风格"。 当用户提供了一段描述并要求可视化、画图、生成图表时使用。当用户要求切换图表风格时也触发。

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including reference files (for example `references/style-presets.md`, `references/templates-business.md` and `references/templates-data.md`).

It sits in Business, Finance & HR, covering OKRs and executive reporting and Startup and business strategy. The repository describes itself as: Design Buddy: visual production Agent Skills for brand design systems, GPT-image-2 images, diagrams, infographics, logos, slide decks, WeChat layouts and social images.

When your agent uses it

  • Tasks that involve OKRs and executive reporting
  • Tasks that involve Startup and business strategy

Example prompts

  • “画个 XX 图”
  • “生成 XX 图”
  • “XX 风格的图表”
  • “/space-chart-html-plus”

Requirements

  • Node.js

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. ：识别图表类型
  2. ：读取对应类别模板
  3. ：收集内容
  4. ：选择风格
  5. ：生成 HTML

What it can do on your machine

Read from SKILL.md and the folder at commit f1d835f. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Space Chart HTML Plus loads about 1.6k tokens when it runs, and up to ~9.1k if it reads all its reference files. Until then it costs about 95 tokens; SKILL.md has 549 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~95
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~9.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Without a licence we can't republish the file, so here is its outline and opening line. It has 549 words (~1,619 tokens).

name
space-chart-html-plus

Read the full SKILL.md on GitHub

Files

SKILL.md and 6 other files (references) in space-chart-html-plus of SpaceZephyr/design-buddy.

  • SKILL.md
  • references/style-presets.md
  • references/templates-business.md
  • references/templates-data.md
  • references/templates-process.md
  • references/templates-tech.md
  • references/templates-visual.md

Open the folder on GitHubat commit f1d835f

Compare with similar skills

Space Chart HTML Plus next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Space Chart HTML Plus compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Space Chart HTML Plus this skillSpaceZephyr/design-buddy174—~1.6kAutomated safety check: PassNone
Product Strategistdavila7/claude-code-templates32k3 repos~248Automated safety check: PassMIT
Strategy Documentjezweb/claude-skills1.1k—~3kAutomated safety check: PassMIT
Startup Metricsguia-matthieu/clawfu-skills150—~5kAutomated safety check: PassMIT
Partnerships EcosystemLeoYeAI/openclaw-master-skills2.2k—~5kAutomated safety check: PassMIT
Strategic Planningw95/awesome-claude-corporate-skills235—~2.2kAutomated safety check: PassMIT

Similar skills

  • Product Strategist

    davila7/claude-code-templates

    Strategic product leadership toolkit for Head of Product including OKR cascade generation, market analysis, vision setting, and team scaling.

    32k GitHub starsUsed in 3 repos~248 tokens
    Business, Finance & HRAuto-check passed

  • Strategy Document

    jezweb/claude-skills

    Write structured strategic documents for small and medium businesses: SWOT analyses, lean business plans, OKRs, competitive analyses.

    1.1k GitHub stars~3k tokensUpdated 2 days ago
    Business, Finance & HRAuto-check passed

  • Startup Metrics

    guia-matthieu/clawfu-skills

    Know the metrics that matter at each stage and what investors actually look for.

    150 GitHub stars~5k tokensUpdated 6 days ago
    Business, Finance & HRAuto-check passed

  • Partnerships Ecosystem

    LeoYeAI/openclaw-master-skills

    World-Class Partnerships & Ecosystem Playbook. An agent skill from LeoYeAI/openclaw-master-skills.

    2.2k GitHub stars~5k tokensUpdated 2 mo ago
    Business, Finance & HRAuto-check passed

  • Strategic Planning

    w95/awesome-claude-corporate-skills

    ACTIVATE when developing long-term strategy, setting OKRs, creating vision statements, building SWOT analyses, designing strategic frameworks, defining company direction, planning multi-year…

    235 GitHub stars~2.2k tokensUpdated 7 mo ago
    Business, Finance & HRAuto-check passed

  • Strategy Framework

    revfactory/harness-100

    A full pipeline that systematizes an organization's strategy framework through OKR design, BSC mapping, SWOT analysis, vision & mission statement, and strategy execution roadmap.

    1.3k GitHub stars~2k tokensUpdated 6 mo ago
    Business, Finance & HRAuto-check passed

More from SpaceZephyr/design-buddy

All 16 skills in this repo

  • Slide Deck Image Generator

    SpaceZephyr/design-buddy

    Turns written content into designed slide images from an outline, merges them into PPTX or PDF, and can borrow styles from a registry of brand design systems.

    174 GitHub stars~6.5k tokensUpdated 3 mo ago
    Auto-check passed

  • WeChat Article Layout

    SpaceZephyr/design-buddy

    Turns an article into WeChat Official Account HTML with a local preview, a choice of three visual styles and a button that copies the rich HTML.

    174 GitHub stars~1.2k tokensUpdated 3 mo ago
    Auto-check passed

  • Article Illustration Batch Generator

    SpaceZephyr/design-buddy

    Splits a Markdown article by heading, drafts an image prompt for each section, then generates diagrams with the Gemini API and embeds them in the note.

    174 GitHub stars~1k tokensUpdated 3 mo ago
    Auto-check passed

  • AI Chart Image Generator

    SpaceZephyr/design-buddy

    Generates a finished chart image directly with GPT-image-2 from a text description, across ten chart types such as flowcharts, architecture diagrams and SWOT grids in six visual styles.

    174 GitHub stars~1.6k tokensUpdated 3 mo ago
    Auto-check passed

  • Batch Image Skill Builder

    SpaceZephyr/design-buddy

    Walks a non-coder through structured questions about scene, style, color, text rules and consistency, then auto-generates a complete, ready-to-use batch image-generation skill.

    174 GitHub stars~1.3k tokensUpdated 3 mo ago
    Auto-check passed

  • Space Image Studio

    SpaceZephyr/design-buddy

    Generates PNG images for four common needs: Xiaohongshu covers, slide illustrations, charts and article logic diagrams, with twelve visual styles and automatic style suggestions.

    174 GitHub stars~2k tokensUpdated 3 mo ago
    Auto-check passed

Categories

Questions about Space Chart HTML Plus

What does Space Chart HTML Plus do?

AI 全能图表生成器（扩展版）。一键生成 35+ 种设计美观的图表 HTML 文件，涵盖技术架构、流程逻辑、业务战略、数据可视化、信息展示 5 大类别。支持 3 种内置视觉风格（黑白简约、深色暗调、Claude 暖色）+ 品牌风格扩展。. Space Chart HTML Plus is an agent skill from SpaceZephyr/design-buddy.

When should I use Space Chart HTML Plus?

Space Chart HTML Plus fits situations like: tasks that involve OKRs and executive reporting; tasks that involve Startup and business strategy.

How do I install Space Chart HTML Plus in Claude Code?

Run `npx skills add SpaceZephyr/design-buddy --skill space-chart-html-plus -a claude-code`. Or copy the skill folder (space-chart-html-plus in SpaceZephyr/design-buddy) into .claude/skills/space-chart-html-plus in your project. Claude Code loads it when a task matches its description.

How do I install Space Chart HTML Plus in Codex?

Run `npx skills add SpaceZephyr/design-buddy --skill space-chart-html-plus -a codex`. Or copy the skill folder (space-chart-html-plus in SpaceZephyr/design-buddy) into .agents/skills/space-chart-html-plus in your project. Codex loads it when a task matches its description.

Can I use Space Chart HTML Plus in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add SpaceZephyr/design-buddy --skill space-chart-html-plus -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/space-chart-html-plus, .gemini/skills/space-chart-html-plus, .github/skills/space-chart-html-plus and .opencode/skills/space-chart-html-plus in your project.

What does Space Chart HTML Plus need to run?

Going by SKILL.md and its folder, Space Chart HTML Plus needs the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does Space Chart HTML Plus access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Space Chart HTML Plus safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Space Chart HTML Plus use?

No licence was found for Space Chart HTML Plus or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.

How many tokens does Space Chart HTML Plus use?

About 1.6k tokens (SKILL.md is roughly 6.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 7.5k tokens, read only when the agent opens those files.

What are the alternatives to Space Chart HTML Plus?

Skills that share tags, products or a category with Space Chart HTML Plus: Product Strategist (davila7/claude-code-templates, 32k stars), Strategy Document (jezweb/claude-skills, 1.1k stars), Startup Metrics (guia-matthieu/clawfu-skills, 150 stars) and Partnerships Ecosystem (LeoYeAI/openclaw-master-skills, 2.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Space Chart HTML Plus?

SpaceZephyr (a GitHub user) maintains it in SpaceZephyr/design-buddy, which has 174 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on July 6, 2026.

Source: SpaceZephyr/design-buddy on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.