创建第一个 Skillhtml-optimizer1. 定义元数据 (Metadata)name:html-optimizerdescription:提供 HTML 代码结构分析、SEO 优化建议及可访问性 (a11y) 检查version:1.0.0author:Your Nametags:[html,frontend,seo,accessibility]2. 设置触发机制 (Triggers)当用户提到以下关键词或意图时激活关键词HTML 优化、SEO 检查、网页可访问性、HTML 结构分析、a11y意图analyze_html,optimize_seo,check_accessibility3. 构建知识体系 (Knowledge Base)这是 Skill 的“大脑”包含以下核心知识SEO 最佳实践必须包含title,meta description,meta viewport。图片必须有alt属性。语义化标签使用 (header,nav,main,article,footer)。可访问性 (a11y) 规范表单必须有label关联。按钮必须有可点击的文本或aria-label。颜色对比度符合 WCAG 标准。性能优化避免内联 CSS/JS建议外部文件。图片懒加载 (loadinglazy)。减少 DOM 深度。4. 设计工作流 (Workflow)当 Skill 被激活时按以下步骤执行识别目标文件检查当前打开的文件是否为.html。如果不是询问用户要分析哪个 HTML 文件。读取代码调用read工具获取文件内容。静态分析检查缺失的元标签。检查语义化标签使用情况。检查图片alt属性和表单label。生成报告输出问题列表严重/警告/建议。提供修复代码示例。给出优化评分如SEO 85/100。5. 工具集成 (Tools)read: 读取 HTML 文件内容。lsp: (可选) 检查 HTML 语法错误。write: (可选) 直接生成优化后的代码文件。 如何开始使用你可以直接对我说“请激活html-optimizer技能分析当前打开的weibo-blog.html文件。”或者“帮我检查这个 HTML 文件的 SEO 和可访问性问题。”系统会自动识别意图加载上述知识体系并调用工具读取文件进行分析。