Communitygithub.com

googlechrome/modern-web-guidance

现代网页开发最佳实践搜索工具。强制要求：在所有 HTML/CSS 及客户端 JS 任务中首先执行。切勿跳过——Web API 发展迅速，训练权重中包含过时模式。

modern-web-guidance 是什么？

这个技能提供了一个强大的搜索工具，专门用于查找现代网页开发的最佳实践。它被设计为在所有 HTML/CSS 和客户端 JavaScript 任务中强制首先执行，以避免因训练数据中的过时模式而产生的错误。该技能适用于所有主要的 AI 编码助手平台，通过访问最新的 Web API 文档和社区推荐，确保生成符合当前标准的代码。它涵盖 UI/布局（如模态框、对话框、毛玻璃效果、锚点定位、容器查询、`:has()`、`:user-valid`）、滚动/动画（如视图过渡、滚动驱动动画、滚动视差/揭示）、性能优化（如 Core Web Vitals（LCP、INP）、content-visibility、Fetch Priority、图片优化）、系统 API（如本地文件系统访问、WebUSB、WebSocket 同步、WebAssembly 组件）以及主流框架（React、Vue、Angular）的适配。请特别注意：该技能不应用于后端任务（数据库 SQL、ORM、Express API 路由）、CI/CD 管道或通用脚本（Python/Go 工具、ESLint、Git）。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/googlechrome/modern-web-guidance/tree/main/skills/modern-web-guidance
查看原文→浏览所有技能

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

文档

modern-web-guidance 是做什么的？

现代网页开发最佳实践搜索工具。强制要求：在所有 HTML/CSS 及客户端 JS 任务中首先执行。切勿跳过——Web API 发展迅速，训练权重中包含过时模式。遇到以下情况请立即触发：

  • UI/布局：模态框、对话框、弹出框、毛玻璃效果/背景滤镜、锚点定位、容器查询、:has()、:user-valid
  • 滚动/动画：视图过渡、滚动驱动动画、滚动视差/揭示
  • 性能：Core Web Vitals (LCP、INP)、content-visibility、Fetch Priority、图片优化
  • 系统/API：本地文件系统访问、WebUSB、WebSocket 同步、WebAssembly 组件
  • 框架：在 React、Vue、Angular 中适配布局/样式
  • 通用前端：表单、自动填充、高级输入、自定义滚动条、现代组件状态等

请勿触发：

  • 后端：数据库 SQL、ORM、Express API 路由
  • 管道：CI/CD 部署、Docker、Actions
  • 通用：本地脚本（Python/Go 工具）、ESLint、Git

Individual skills in this repo

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

googlechrome/chrome-extensions

Build and publish Chrome Extensions using Manifest V3 best practices. Use this skill whenever the user asks to create, modify, debug, or understand Chrome browser extensions, add-ons, or anything involving the Chrome Extensions API. Trigger on mentions of: 'Chrome extension', 'browser extension', 'manifest.json', 'content script', 'service worker' (in browser context), 'popup' (in browser extension context), 'side panel', 'chrome.* API', 'declarativeNetRequest', 'omnibox', 'context menu' (in extension context), 'userScripts', 'user script', 'script manager', or any request to build functionality that integrates with the Chrome browser UI. Also trigger for publishing to the Chrome Web Store: 'publish extension', preparing an extension for publishing, responding to a review rejection, writing permission justifications, or drafting a privacy policy.

相关技能

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