HTML 语义框线 SVG

HTML 语义框线 SVG is a Frontend skill for Claude Code, published by simbajigege in book2skills.

161 stars30 forkson simbajigege/book2skillsAdded 2026/09/08+4% in starsRepository updated 2026/08/26

agent-skillsagentskillsanthropicanthropic-claudebook2skillsgrowth-investinginvestinginvesting-skillsskillsstock-analysis

Install in seconds

Install HTML 语义框线 SVG

Copy HTML 语义框线 SVG into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/simbajigege/book2skills/tree/main/skills/html-line-svg ~/.claude/skills/html-line-svg

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/simbajigege/book2skills.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: skills/html-line-svg/SKILL.md in simbajigege/book2skills
Installs to: ~/.claude/skills/html-line-svg
Collection: One of 25 skills cataloged from this repository
Category: Frontend — 732 skills

What HTML 语义框线 SVG does

HTML 语义框线 SVG 将文字、截图、手绘或现有 HTML 关系图提炼为可访问的极简框线图，并同步输出可复用的生成提示词。用于课程页、HTML Presentation、卡片和架构图等需要清晰教学语义的场景。

HTML 语义框线 SVG is cataloged under Frontend on DirSkills. HTML 语义框线 SVG comes from a repository tagged agent-skills, agentskills, anthropic, anthropic-claude and book2skills.

Documentation

README

Excerpt

HTML 语义框线 SVG

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

开始前

读取目标内容、相邻内容、现有图片或草图、承载它的 HTML/CSS 和可用空间。
在 course-design 中工作时，读取根目录 AGENTS.md、docs/design/STYLE_DNA.md、目标页面使用的设计 token 与更具体的目录规范。
由其他 skill 调用时，回到调用它的上层工作流：遵守上层 skill 规定的事实来源、源文件、素材登记、追溯记录、生成物和验证范围，不固定绑定 tailor-html-to-slide、ppt-like-html 或任何单一载体。独立调用时，遵守目标项目与目标文件所在目录的规则。
保护原结论、概念边界、方向、状态与数量。无法从材料确认的关系不要画成箭头。

工作流

1. 写语义规格与可选 Mermaid 关系结构

在画图前写出一个最小规格；可放在工作笔记中，不要求成为最终页面文字。

This is the opening of the README. Read the full README on GitHub.

Frequently asked about HTML 语义框线 SVG

What else does simbajigege publish alongside HTML 语义框线 SVG?
HTML 语义框线 SVG is one of 25 skills that DirSkills catalogs from simbajigege/book2skills, the repository it ships in. Its siblings there include Agent Memory Implementation, Agent Tool Builder and Business Adventures Analysis. Each one is a separate skill with its own page in this directory, installs the same way HTML 语义框线 SVG does, and is maintained by simbajigege in that same repository. The rest of the collection is listed on the simbajigege/book2skills page.
How does HTML 语义框线 SVG compare to other Frontend skills?
HTML 语义框线 SVG ranks #691 by stars among the 732 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of HTML 语义框线 SVG against them. Open each page to compare what they document and how they install.