跳到正文
cccskills

David Dias

@thedaviddias

Staff Front-End Engineer | Front-End Architecture, Design Systems & Accessibility | Creator of the Front-End Checklist (74K+ ⭐) and serving 100K+ devs

467 个技能6 个仓库 7.5万

技能(467)

在搜索中筛选

cross-origin-isolation

免费有简介AI 评分 100分

检查 SharedArrayBuffer 等功能所需的跨源隔离,核查安全响应头及外部资源兼容性,指出可能失效的集成,并在浏览器中验证隔离是否成立。

  • 检查 SharedArrayBuffer 使用条件
  • 启用 COEP 前调查外部资源
  • 确认对弹出窗口和嵌入内容的影响
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

canonical-url

免费有简介AI 评分 100分

检查各页面的canonical标签,核对因参数或域名写法不同而产生的重复网址,协助补充或修正向搜索引擎声明的规范网址,并验证生成页面中的设置。

  • 检查各页面的规范网址标签
  • 排查参数或域名差异造成的重复网址
  • 补充或修正规范网址
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

broken-html

免费有简介AI 评分 90分

检查并修复标签未闭合、嵌套错误等HTML结构问题。结合实际生成的HTML和HTTP响应,查找可能影响页面显示及搜索引擎解析的问题。

  • 检查标签未闭合和嵌套错误
  • 排查HTML导致的显示错乱
  • 检查面向搜索引擎的HTML结构
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

canonical-header

免费有简介AI 评分 100分

比较HTML中的canonical标签与HTTP的Link响应头声明的规范网址,定位向搜索引擎提供矛盾信息的路由或模板,并给出修改方案及输出验证方法。

  • 比较HTML与HTTP声明的规范网址
  • 排查规范网址声明冲突的原因
  • 检查不同路由或模板的输出
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

color-contrast

免费有简介AI 评分 100分

检查网页文字、输入框边框及传达含义的图标等元素的颜色对比度,涵盖悬停、聚焦等交互状态,并协助调整前景色或背景色,使配色符合WCAG标准。

  • 检查文字与背景配色
  • 检查输入框边框和图标的可辨识性
  • 检查悬停及聚焦状态的颜色
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

content-security-policy

免费有简介AI 评分 100分

检查网站的CSP配置及HTML插入操作,协助限制可加载或执行的资源、采用安全的显示处理,并在接近生产的环境中验证实际HTTP响应和浏览器行为。

  • 检查现有CSP配置
  • 限制脚本与外部资源
  • 检查不可信HTML的显示处理
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

css-grid

免费有简介AI 评分 100分

检查需要同时对齐行与列的页面布局,协助评估改用CSS Grid的方案,并设计随屏幕宽度或内容调整的网格,也可让嵌套元素对齐父网格。

  • 检查Flexbox或float二维布局
  • 按屏幕宽度排列卡片列表
  • 让嵌套元素对齐父网格
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

canonical-chain

免费有简介AI 评分 100分

检查向搜索引擎声明首选页面地址的规范网址是否发生重定向,核对渲染后的网页和服务器响应,帮助将规范链接直接指向返回成功状态的最终网址。

  • 检查规范网址是否发生重定向
  • 更改网址后检查规范链接标签
  • 审查生成规范网址的模板
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

currency-formatting

免费有简介AI 评分 90分

检查价格、数值和日期时间的显示方式,帮助改用符合语言及地区规则的Intl API,同时检查固定货币符号、分隔符、排序和备用区域设置。

  • 调整面向多个地区的价格显示
  • 替换手动编写的数值和日期格式
  • 检查符合语言规则的排序
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

css-order

免费有简介AI 评分 100分

检查HTML的head中CSS与JavaScript的加载顺序,并核对不同屏幕宽度和交互状态下的显示,为渲染延迟及无样式内容闪现提出修改建议。

  • 调查无样式内容短暂闪现的原因
  • 检查head中的CSS与脚本顺序
  • 检查脚本延迟加载与关键CSS
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

aria-input-field-name

免费有简介AI 评分 100分

检查表单输入框是否具备供屏幕阅读器和语音控制使用的名称,通过关联标签或修正ARIA属性,让使用者能够了解各输入框的用途。

  • 查找表单中缺失的标签
  • 修正仅显示输入示例的输入框
  • 检查自定义表单组件的名称
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

accessible-notifications

免费有简介AI 评分 100分

