figure-figcaption
前端检查清单中的一条无障碍与语义化规则，要求在图片与其可见说明文字同时出现时，使用 <figure> 包裹并用 <figcaption> 作为说明，从而让屏幕阅读器和搜索引擎正确理解图片与说明的关系。
Skill 广场
找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-31 00:15
前端与建站
11,329 个结果
filename-quality
一条前端检查清单规则，用于审查图片文件名是否具有描述性，以提升图片 SEO 与资源可维护性。涵盖 HTML、CSS url()、import 及 public/assets 目录中的引用，指出通用、自动生成、含空格或大小写混杂的文件名并给出改名建议。
identical-links-same-purpose
前端无障碍检查规则：确保文字相同的链接指向一致的目标地址，避免屏幕阅读器用户按链接列表导航时产生困惑。
landmark-one-main
该技能用于检查页面是否只包含一个 main 地标（landmark）。它要求每个页面恰好有一个 <main> 元素，或恰好有一个带 role='main' 的元素，避免出现多个主内容区域。单一 main 地标能让键盘和屏幕阅读器用户直接跳转到页面主要内容，跳过重复的导航。技能提供快速参考、检查方法、修复建议和解释，并支持代码审查，指出违反规则的具体元素、角色、标签、焦点行为或键盘交互，同时说明如何用浏览器无障碍工具或辅助技术验证修复效果。
locale-images
locale-images 是前端检查清单中的一条国际化规则，用于审查图片、图标库和插画组件中可能因文化差异而产生歧义或冒犯的内容，建议默认使用文化中立图像，并在必须区分地区时提供本地化覆盖与中性回退。
nofollow-internal
该技能用于审计网站内部链接结构，检查指向同一域名页面的链接是否错误地使用了 rel=nofollow 属性。内部链接添加 nofollow 会阻止 PageRank 流向自身页面，降低这些页面的排名能力，且相比直接省略该属性没有任何好处。技能会扫描所有内部链接，列出源页面、锚文本和目标 URL，并指导移除内部链接上的 nofollow；若目的是阻止索引应改用 noindex，若目的是阻止抓取应使用 robots.txt 的 Disallow。
nosnippet
nosnippet 是一条前端 SEO 检查规则，用于审计 robots meta 标签。它提醒不要在重要落地页、文章或产品页上使用 nosnippet，因为该指令会让搜索结果不显示描述，降低点击率。
parallax-effects
前端检查清单中的无障碍规则，用于审查视差滚动效果是否提供替代方案：在用户启用减少动态效果时禁用视差，确保内容在无动效情况下仍可访问，并考虑提供全站动效开关。
redirect-chains
前端检查清单中的 SEO 规则：审计站内链接是否直接指向最终目标 URL，避免内部链接经过 301/302 跳转，从而减少延迟、节省抓取预算并完整传递 PageRank。适用于 URL 迁移、域名更换或站点重建后的内部链接结构检查。
reset-css
前端检查清单中的 CSS Reset 规则，用于审查样式表、组件样式与响应式表现，确认是否通过 CSS 重置或 normalize 样式表消除浏览器默认样式差异，保证在 Chrome、Firefox、Safari、Edge 等浏览器中渲染一致。
resource-hints
前端性能清单中的资源提示（Resource Hints）规则，用于排查因资源加载缓慢、资源过重或渲染延迟导致的页面变慢问题。指导使用 preload、preconnect、prefetch、dns-prefetch 让浏览器更早获取关键资源，以改善 LCP。
semantic-lists
前端检查清单中的无障碍规则技能，用于审查渲染后的 HTML、交互组件或设计系统模式是否使用语义化列表元素（ul、ol、dl），确保屏幕阅读器能正确播报列表结构与条目数量。
sensory-instructions
该技能用于在审查已渲染的 HTML、交互组件或设计系统模式时，检查是否存在“仅依赖感官线索”的指令问题。它关注的是无障碍设计中的一条规则：不要只用颜色、形状、位置或声音来传达信息，因为色盲用户无法分辨“点击红色按钮”，屏幕阅读器用户无法感知“右侧的菜单”，听障用户会错过音频提示。技能建议先检查原生语义，再补充文字标签，将多种线索组合使用，使所有用户都能理解。它提供快速参考、检查项、修复建议和解释，并支持代码审查，指出违反规则的具体元素、角色、标签、焦点行为或键盘交互，同时说明如何用浏览器无障碍工具或辅助技术验证修复效果。完整实现细节、代码示例和框架相关指导见 references/rule.md。
session-timeout-recovery
该技能用于审查需要登录的用户流程和长表单，防止会话超时导致用户数据丢失。它要求同时检查客户端与服务器行为，包括超时警告的时机、对话框的可访问性、自动保存频率，以及重新认证后的恢复能力。核心目标是确保有认知、运动或视觉障碍的用户在完成表单和认证任务时，不会因静默的会话过期而丢失已填写的内容。技能提供了快速参考、检查项、修复建议和代码审查指引，并关联 WCAG 关于充足时间的指导原则。
special-chars
该技能用于检查和处理 URL 路径中的特殊字符问题，适用于含用户生成 slug、CMS 生成 URL 或非英文内容的站点。它帮助审计 URL 是否存在爬取错误、分享后链接失效以及规范化失败等风险，核心要求是 URL 路径只使用非保留字符（A-Z、a-z、0-9、-、_、.、~），空格编码为 %20，保留字符与非 ASCII 字符进行百分号编码，并检查同一 URL 的不同编码是否返回多个 200 响应。
streaming-html
Streaming HTML 是一项前端性能检查规则，用于审查服务端渲染（SSR）实现是否将 HTML 分块增量地流式发送给浏览器，而不是等待所有数据请求完成后才一次性返回完整响应。传统 SSR 会等待所有数据获取完成才发送第一个字节，导致浏览器在最慢的查询结束前无法解析、发现子资源或渲染任何内容。流式渲染将首屏内容的交付与缓慢的数据库查询、第三方 API 调用解耦，从而显著提升感知性能和 LCP。该规则建议使用 React 的 renderToPipeableStream 配合 Suspense 边界，或在 Node.js 处理器中使用 ReadableStream，让首屏 HTML 立即刷新到客户端。检查要点包括：审查服务端入口和页面组件中是否存在 renderToString 调用、数据获取组件周围是否缺少 Suspense 边界、是否在返回响应前对慢查询使用了 await。可通过 Lighthouse 监控 TTFB，超过 600ms 通常意味着未使用流式渲染。
subgrid
子网格（subgrid）前端清单条目，用于卡片网格中跨卡片对齐内容区域。当卡片网格嵌套项需要与相邻卡片的标题、正文或页脚对齐时，可用 CSS subgrid 让嵌套网格继承父网格轨道，避免 JavaScript 测高或 CSS 取巧。
th-has-data-cells
前端可访问性检查规则 th-has-data-cells：确保每个表格表头 <th> 都与一个或多个数据单元格 <td> 关联，避免孤立表头误导辅助技术用户。
type-coercion
前端检查清单中的 JavaScript 类型强制转换规则，用于审查脚本、客户端组件与打包产物，避免隐式类型转换带来的潜在缺陷，属于前端与建站领域的代码质量检查项。
video
该技能用于在嵌入或托管视频内容的页面上补充 VideoObject 结构化数据（JSON-LD schema），帮助页面获得 Google 搜索中的视频富媒体结果与视频轮播展示。适用于网站新增视频内容时的 SEO 配置，或对已有视频页面进行结构化数据审计。核心要求是在每个含视频的页面添加 VideoObject 类型脚本块，必备属性为 name、description、thumbnailUrl、uploadDate，推荐属性为 contentUrl（视频文件直链）或 embedUrl（iframe 嵌入地址），上传日期使用 ISO 8601 格式，并可用 Google Rich Results Test 验证。技能同时提供检查、修复、原理说明与代码审查指引，覆盖元数据生成、渲染 HTML、结构化数据与响应头等面向搜索的输出。
video-thumbnail
该技能用于检查 HTML 中所有 <video> 元素是否设置了 poster 缩略图属性。没有 poster 图片时，视频在加载首帧前会显示为空白黑框，既缺乏内容提示，也可能因尺寸未指定导致布局偏移（CLS）。技能要求为每个视频添加指向代表性缩略图的 poster 属性，确保 URL 有效、宽高尺寸已设置，且缩略图真实反映视频内容。推荐缩略图与视频保持相同宽高比（通常为 16:9），分辨率至少 1280×720，并托管在 CDN 缓存地址以加快加载。适用于前端代码审查、模板与共享组件检查等场景。
view-transitions
View Transitions 技能的介绍：View Transitions API 是浏览器原生提供的页面与组件过渡动画方案，用于在单页应用（SPA）或多页应用（MPA）导航时实现平滑的页面切换、图像展开/收缩效果、共享元素过渡，从而改善导航体验。该技能来自前端检查清单项目 thedaviddias/front-end-checklist，围绕 View Transitions API 提供检查、修复、解释和代码审查四类指导：检查站点是否使用原生 View Transitions API 或 JavaScript 动画库实现过渡；对 SPA 路由变化使用 document.startViewTransition()，对 MPA 跨文档导航使用 @view-transition 配置；解释 API 如何捕获前后快照并在其间做动画，以及 view-transition-name 如何实现共享元素过渡；审查实现中是否缺少 prefers-reduced-motion 保护、是否存在重复的 view-transition-name 值（每份快照中必须唯一）以及可能造成布局抖动（layout thrash）的过渡。完整实现细节、代码示例与框架相关指引见 references/rule.md。收费、价格与平台等信息资料暂未提供。
webpagetest
WebPageTest 是一个用于分析网页性能的工具，能够揭示合成测试工具容易忽略的真实世界性能问题，例如来自实际地理位置的 TTFB、渲染阻塞模式以及第三方脚本的影响。该技能条目属于前端检查清单（front-end-checklist）的一部分，用于在审查模板、服务端渲染 HTML 或共享组件时，借助 WebPageTest 分析页面性能、定位瓶颈，并衡量不同设备与网络连接下的真实加载指标。它涵盖检查、修复、解释和代码审查四个环节：运行测试、实施优化建议、说明 Core Web Vitals 与加载瀑布图等洞察，以及在代码审查中标记违反规则的渲染 HTML 元素、属性和路由。使用建议包括运行 3 次以上测试以获得一致结果、从靠近用户的位置测试、使用胶片视图识别视觉进度、检查瀑布图以发现阻塞资源和缓慢的第三方资源。完整实现细节、代码示例和框架特定指南见 references/rule.md。
saas-landing-theme
SaaS Landing Theme 是一个用于生成现代、浅色主题 SaaS 落地页的技能，主打温暖的编辑式美学、以转化为导向的布局和精致的 UI。它适用于用户需要 SaaS 落地页、营销站点、产品主页、创业公司网站、定价页或功能展示页的场景。该技能强调避免常见的“AI 生成感”设计，例如白底紫色渐变、Inter/Roboto/Arial 等系统字体、抽象色块插画和千篇一律的布局。它提供完整设计系统与模板结构参考，支持整页、仅区块以及 React/JSX 三种输出模式，并可按品牌色、产品名、标语、功能、定价和评价进行定制。