Communitygithub.com

thedaviddias/Front-End-Checklist

用於檢查 CSS 和 JavaScript 實作的模態框、覆蓋層、彈出視窗、Cookie 橫幅、新聞訂閱對話框和促銷覆蓋層。檢查 `position: fixed`、`position: absolute` 配合大 z-index、背景遮罩，以及在頁面載入後立即顯示模態框的 JavaScript，同時考慮 SEO 影響（Google）和無障礙性（WCAG 焦點管理）。

Front-End-Checklist 是什麼？

這個技能是基於 thedaviddias/Front-End-Checklist 的知識庫，專門用於審查和診斷網頁前端中常見的 UI 元件，如模態框、覆蓋層、彈出視窗、Cookie 同意橫幅、新聞訂閱對話框以及促銷覆蓋層。它會針對 CSS 屬性（如 `position: fixed`、`position: absolute` 與大 z-index 值）和背景遮罩進行靜態分析，同時檢查 JavaScript 是否在頁面載入時或之後立即顯示這些元素。此工具不僅考慮 Google 的 SEO 最佳實踐（避免阻擋內容），還嚴格遵循 WCAG 的無障礙標準（特別是焦點管理），以確保所有用戶（包括使用輔助技術者）都能順利操作。支援多種基於文件或程式碼分析的開發平台，幫助開發者在開發早期發現並修正潛在的 UX 和可訪問性問題。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add thedaviddias/Front-End-Checklist
查看原文→瀏覽所有技能

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

說明文件

Front-End-Checklist 是做什麼的？

在用於 CSS 和 JavaScript 實作的模態框、覆蓋層、彈出視窗、Cookie 橫幅、新聞訂閱對話框和促銷覆蓋層時使用。檢查 position: fixed、position: absolute 配合大 z-index、背景遮罩，以及在頁面載入後立即顯示模態框的 JavaScript。同時考慮 SEO 影響（Google）和無障礙性（WCAG 焦點管理）。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

thedaviddias/interstitials

Use when applies to CSS and JavaScript implementations of modals, overlays, pop-ups, cookie banners, newsletter sign-up dialogs, and promotional overlays. Check for `position: fixed`, `position: absolute` with large z-index, backdrop overlays, and JavaScript that shows modals on page load or shortly after. Consider both SEO impact (Google) and accessibility (WCAG focus management).

相關技能

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community