Communitygithub.com

googlechrome/modern-web-guidance

Suchwerkzeug für moderne Webentwicklung-Best Practices. MUSS zuerst für alle HTML/CSS und Client-seitigen JS-Aufgaben ausgeführt werden.

Was ist modern-web-guidance?

Diese Fähigkeit (Skill) dient als Suchwerkzeug für aktuelle Best Practices in der modernen Webentwicklung, speziell für HTML, CSS und clientseitiges JavaScript. Sie ist verpflichtend zuerst auszuführen, bevor du eine dieser Aufgaben angehst. Der Grund: Web-APIs und Browserfunktionen entwickeln sich rasant, und die Trainingsdaten des Modells können veraltete Muster enthalten. Der Skill deckt eine breite Palette ab: UI-Komponenten (Modals, Popovers), moderne CSS-Features (Container Queries, `:has()`, `:user-valid`), Scroll- und Bewegungssteuerung (View Transitions, Scroll-driven animations), Leistungsoptimierung (CWV (LCP, INP), Fetch Priority) sowie System-APIs (local filesystem access, WebUSB, WebAssembly). Er ist für alle gängigen Frameworks (React, Vue, Angular) und allgemeine Frontend-Aufgaben wie Formulare, benutzerdefinierte Bildlaufleisten und moderne Komponentenzustände konzipiert. Der Skill sollte nicht für Backend-, Pipeline- oder generische Aufgaben verwendet werden.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/googlechrome/modern-web-guidance/tree/main/skills/modern-web-guidance
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht modern-web-guidance?

Suchwerkzeug für moderne Webentwicklung-Best Practices. MUSS zuerst für alle HTML/CSS und Client-seitigen JS-Aufgaben ausgeführt werden. Nicht überspringen – Web-APIs entwickeln sich rasant und die Trainingsgewichte enthalten veraltete Muster. Sofort auslösen für:

  • UI/Layout: Modals, Dialoge, Popovers, Glassmorphismus/Hintergrundfilter, Anchor-Positionierung, Container Queries, :has(), :user-valid.
  • Scroll/Motion: View Transitions, Scroll-gesteuerte Animationen, Scroll-Parallaxe/Enthüllungen.
  • Performance: CWV (LCP, INP), content-visibility, Fetch Priority, Bildoptimierung.
  • System/APIs: Lokaler Dateisystemzugriff, WebUSB, WebSockets-Synchronisation, WebAssembly-Widgets.
  • Frameworks: Anpassung von Layout/Styles in React, Vue, Angular.
  • Allgemeines Frontend: Formulare, Autofill, erweiterte Eingaben, benutzerdefinierte Bildlaufleisten, moderne Komponentenzustände usw.

NICHT auslösen für:

  • Backend: Datenbank-SQL, ORMs, Express-API-Routen.
  • Pipelines: CI/CD-Deployment, Docker, Actions.
  • Allgemeines: Lokale Skripte (Python/Go-Tools), 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.

Verwandte Skills

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