Moderne webrichtlijnen | Modern Web Guidance

Dit is een vroege preview van Modern Web Guidance. We voegen actief nieuwe content toe en we verwelkomen bijdragen of feedback op GitHub .

Deze pagina is vertaald door de Cloud Translation API.

Bouw met behulp van moderne webrichtlijnen.

Modern Web Guidance is een set tijdloze en door experts getoetste vaardigheden die uw AI-codeeragenten begeleiden bij veelvoorkomende toepassingen, zodat ze moderne webervaringen kunnen bouwen die toegankelijk, performant en veilig zijn.

Installeren met modern-web-guidance CLI (aanbevolen):

npx modern-web-guidance@latest install

Aan de slag Bekijk op GitHub

Werkt met uw favoriete AI-codeeragent.

Modern Web Guidance kan worden gebruikt met uw favoriete AI-codeertools, zodat u toegang hebt tot richtlijnen voor de beste moderne webpraktijken binnen uw voorkeursworkflow.

Bekijk alle installatieopties

`npx skills`

Installeer Modern Web Guidance in uw project met behulp van Vercel's Agent Skills:

npx skills add GoogleChrome/modern-web-guidance

Claude Code

Installeer de vaardigheden voor moderne webbegeleiding voor Claude Code:

# 1. Add the marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
# 2. Install the plugin
/plugin install modern-web-guidance@googlechrome
# 3. Reload plugins
/reload-plugins

Copilot CLI

Installeer de Modern Web Guidance-functionaliteit voor Copilot CLI:

# 1. Add the marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
# 2. Install the plugin
/plugin install modern-web-guidance@googlechrome

Antigravity CLI

Installeer de Modern Web Guidance-functionaliteit in de Antigravity CLI:

agy plugin install https://github.com/GoogleChrome/modern-web-guidance

Aanwijzingen voor een betere gebruikerservaring

Probeer een paar van de volgende voorbeeldopdrachten uit om moderne webbegeleiding te gebruiken in je AI-ondersteunde codeerworkflow. Zo kun je nieuwe functies bouwen, verouderde code moderniseren en je app versnellen.

Ontwikkel nieuwe gebruikerservaringen

Create an accordion-style stats component that smoothly animates on open and close.

Build a tab bar with a sliding highlight that tracks active items using CSS Anchor Positioning.

Design a dashboard card that uses container queries to adapt its layout to its own width.

Moderniseer verouderde code

Update legacy modal window implementations to use the <dialog> element and animate them using modern CSS features.

Migrate legacy tooltips to use the Popover API and CSS Anchor Positioning.

Verbeter de beveiliging

Implement a passkey-based login flow using the latest WebAuthn features.

Implement a starter Content Security Policy (CSP) without breaking my app.

Perform a security audit of my site and suggest improvements.

Verbeter de prestaties

Set up my app to begin preloading pages when users hover over important links.

My app has lots of long tasks, and its INP is affected. Help me fix it.

Help me improve my app's LCP.

Gebruik moderne webbegeleidingsvaardigheden met Chrome DevTools voor agents.

Combineer Chrome DevTools voor agents met de vaardigheden van Modern Web Guidance om uw webontwikkelingsworkflow te verbeteren. Voer realtime prestatieaudits uit, inspecteer toegankelijkheidsstructuren en leg consolelogs vast – en pas vervolgens automatisch nauwkeurige, moderne webcodecorrecties toe.

Meer informatie

Leer hoe je kunt bijdragen

Heb je ideeën over hoe we Modern Web Guidance kunnen verbeteren? Ontdek hoe je kunt bijdragen!

Meer informatie