跳到正文
cccskills
免费在 GitHub 公开

frontend-ui-accessibility

Build accessible UI—semantic HTML, keyboard support, ARIA when needed, WCAG-oriented checks. Use when implementing or reviewing web UI, forms, modals, and design systems.

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(2)

  • SKILL.md1.3 KB
  • reference.md1.2 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Frontend UI and accessibility

Defaults

  • Semantic HTML first; ARIA only when native semantics insufficient
  • Keyboard-operable for every interactive control
  • Visible focus states; do not remove outlines without replacement
  • Color contrast and non-color-only status cues

Build checklist

  • Heading hierarchy (h1 once per view where applicable)
  • Labels tied to inputs (label/for or aria-labelledby)
  • Buttons vs links used correctly
  • Modals: focus trap, Escape, return focus on close
  • Images: meaningful alt or decorative alt=""
  • Dynamic updates: aria-live when needed

Review checklist

  • Tab order logical; no keyboard traps
  • Touch targets adequate on mobile
  • Motion respects prefers-reduced-motion
  • Forms: errors associated with fields

Performance interaction

Avoid layout thrash; lazy-load below fold; measure LCP/CLS when shipping UI.

Related

  • reference.md — WCAG-oriented checklist
  • performance/performance-optimization — web vitals
  • gstack/design-review — visual polish (complementary)

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

"Implement and select ad bidding strategies from manual CPC to automated target-CPA and target-ROAS. Use this skill when the user needs to choose a bidding strategy, set up automated bidding, or optimize bid parameters — even if they say 'what bidding strategy should I use', 'target CPA setup', or 'smart bidding configuration'.".

中文简介正在准备中。当前显示原文说明。

charlieviettq/awesome-agent-skill262026年7月20日 更新

"Optimize advertising budget allocation across campaigns using marginal returns analysis. Use this skill when the user needs to distribute budget across multiple campaigns, optimize spend pacing, or maximize overall ROAS under budget constraints — even if they say 'how to split my ad budget', 'campaign budget optimization', or 'diminishing returns on ad spend'.".

中文简介正在准备中。当前显示原文说明。

charlieviettq/awesome-agent-skill262026年7月20日 更新

"Build CTR prediction models for estimating ad click-through rates from features. Use this skill when the user needs to predict click probability, build an ad ranking model, or evaluate ad creative performance — even if they say 'predict click rate', 'ad relevance scoring', or 'which ad will get more clicks'.".

中文简介正在准备中。当前显示原文说明。

charlieviettq/awesome-agent-skill262026年7月20日 更新

"Implement Generalized Second Price auction for ad slot allocation and pricing. Use this skill when the user needs to understand search ad auctions, compute ad positions and costs-per-click, or analyze bidding dynamics — even if they say 'how does Google Ads auction work', 'ad rank calculation', or 'second price auction for ads'.".

中文简介正在准备中。当前显示原文说明。

charlieviettq/awesome-agent-skill262026年7月20日 更新

"Implement VCG mechanism for incentive-compatible ad slot allocation with truthful bidding. Use this skill when the user needs to design a truthful auction mechanism, compute externality-based payments, or understand why platforms may prefer GSP over VCG — even if they say 'truthful auction design', 'VCG payments', or 'incentive-compatible mechanism'.".

中文简介正在准备中。当前显示原文说明。

charlieviettq/awesome-agent-skill262026年7月20日 更新

"Explain blockchain fundamentals including distributed ledger architecture, consensus mechanisms, and block structure. Use this skill when the user needs to understand blockchain concepts, evaluate whether blockchain fits a use case, or design a blockchain-based solution — even if they say 'how does blockchain work', 'do I need blockchain', or 'distributed ledger'.".

中文简介正在准备中。当前显示原文说明。

charlieviettq/awesome-agent-skill262026年7月20日 更新

查看 charlieviettq 的全部技能

报告此技能的问题