检查表单错误、完成通知和实时更新能否通过屏幕阅读器传达,核对实际显示的HTML属性、通知停留时间及关闭方式,并指出具体问题。

  • 检查表单错误是否被朗读
  • 调整完成通知的显示时间
  • 检查实时通知
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

affiliate-disclosure

免费有简介AI 评分 90分

检查推广联盟链接或赞助内容是否在链接出现前清楚披露经济合作关系,并查看实际生成的 HTML 和 HTTP 响应,协助调整披露文字及其显示位置。

  • 检查推广联盟关系披露
  • 统一赞助内容的披露方式
  • 检查实际页面中的披露显示
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

animation-performance

免费有简介AI 评分 90分

找出CSS动画中增加渲染负担的属性,建议改用transform和opacity,并检查不同屏幕宽度、交互状态下的显示及减少动态效果的设置。

  • 检查卡顿的动画
  • 修改改变位置或尺寸的动画
  • 检查减少动态效果的设置
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

accordion-accessibility

免费有简介AI 评分 100分

检查并修正折叠面板的按钮、开合状态属性、标题结构及最终输出的HTML,让用户能够通过键盘和屏幕阅读器使用内容。

  • 检查折叠内容的键盘操作
  • 通过朗读传达展开与收起状态
  • 检查共用折叠面板组件
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

404-page

免费有简介AI 评分 100分

创建并检查自定义404页面,通过搜索、导航和主要页面链接,为访问失效或已迁移页面的访客指明去向,同时核对页面显示内容与HTTP状态码。

  • 创建自定义404页面
  • 完善失效链接的搜索与导航
  • 检查不存在的页面是否返回200
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

autoplay-media

免费有简介AI 评分 100分

检查页面加载时自动播放的音频和视频,移除自动播放设置,或为必要的自动播放视频设置静音和键盘可用的暂停控件,让用户能够控制播放。

  • 检查加载时自动播放的音视频
  • 为视频设置静音并添加暂停控件
  • 检查播放控件的键盘操作
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

article

免费有简介AI 评分 100分

检查文章页面的结构化数据,核对标题、图片、发布日期和作者等信息,协助添加Article格式的JSON-LD,并验证实际生成和发送的页面。

  • 检查博客文章的结构化数据
  • 添加Article格式的JSON-LD
  • 查找标题、图片、日期与作者的缺漏
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

aria-treeitem-name

免费有简介AI 评分 100分

检查文件列表和层级菜单中各项目的名称及展开状态,指导修改显示文字或ARIA属性,让屏幕阅读器使用者能够区分不同项目。

  • 检查文件列表的项目名称
  • 确认层级菜单的展开状态
  • 为仅有图标的项目命名
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

accessible-authentication

免费有简介AI 评分 90分

检查从登录、多因素认证到账户恢复的完整流程,找出禁止粘贴、验证码必须手动输入等使用障碍,并协助改进认证方式。

  • 检查完整登录流程的无障碍性
  • 确认验证码粘贴与自动填充
  • 检查密码重置与账户恢复流程
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

aria-hidden-body

免费有简介AI 评分 90分

检查body上的aria-hidden是否导致整个页面被屏幕阅读器忽略,找出弹窗等交互中的错误设置,并协助改为仅隐藏相关背景容器。

  • 检查弹窗打开时的屏幕朗读
  • 排查页面无法被朗读的原因
  • 检查状态变化时的body属性
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

alt-text

免费有简介AI 评分 100分

检查图片alt属性的缺失和含糊描述,根据装饰图片、链接图片、含文字图片及图表的用途调整替代文本,让屏幕阅读器用户也能理解图片含义或链接目标。

  • 查找缺失或含糊的图片替代文本
  • 区分装饰图片和信息图片
  • 说明链接图片的目标页面
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

author-info

免费有简介AI 评分 100分

检查向搜索引擎提供文章或页面作者信息的结构化数据,核对姓名、外部资料链接及其与正文的关联,并查看公开页面实际输出的HTML和HTTP响应。

  • 检查文章页面的作者信息
  • 关联作者的外部个人资料
  • 检查模板中的作者标记
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

avoid-eval

免费有简介AI 评分 100分

查找 JavaScript 中将字符串作为代码执行的处理,检查 eval() 和字符串定时器等用法,并根据数据解析、操作选择或定时执行的用途提出替代方案。

  • 查找 eval() 等字符串执行操作
  • 替换解析 JSON 时使用的 eval()
  • 将字符串定时器改为函数引用
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

这是你的账号吗?关联 GitHub 后可以汇总到你的创作者页面(日语)