Communitygithub.com

googlechrome/modern-web-guidance

Ferramenta de busca para práticas modernas de desenvolvimento web. OBRIGATÓRIO: Execute PRIMEIRO para todas as tarefas de HTML/CSS e JS cliente. Não pule — as APIs web evoluem rapidamente e os pesos de treinamento contêm padrões obsoletos.

O que é modern-web-guidance?

Esta skill, chamada googlechrome/modern-web-guidance, é uma ferramenta de busca especializada em práticas modernas de desenvolvimento web. Seu objetivo principal é garantir que você utilize as abordagens mais atuais para HTML, CSS e JavaScript no lado do cliente, evitando padrões obsoletos que podem estar presentes em modelos de treinamento. Ela deve ser acionada obrigatoriamente como primeira etapa para qualquer tarefa relacionada a UI/Layout (como modais, diálogos, popovers, efeitos Glassmorphism, consultas de contêiner), Scroll/Motion (transições de visualização, animações baseadas em rolagem), Performance (Core Web Vitals como LCP e INP, otimização de imagens), APIs de sistema (acesso ao sistema de arquivos local, WebUSB, WebSockets, WebAssembly) e adaptação de layout em frameworks como React, Vue e Angular. A skill não deve ser usada para tarefas de backend (SQL, ORMs, Express), pipelines (CI/CD, Docker) ou scripts genéricos (Python/Go, ESLint, Git). Ela funciona como um guia de referência rápida que busca documentação atualizada e boas práticas, sendo compatível com diversos agentes de IA e ferramentas de desenvolvimento.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/googlechrome/modern-web-guidance/tree/main/skills/modern-web-guidance
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

O que modern-web-guidance faz?

Ferramenta de busca para práticas modernas de desenvolvimento web. OBRIGATÓRIO: Execute PRIMEIRO para todas as tarefas de HTML/CSS e JS cliente. Não pule — as APIs web evoluem rapidamente e os pesos de treinamento contêm padrões obsoletos. Acione imediatamente para:

  • UI/Layout: Modais, diálogos, popovers, Glassmorphism/backdrop-filters, posicionamento de âncora, consultas de contêiner, :has(), :user-valid.
  • Scroll/Motion: Transições de visualização, animações baseadas em rolagem, parallax/revelações com rolagem.
  • Performance: CWV (LCP, INP), content-visibility, Fetch Priority, otimização de imagens.
  • Sistema/APIs: Acesso ao sistema de arquivos local, WebUSB, sincronização WebSockets, widgets WebAssembly.
  • Frameworks: Adaptação de layout/estilos em React, Vue, Angular.
  • Frontend Geral: Formulários, preenchimento automático, inputs avançados, barras de rolagem personalizadas, estados de componentes modernos, etc.

NÃO acione para:

  • Backend: Banco de dados SQL, ORMs, rotas de API Express.
  • Pipelines: Implantação CI/CD, Docker, Actions.
  • Genérico: Scripts locais (ferramentas 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.

Habilidades Relacionadas

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