🚀 创建第一个 Skill：html-optimizer

1. 定义元数据 (Metadata)

name: html-optimizer
description: 提供 HTML 代码结构分析、SEO 优化建议及可访问性 (a11y) 检查
version: 1.0.0
author: "Your Name"
tags: ["html", "frontend", "seo", "accessibility"]

2. 设置触发机制 (Triggers)

当用户提到以下关键词或意图时激活：

• 关键词：HTML 优化、SEO 检查、网页可访问性、HTML 结构分析、a11y
• 意图：analyze_html, optimize_seo, check_accessibility

3. 构建知识体系 (Knowledge Base)

这是 Skill 的“大脑”，包含以下核心知识：

• SEO 最佳实践：
  • 必须包含 <title>, <meta description>, <meta viewport>。
  • 图片必须有 alt 属性。
  • 语义化标签使用 (<header>, <nav>, <main>, <article>, <footer>)。
• 可访问性 (a11y) 规范：
  • 表单必须有 <label> 关联。
  • 按钮必须有可点击的文本或 aria-label。
  • 颜色对比度符合 WCAG 标准。
• 性能优化：
  • 避免内联 CSS/JS（建议外部文件）。
  • 图片懒加载 (loading="lazy")。
  • 减少 DOM 深度。

4. 设计工作流 (Workflow)

当 Skill 被激活时，按以下步骤执行：

1. 识别目标文件：
   • 检查当前打开的文件是否为 .html。
   • 如果不是，询问用户要分析哪个 HTML 文件。
2. 读取代码：
   • 调用 read 工具获取文件内容。
3. 静态分析：
   • 检查缺失的元标签。
   • 检查语义化标签使用情况。
   • 检查图片 alt 属性和表单 label。
4. 生成报告：
   • 输出 问题列表（严重/警告/建议）。
   • 提供 修复代码示例。
   • 给出 优化评分（如：SEO 85/100）。

5. 工具集成 (Tools)

• read: 读取 HTML 文件内容。
• lsp: (可选) 检查 HTML 语法错误。
• write: (可选) 直接生成优化后的代码文件。

💡 如何开始使用？

你可以直接对我说：

“请激活 html-optimizer 技能，分析当前打开的 weibo-blog.html 文件。”

或者：

“帮我检查这个 HTML 文件的 SEO 和可访问性问题。”

系统会自动识别意图，加载上述知识体系，并调用工具读取文件进行分析。