菜单
HTML语义化优化工具，将通用HTML标签（div、span）自动转换为语义化HTML5标签（header、nav、main、article、button等）。基于CSS类名智能识别元素语义角色，支持自定义规则配置。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
将 Photoshop（.psd）文件的所有图层导出为独立的 PNG 图片。适用于从 PSD 文件提取图层图片、为网页开发生成切片、或为其他工具准备图层资源。自动处理图层命名、跳过不可见图层、递归导出嵌套图层组。
将 Photoshop (PSD) 设计稿转换为 Cocos Creator 布局参考。 自动导出 PNG 切片并生成坐标 JSON，支持中文图层名。 触发条件：当用户提到以下关键词时激活本技能： - "PSD 转 Cocos"、"导出 PSD 到 Cocos"、"PSD 切图 Cocos" - "设计稿导入 Cocos"、"PSD 生成 Cocos 布局" - "Photoshop 转 Cocos"、"PSD 导出坐标"
从 PSD 导出的 JSON 图层树和切片图片生成 HTML/CSS 预览。默认保留 PSD 的分组嵌套结构，用 --flatten 参数可切换为平铺模式。
读取并导出 Photoshop（.psd）图层树为 JSON，包含图层元信息（名称、类型、可见性、bbox）以及详细的文本样式信息。当用户需要分析 PSD 结构、查找特定图层（如弹窗、按钮）、或准备 HTML/CSS 还原所需的数据时，务必使用此技能。即使涉及复杂的嵌套结构或需要精确的文本还原（字体、颜色、间距），此工具也能提供结构化的支撑。
从 PSD 设计文件到预览页面 + React 组件 + Vue 组件的完整转换工作流。
项目结构分析技能。用于快速理解陌生前端/全栈项目的技术栈、目录结构和模块依赖关系。通过分层阅读工作流，从框架检测到依赖分析，逐步深入理解项目架构。适用于需要接手新项目、分析代码库、或进行技术调研的场景。
| name | html-semantic-optimizer |
| description | HTML语义化优化工具，将通用HTML标签（div、span）自动转换为语义化HTML5标签（header、nav、main、article、button等）。基于CSS类名智能识别元素语义角色，支持自定义规则配置。 |
将通用HTML标签自动转换为语义化HTML5标签，提升代码可访问性和SEO友好性。
pip install beautifulsoup4 lxml
# 优化单个文件
python scripts/optimize.py input.html -o output.html
# 试运行（预览结果）
python scripts/optimize.py input.html --dry-run
# 使用自定义规则
python scripts/optimize.py input.html --rules custom_rules.json
# 批量处理目录
python scripts/batch_optimize.py /path/to/html/files/ -o /output/dir/
# 批量处理（递归子目录）
python scripts/batch_optimize.py /path/to/html/files/ --recursive -o /output/dir/
from html_optimizer import optimize_html
# 使用默认规则
result = optimize_html('<div class="btn">点击</div>')
# 输出: <button class="btn" type="button">点击</button>
# 自定义规则
from html_optimizer import RuleEngine, DOMTransformer
rules = [
{"name": "侧边栏", "keywords": ["sidebar"], "target_tag": "aside", "priority": 8}
]
engine = RuleEngine(rules)
transformer = DOMTransformer(engine)
result = transformer.transform(html_content)
工具通过分析元素的CSS类名，匹配预定义规则，将通用标签转换为对应的HTML5语义标签：
| 关键词 | 目标标签 | 示例 |
|---|---|---|
btn, button | <button> | <div class="btn"> → <button> |
link, nav-link | <a> | <div class="link"> → <a> |
header, top-bar | <header> | <div class="header"> → <header> |
nav, navbar | <nav> | <div class="nav"> → <nav> |
footer, bottom | <footer> | <div class="footer"> → <footer> |
main, content | <main> | <div class="main"> → <main> |
article, post | <article> | <div class="article"> → <article> |
sidebar, aside | <aside> | <div class="sidebar"> → <aside> |
section | <section> | <div class="section"> → <section> |
html-semantic-optimizer/
├── SKILL.md # 技能说明文档
├── requirements.txt # 依赖列表
├── html_optimizer.py # 核心模块（规则引擎 + DOM转换器）
├── example_rules.json # 示例规则配置
└── scripts/
├── optimize.py # 单个文件优化脚本
└── batch_optimize.py # 批量处理脚本
脚本内置了9条默认规则，涵盖常见的语义化场景。
创建JSON文件定义自定义规则（参考 example_rules.json）：
{
"rules": [
{
"name": "侧边栏",
"keywords": ["sidebar", "aside", "sidenav"],
"target_tag": "aside",
"priority": 8
},
{
"name": "文章卡片",
"keywords": ["card", "post-card"],
"target_tag": "article",
"priority": 7
}
]
}
| 字段 | 类型 | 说明 |
|---|---|---|
name | 字符串 | 规则标识名称 |
keywords | 字符串数组 | 匹配关键词列表（正则表达式，不区分大小写） |
target_tag | 字符串 | 目标HTML标签 |
priority | 整数 | 优先级（数值越大优先级越高） |
使用 --rules 参数加载自定义规则，同名规则会覆盖默认规则。
from html_optimizer import RuleEngine
engine = RuleEngine()
engine.load_from_file('rules.json')
rule = engine.find_matching_rule(['main-header', 'container'])
from html_optimizer import RuleEngine, DOMTransformer
engine = RuleEngine(rules)
transformer = DOMTransformer(engine)
result = transformer.transform(html_content)
自动处理：
<script>、<style>、<html>、<body> 等特殊标签<button> 添加 type="button"<a> 添加 href="#"from html_optimizer import optimize_html
# 一行代码完成优化
result = optimize_html(html_content)
# 处理单个目录
python scripts/batch_optimize.py ./html_files/ -o ./optimized/
# 递归处理子目录
python scripts/batch_optimize.py ./html_files/ --recursive -o ./optimized/
# 并行处理（4个进程）
python scripts/batch_optimize.py ./html_files/ -o ./optimized/ --workers 4
# 试运行模式
python scripts/batch_optimize.py ./html_files/ -o ./optimized/ --dry-run
--dry-run 预览结果而不保存安装命令：
pip install -r requirements.txt