Claude Code Skills·Claude Skills·The open SKILL.md registry for Claude
ClaudSkills / General / education-learning

HTML Line Svg

Category: General  ·  Sub-category: education-learning  ·  Last updated:
将文字、截图、手绘或“小黑”插图、已有 HTML 关系图提炼为有教学语义的极简框线图；关系密集型图可先用 Mermaid 编写可执行的关系结构规格，再实现为可访问、响应式的内联 SVG，并同步输出可复用的线框图生成提示词。用于 HTML Presentation、课程页和网页卡片中的对比图、架构图、流程图、界面或接口图、Agent 协作图与状态关系图；当用户要求“语义框线图”“线框插图”“把插图改成 SVG”“生成线框图提示词”“在卡片里画 GUI/LUI、Agent、任务或系统关系”，或要求沿用 course-design 的 STYLE_DNA 设计教学插图时使用。不用于照片、装饰海报、复杂数据图表、情绪型手绘插画或直接编辑二进制 PPTX。
Security AStatic scan found no risk patternsHow grading works ›

From the source SKILL.md

把原内容中的对象、关系、状态与阅读顺序，重新编码为克制的技术文档式框线图。先保证图能准确复述教学判断，再处理构图与 SVG 细节；不要把原插图机械描摹成矢量轮廓。每次交付同时生成一份自包含的线框图提示词，使同一语义设计能够被复用、复核和继续迭代。

What this skill does

HTML Line Svg is a community-contributed Claude Code skill in the education-learning sub-category. It ships as a SKILL.md file that Claude Code auto-discovers under ~/.claude/skills/html-line-svg/ and loads when your prompt matches the skill's trigger.

Who uses this skill

The HTML Line Svg Claude Code skill is built for Claude Code users and developers across all disciplines looking for general-purpose AI assistance. It's part of ClaudSkills (also referred to as Claude Skills or Claude Code Skills) — the open community-curated registry of 188,000+ SKILL.md files for Anthropic's Claude Code agent and the wider Claude ecosystem (Claude API, Claude Agent SDK).

How to install

Free

Manual install (2 steps)

mkdir -p ~/.claude/skills/html-line-svg
curl -L https://claudskills.com/skills/html-line-svg/SKILL.md \
  -o ~/.claude/skills/html-line-svg/SKILL.md

Or just download SKILL.md directly and drop it into ~/.claude/skills/html-line-svg/. Claude Code auto-discovers it on next session.

Skills live at ~/.claude/skills/html-line-svg/SKILL.md on macOS/Linux, or %USERPROFILE%\.claude\skills\html-line-svg\SKILL.md on Windows. See the full install guide for step-by-step instructions.

Telegram

📱 Install from your phone or desktop Telegram

Open @claudskills_bot on Telegram, tap Open Desktop App, and the desktop app installs this skill for you. Or share the bot link with a colleague — they get the same one-tap install. Learn more →

Pro

One-click install via the desktop app

The ClaudSkills desktop app installs any skill directly into ~/.claude/skills/ with one click — no terminal required. Pro starts at $9/mo or $149 lifetime.

Pro

For the full experience including quality scoring and one-click install features for each skill — upgrade to Pro.

See pricing → Download desktop app

Frequently asked questions

How do I install the HTML Line Svg Claude Code skill?
Install via the ClaudSkills desktop app (one click) or copy SKILL.md from the source repository to ~/.claude/skills/html-line-svg/SKILL.md and restart Claude Code. Both flows are detailed at claudskills.com/install/.
What does the HTML Line Svg skill do?
将文字、截图、手绘或“小黑”插图、已有 HTML 关系图提炼为有教学语义的极简框线图；关系密集型图可先用 Mermaid 编写可执行的关系结构规格，再实现为可访问、响应式的内联 SVG，并同步输出可复用的线框图生成提示词。用于 HTML Presentation、课程页和网页卡片中的对比图、架构图、流程图、界面或接口图、Agent 协作图与状态关系图；当用户要求“语义框线图”“线框插图”“把插图改成 SVG”“生成线框图提示词”“在卡片里画 GUI/LUI、Agent、任务或系统关系”，或要求沿用 course-design 的 STYLE_DNA 设计教学插图时使用。不用于照片、装饰海报、复杂数据图表、情绪型手绘插画或直接编辑二进制 PPTX。
Is this skill free to install?
Yes. ClaudSkills is an open registry — every skill keeps its source repository's license, and manual install via copy is free. ClaudSkills Pro ($9/mo, $79/yr, or $149 one-time) adds one-click install via the desktop app and a multi-signal Quality Score.
When should I use the HTML Line Svg skill?
Use HTML Line Svg when your Claude Code task falls under the General category — specifically in the education learning area. Claude Code auto-discovers installed skills and invokes the right one based on the task description, so you can also ask Claude directly (e.g. "use HTML Line Svg" or describe the task and let Claude pick). Browse related skills at /category/general/.
What is a Claude Code skill and how does the HTML Line Svg skill fit in?
A Claude Code skill is a SKILL.md file that lives under ~/.claude/skills/<name>/ and tells the Claude Code CLI agent how to perform a specific task (instructions, prompts, allowed tools). Skills are auto-discovered at session start. HTML Line Svg is one of 67,000+ skills indexed in the open ClaudSkills catalog, classified under the General category. Learn more at /learn/what-is-a-claude-skill/.

Attribution & license

Cite this skill

If you reference this skill in a blog post, paper, or documentation, you can cite it as:

APA
simbajigege. (2026). HTML Line Svg [Claude Code skill]. ClaudSkills. https://claudskills.com/skills/html-line-svg/
BibTeX
@misc{html-line-svg-2026,
  author    = {simbajigege},
  title     = {HTML Line Svg [Claude Code skill]},
  year      = {2026},
  publisher = {ClaudSkills},
  url       = {https://claudskills.com/skills/html-line-svg/}
}

Embed this skill

Promote, attribute, or link this skill from your own README, blog post, or documentation. All three snippets are free to use — no sign-up, no API key. More distribution surfaces →

Badge
[![ClaudSkills](https://claudskills.com/badge/html-line-svg.svg)](https://claudskills.com/skills/html-line-svg/?utm_source=badge&utm_medium=readme&utm_campaign=skill_badge)
<script>
<script src="https://claudskills.com/embed/html-line-svg.js" async></script>
<iframe>
<iframe src="https://claudskills.com/embed/html-line-svg.html" width="100%" height="160" frameborder="0" loading="lazy" title="ClaudSkills: HTML Line Svg"></iframe>

Security scan

Grade A · scanned 2026-08-20 — free static scan against the OWASP Agentic Skills Top 10.

No risk patterns were found in any of the ten OWASP-aligned categories. How grading works ›

Show this grade on your repo (click to copy):

[![Security: A](https://img.shields.io/badge/Security-A-2e7d32)](https://claudskills.com/skills/html-line-svg/#security)

Free. No spam. Unsubscribe in one click.

More General skills

Browse all General skills in the ClaudSkills registry, or explore these other picks from the same category:

Browse all General skills → Top 100 skills
Part of ClaudSkills — the open registry for Claude Skills & Claude Code Skills.  ·  What's New  ·  Install guide  ·  About  ·  llms.txt

Part of Acreator Store — Adam Lankamer's AI tools: PerfectStudio · Ucaption · UTagger · AutoXPoster · TestYourSkills · AutomationFlows · Au Naturel · Telegram @acreatorstore

Categories

Use cases

Popular tags

Learn

Site