将 Photoshop (PSD) 设计稿转换为 Cocos Creator 布局参考。自动导出 PNG 切片并生成坐标 JSON，支持中文图层名。触发条件：当用户提到以下关键词时激活本技能： - "PSD 转 Cocos"、"导出 PSD 到 Cocos"、"PSD 切图 Cocos" - "设计稿导入 Cocos"、"PSD 生成 Cocos 布局" - "Photoshop 转 Cocos"、"PSD 导出坐标"

2026-03-150

psd-json-preview

xiao0916/lm-skills

从 PSD 导出的 JSON 图层树和切片图片生成 HTML/CSS 预览。默认保留 PSD 的分组嵌套结构，用 --flatten 参数可切换为平铺模式。

2026-03-120

psd-layer-reader

xiao0916/lm-skills

读取并导出 Photoshop（.psd）图层树为 JSON，包含图层元信息（名称、类型、可见性、bbox）以及详细的文本样式信息。当用户需要分析 PSD 结构、查找特定图层（如弹窗、按钮）、或准备 HTML/CSS 还原所需的数据时，务必使用此技能。即使涉及复杂的嵌套结构或需要精确的文本还原（字体、颜色、间距），此工具也能提供结构化的支撑。

2026-03-120

psd-to-preview

xiao0916/lm-skills

从 PSD 设计文件到预览页面 + React 组件 + Vue 组件的完整转换工作流。

2026-03-120

project-reader

xiao0916/lm-skills

项目结构分析技能。用于快速理解陌生前端/全栈项目的技术栈、目录结构和模块依赖关系。通过分层阅读工作流，从框架检测到依赖分析，逐步深入理解项目架构。适用于需要接手新项目、分析代码库、或进行技术调研的场景。

2026-02-260

name	html-semantic-optimizer
description	HTML语义化优化工具，将通用HTML标签（div、span）自动转换为语义化HTML5标签（header、nav、main、article、button等）。基于CSS类名智能识别元素语义角色，支持自定义规则配置。

HTML 语义化优化工具

将通用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/

Python API 使用

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 参数加载自定义规则，同名规则会覆盖默认规则。

核心模块

RuleEngine（规则引擎）

from html_optimizer import RuleEngine

engine = RuleEngine()
engine.load_from_file('rules.json')
rule = engine.find_matching_rule(['main-header', 'container'])

DOMTransformer（DOM转换器）

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 预览结果而不保存
测试自定义规则 - 先在测试文件上验证规则效果
规则优先级 - 高优先级规则优先匹配

依赖

Python 3.6+
beautifulsoup4 >= 4.9.0
lxml >= 4.6.0

安装命令：

pip install -r requirements.txt