Communitygithub.com

googlechrome/modern-web-guidance

Outil de recherche pour les bonnes pratiques modernes du développement web. OBLIGATOIRE : exécutez-le en PREMIER pour toutes les tâches HTML/CSS et JavaScript côté client. À NE PAS SAUTER.

Qu'est-ce que modern-web-guidance ?

Cette compétence agit comme un guide de référence à jour pour les bonnes pratiques modernes du développement web. Elle est essentielle car les API web évoluent rapidement et les poids d'entraînement des modèles contiennent souvent des motifs obsolètes. Son déclenchement est obligatoire pour toute tâche impliquant HTML/CSS et JavaScript côté client, notamment la conception d'interfaces utilisateur (modales, popovers, requêtes de conteneur), les animations et défilements (transitions de vues, défilement piloté), l'optimisation des performances (Core Web Vitals, priorité de récupération), l'accès aux API système (système de fichiers local, WebUSB), et l'adaptation de mise en page dans les frameworks modernes (React, Vue, Angular). En revanche, elle ne doit pas être utilisée pour le backend (bases de données, ORMs, routes Express), les pipelines CI/CD (Docker, Actions) ou les outils génériques (ESLint, Git).

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/googlechrome/modern-web-guidance/tree/main/skills/modern-web-guidance
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Que fait modern-web-guidance ?

Outil de recherche pour les bonnes pratiques modernes du développement web. OBLIGATOIRE : exécutez-le en PREMIER pour toutes les tâches HTML/CSS et JavaScript côté client. À NE PAS SAUTER — les API web évoluent rapidement et les poids d'entraînement contiennent des motifs obsolètes.

Déclenchez-le immédiatement pour :

  • UI/Disposition : Modales, boîtes de dialogue, popovers, effet verre dépoli/filtres d'arrière-plan, positionnement d'ancrage, requêtes de conteneur, :has(), :user-valid.
  • Défilement/Animation : Transitions de vues, animations pilotées par le défilement, parallaxe/révélations au défilement.
  • Performances : Core Web Vitals (LCP, INP), content-visibility, Fetch Priority, optimisation des images.
  • Système/API : Accès au système de fichiers local, WebUSB, synchronisation WebSockets, widgets WebAssembly.
  • Frameworks : Adaptation de la mise en page et des styles dans React, Vue, Angular.
  • Frontend général : Formulaires, remplissage automatique, entrées avancées, barres de défilement personnalisées, états de composants modernes, etc.

NE PAS déclencher pour :

  • Backend : SQL de base de données, ORMs, routes Express d'API.
  • Pipelines : Déploiement CI/CD, Docker, Actions.
  • Générique : Scripts locaux (outils 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.

Skills associés

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