# Modern Web Guidance

> Herramienta de búsqueda de buenas prácticas de desarrollo web moderno. Ejecútala SIEMPRE primero en tareas de HTML/CSS y JS de cliente; no la omitas: las APIs web evolucionan rápido y los pesos de entrenamiento contienen patrones obsoletos.

Fuente: https://skillsagentes.com/skills/googlechrome/modern-web-guidance/modern-web-guidance
Markdown: https://skillsagentes.com/skills/googlechrome/modern-web-guidance/modern-web-guidance.md

Repositorio: https://github.com/GoogleChrome/modern-web-guidance
Autor: GoogleChrome
Licencia: Apache-2.0
Actualizado: hace 5 días
Coste de contexto: 243 tok instalada, 1.7k tok al activarse, 256.8k tok con todos los archivos del bundle
Bundle: 145 archivos, 1003 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add GoogleChrome/modern-web-guidance --skill modern-web-guidance --agent claude-code
# Cursor
npx -y skills add GoogleChrome/modern-web-guidance --skill modern-web-guidance --agent cursor
# Codex
npx -y skills add GoogleChrome/modern-web-guidance --skill modern-web-guidance --agent codex
# Gemini CLI
npx -y skills add GoogleChrome/modern-web-guidance --skill modern-web-guidance --agent gemini
# Windsurf
npx -y skills add GoogleChrome/modern-web-guidance --skill modern-web-guidance --agent windsurf
# Cline
npx -y skills add GoogleChrome/modern-web-guidance --skill modern-web-guidance --agent cline
```

## Qué hace

- Busca y recupera guías de buenas prácticas para casos concretos de desarrollo web mediante `npx modern-web-guidance`.
- Obliga a consultar patrones estandarizados antes de crear componentes o implementar features de frontend.
- Verifica que el código generado cumpla las guías recuperadas y sus fallbacks según el soporte de navegadores.
- Evita soluciones ad hoc y dependencias grandes cuando ya existe un patrón recomendado.
- Se ejecuta primero en toda tarea de HTML/CSS o JS de cliente, no solo cuando se le pide.

## Cuándo usarla

- Al empezar a implementar cualquier característica web.
- Antes de crear un componente nuevo, para comprobar si ya existe un patrón estandarizado.
- Para tareas de UI/layout, scroll/motion, rendimiento CWV, APIs del sistema o adaptación en frameworks.
- Para evitar implementar soluciones ad hoc o cargar dependencias grandes innecesariamente.

## Cuándo no

- Backend: SQL de bases de datos, ORMs o rutas de API Express.
- Pipelines: despliegue CI/CD, Docker o GitHub Actions.
- Scripts locales genéricos (Python/Go), ESLint o Git.

## Qué la activa

- "Quiero implementar un modal con anchor positioning y backdrop-filter; ¿cuál es la práctica recomendada?"
- "¿Cómo optimizo el LCP de las imágenes con Fetch Priority?"
- "Necesito animaciones de scroll con scroll-driven animations y view transitions."
- "¿Existe un patrón estándar para container queries en React?"
- "Cómo hago un popover accesible sin cargar una librería."

## Antes de instalar

- Requiere Node.js con `npx` (o `pnpx` con pnpm), acceso de red para ejecutar `npx -y modern-web-guidance@latest`, y en entornos restringidos hay que solicitar permiso para ese comando; en Windows usa `npx.cmd`.
- Necesita en el PATH: npx

## Archivos

- SKILL.md — 7 KB
- guides/accessibility/accessibility.md — 24 KB
- guides/accessibility/accessible-error-announcement.md — 7 KB
- guides/built-in-ai/language-detection.md — 4 KB
- guides/built-in-ai/language-model.md — 16 KB
- guides/built-in-ai/prompt-api.md — 16 KB
- guides/built-in-ai/summarizer.md — 6 KB
- guides/built-in-ai/translator.md — 7 KB
- guides/css/animate-to-intrinsic-sizes.md — 5 KB
- guides/css/calculate-with-intrinsic-sizes.md — 10 KB
- guides/css/child-state-based-styling.md — 5 KB
- guides/css/content-based-styling.md — 5 KB
- guides/css/css-layout.md — 20 KB
- guides/css/css.md — 27 KB
- guides/css/design-token-reactivity.md — 6 KB
- guides/css/dynamic-sibling-styling.md — 4 KB
- guides/css/fluid-scaling.md — 3 KB
- guides/css/individual-transform-properties.md — 4 KB
- guides/css/overflow-clipping-control.md — 8 KB
- guides/css/reduce-style-repetition.md — 4 KB
- guides/css/size-aware-styling.md — 3 KB
- guides/css/style-parent-with-has.md — 6 KB
- guides/css/usage-aware-component-variations.md — 5 KB
- guides/forms/animated-select-picker.md — 8 KB
- guides/forms/autofill-address-form.md — 4 KB
- guides/forms/autofill-highlight-inputs.md — 2 KB
- guides/forms/autofill-payment-form.md — 8 KB
- guides/forms/autofill-sign-in-form.md — 10 KB
- guides/forms/autofill-sign-up-form.md — 11 KB
- guides/forms/brand-consistent-forms.md — 8 KB
- guides/forms/branded-select-styling.md — 5 KB
- guides/forms/custom-select-picker-layouts.md — 5 KB
- guides/forms/form-fields-automatically-fit-contents.md — 6 KB
- guides/forms/forms.md — 14 KB
- guides/forms/ime-safe-enter-submit.md — 5 KB
- guides/forms/required-field-feedback.md — 7 KB
- guides/forms/rich-media-picker.md — 7 KB
- guides/forms/select-menu-interaction.md — 5 KB
- guides/forms/validate-input-after-interaction.md — 9 KB
- guides/html/html.md — 18 KB
- guides/js/calculate-event-differentials.md — 4 KB
- guides/js/capture-location-agnostic-data.md — 4 KB
- guides/js/coordinate-global-events.md — 3 KB
- guides/js/format-human-readable-durations.md — 4 KB
- guides/js/manage-recurring-intervals.md — 3 KB
- guides/js/model-partial-time-concepts.md — 4 KB
- guides/js/stabilize-reactive-state.md — 3 KB
- guides/js/support-global-calendar-systems.md — 6 KB
- guides/performance/batch-analytics-events.md — 6 KB
- guides/performance/break-up-long-tasks.md — 2 KB
- guides/performance/calculate-total-foreground-time.md — 3 KB
- guides/performance/conditional-async-dependencies.md — 4 KB
- guides/performance/defer-rendering-heavy-content.md — 6 KB
- guides/performance/defer-work-until-scroll-ends.md — 3 KB
- guides/performance/deliver-optimized-decorative-images.md — 3 KB
- guides/performance/deprioritize-background-fetches.md — 2 KB
- guides/performance/detect-initial-visibility-state.md — 5 KB
- guides/performance/efficient-background-processing.md — 5 KB
- guides/performance/faster-spa-view-transitions.md — 3 KB
- guides/performance/flicker-free-client-side-ab-testing.md — 8 KB
- guides/performance/full-session-analytics.md — 6 KB
- guides/performance/identify-heavy-scripts.md — 4 KB
- guides/performance/identify-inp-causes.md — 5 KB
- guides/performance/improve-next-page-load-performance.md — 7 KB
- guides/performance/interactions-in-complex-layouts.md — 3 KB
- guides/performance/optimize-image-priority.md — 4 KB
- guides/performance/optimize-preload-priority.md — 3 KB
- guides/performance/optimize-script-priority.md — 3 KB
- guides/performance/performance.md — 20 KB
- guides/performance/resolution-optimized-pseudo-elements.md — 2 KB
- guides/performance/schedule-tasks-by-priority.md — 2 KB
- guides/performance/sequence-distributed-events.md — 3 KB
- guides/privacy/privacy.md — 11 KB
- guides/security/passkey-authentication.md — 10 KB
- guides/security/passkey-conditional-create.md — 7 KB
- guides/security/passkey-management.md — 9 KB
- guides/security/passkey-reauthentication.md — 5 KB
- guides/security/passkey-registration.md — 9 KB
- guides/security/passkeys.md — 4 KB
- guides/security/security.md — 25 KB
- guides/ui-atoms/carousel-slide-effects.md — 8 KB
- guides/ui-atoms/component-specific-light-dark-theme.md — 9 KB
- guides/ui-atoms/position-aware-tooltips.md — 6 KB
- guides/ui-atoms/pull-to-reveal.md — 5 KB
- guides/ui-atoms/resilient-context-menus-and-nested-dropdowns.md — 6 KB
- guides/ui-atoms/scroll-position-aware-elements.md — 4 KB
- guides/ui-atoms/scroll-progress-indicator.md — 7 KB
- guides/ui-atoms/scrollability-affordance-hints.md — 4 KB
- guides/ui-atoms/shrinking-header-on-scroll.md — 6 KB
- guides/ui-atoms/state-aware-sticky-headers.md — 6 KB
- guides/ui-behaviors/anchor-positioning-tab-underline.md — 3 KB
- guides/ui-behaviors/animate-element-entry-exit.md — 5 KB
- guides/ui-behaviors/animate-to-from-top-layer.md — 7 KB
- guides/ui-behaviors/carousel-snap-highlights.md — 6 KB
- guides/ui-behaviors/consistent-cross-document-transitions.md — 12 KB
- guides/ui-behaviors/cross-document-transitions.md — 4 KB
- guides/ui-behaviors/custom-button-actions.md — 7 KB
- guides/ui-behaviors/declarative-dialog-popover-control.md — 10 KB
- guides/ui-behaviors/directional-navigation-transitions.md — 5 KB
- guides/ui-behaviors/dynamic-sibling-animations.md — 3 KB
- guides/ui-behaviors/group-element-transitions.md — 5 KB
- guides/ui-behaviors/highlight-text-ranges.md — 5 KB
- guides/ui-behaviors/interactive-content-reveal.md — 5 KB
- guides/ui-behaviors/interest-triggered-action-previews.md — 4 KB
- guides/ui-behaviors/interest-triggered-tooltips.md — 8 KB
- guides/ui-behaviors/light-dismiss-a-dialog.md — 4 KB
- guides/ui-behaviors/move-dom-element-without-losing-state.md — 3 KB
- guides/ui-behaviors/parallax-scroll-effects.md — 9 KB
- guides/ui-behaviors/persistent-top-layer-ui.md — 2 KB
- guides/ui-behaviors/physics-based-easing.md — 6 KB
- guides/ui-behaviors/platform-controls-dismiss-dialog.md — 3 KB
- guides/ui-behaviors/same-document-transitions.md — 8 KB
- guides/ui-behaviors/scroll-entry-exit-effects.md — 8 KB
- guides/ui-behaviors/scroll-snap-realtime-feedback.md — 7 KB
- guides/ui-behaviors/scroll-snap-state-sync.md — 4 KB
- guides/ui-behaviors/scroll-target-on-load.md — 3 KB
- guides/ui-behaviors/scrollytelling.md — 8 KB
- guides/ui-behaviors/search-hidden-content.md — 7 KB
- guides/ui-behaviors/swipe-to-remove.md — 27 KB
- guides/ui-components/navigation-drawer.md — 16 KB
- guides/ui-components/persistent-app-tours.md — 5 KB
- guides/ui-components/persistent-toast-notifications.md — 4 KB
- guides/ui-components/progress-ring.md — 6 KB
- guides/ui-components/scrollspy.md — 6 KB
- guides/ui-components/spinner.md — 5 KB
- guides/ui-components/stack-drill-down.md — 33 KB
- guides/visual-design/adapt-scrollbar-to-contrast-preferences.md — 4 KB
- guides/visual-design/apply-webgl-shaders.md — 10 KB
- guides/visual-design/complex-shapes.md — 4 KB
- guides/visual-design/customize-scrollbar-color-and-thickness.md — 2 KB
- guides/visual-design/dark-mode.md — 15 KB
- guides/visual-design/export-html-media-from-canvas.md — 11 KB
- guides/visual-design/expose-canvas-content-to-browser-features.md — 15 KB
- guides/visual-design/improve-text-layout-and-legibility.md — 5 KB
- guides/visual-design/interactive-content-in-3d-scenes.md — 14 KB
- guides/visual-design/precise-text-alignment.md — 5 KB
- guides/visual-design/prevent-text-wrapping.md — 2 KB
- guides/visual-design/shaped-cutouts.md — 7 KB
- guides/visual-design/soft-edge-content-fade.md — 3 KB
- guides/visual-design/visually-stable-font-fallbacks.md — 3 KB
- guides/visual-design/visually-stable-mixed-fonts.md — 3 KB
- guides/visual-design/visually-texture-content.md — 4 KB
- guides/webmcp/agentic-forms.md — 5 KB
- guides/webmcp/agentic-javascript-tools.md — 4 KB
- guides/webmcp/webmcp.md — 4 KB

## SKILL.md

Reproducido tal cual desde GoogleChrome/modern-web-guidance bajo Apache-2.0. Esta sección es el documento original y está en inglés.

# Modern Web Guidance

A skill to search for specific web development use cases and retrieve their corresponding best practice guides.

## When to use

Must use this skill:
- At the **start** of implementing any web feature.
- Before creating a new component, to check if a standardized pattern already exists.
- To avoid implementing ad-hoc solutions or loading large dependencies unnecessarily.

## Usage Instructions

### Step 1. Search Use Cases

Search with an action-oriented query summarizing what you want to achieve using the `search` command. Run `modern-web-guidance` directly with `npx`.

```sh
npx -y modern-web-guidance@latest search "<query>" --skill-version 2026_09_04-7de96777
```

**Example Output**:
```json
[
  {
    "id": "optimize-image-priority",
    "description": "Optimize the loading priority of Largest Contentful Paint (LCP) candidate images.",
    "category": "performance",
    "featuresUsed": [ "Fetch priority" ],
    "tokenCount": 985,
    "similarity": 0.7289
  },
  {
    "id": "defer-rendering-heavy-content",
    "description": "Reduce rendering times in content-heavy web pages by deferring rendering for offscreen content.",
    "category": "performance",
    "featuresUsed": [ "content-visibility", "hidden=\"until-found\"" ],
    "tokenCount": 1250,
    "similarity": 0.6961
  }
]
```

> **Note**: If search results are vague, return no matches, or show low similarity scores, run the `list` command to browse all guides:
> ```sh
> npx -y modern-web-guidance@latest list
> ```

---

### Step 2. Retrieve Best Practices

Once you have a relevant `id` from the search results, call this script using the `retrieve` command to get the full guide. You can pass multiple IDs separated by commas.

```sh
npx -y modern-web-guidance@latest retrieve "<id>"
```

If the output is truncated, you must repeat the command but redirect to a file and read that file.

**Example Output**:
`The markdown content of the guide describing implementation steps...`

---

### Step 3. Verify Guidance Compliance

When generating or modifying code, cross-check the implementation against the retrieved guide before concluding:
- **Applicable Guidance & Fallbacks**: Ensure the relevant modern patterns and necessary fallback strategies from the guide are correctly applied, without forcing unrequested features.
- **Task Fulfillment**: Confirm that the implementation fully satisfies the user's request.

## Using npx / pnpx

- Prefer `pnpx` over `npx` if `pnpm` is available (note: `pnpx` does not use the `-y` flag).
- When requesting tool permissions, allowlist `npx -y modern-web-guidance@latest *` specifically (or `pnpx modern-web-guidance@latest *`), never bare `npx *` or `pnpx *`.
- IMPORTANT: on Windows, using `npx` may fail. Use `npx.cmd ...` instead.
- Fetching and running `modern-web-guidance` requires outbound network access. If running in a sandboxed, permission-gated, or approval-based environment (e.g., Codex, Claude Code), **proactively request approval/allowlisting for the command with network access BEFORE executing it the first time**, avoiding sandbox network timeouts.
- In sandboxed environments where `~/.npm` is read-only or restricted, set `NPM_CONFIG_CACHE=/tmp/npm-cache`.
- If the command hangs due to being offline, try running again in offline mode: `npx --offline …`.
- The `--skill-version` flag is used to determine if this SKILL.md is out of date. If it is, a warning message is logged to stderr.

## Guidelines

- Always search **first** to find the most relevant guides.
- These guides are usually framework-agnostic; adapt them correctly to your setup.
- Do not hallucinate guides or ignore them; they represent the preferred local standard for the user's project.

## Interpreting Browser Support & Fallbacks

* **Default Behavior**: All guides assume **Baseline Widely available** features are safe to use without fallbacks. For features that are not Baseline widely available, you **MUST** follow the fallback recommendations in the guide, unless the user has specified a custom browser support policy.
* **Custom Policies**: If the user has already defined explicit browser support requirements, use the browser compatibility data in the guide to determine if a fallback can be safely ignored.
  - For Baseline YYYY targets, a feature satisfies this target if its "Baseline since" date is <= YYYY.
  - **Policy Examples**:
    - _"Do not implement feature fallbacks."_ (for exploratory prototypes of the cutting-edge web)
    - _"Safari 17.4+"_ (for internal tools targeting macOS or Tauri-based desktop apps)
    - _"Never recommend or implement polyfills; if a Baseline Newly Available feature is required for core functionality, provide a lightweight custom fallback or redesign the approach."_ (to minimize bundle size and avoid technical debt)
    - _"Assume a modern execution environment where Baseline Newly Available features can be used natively, provided they are strictly feature-detected and degrade gracefully."_ (for progressive enhancement strategies)
* **Reactive Policy Discovery**: Watch for environmental cues to suggest documenting a policy in CLAUDE.md or AGENTS.md. Suggest this if the developer:
  - Mentions building for a restricted runtime (e.g., Electron or Tauri).
  - Explicitly excludes specific targets (e.g., "we don't support Desktop Chrome").
  - Expresses hesitation about polyfill complexity, bundle size, or performance cost.
  - Questions if a feature is safe to use without fallbacks.

  No defined policy format. This is an example: `**Browser Support:** Allow Newly Available features, but only adopt custom fallback code that adds <= 20 lines and does not require external dependencies.`

## Dónde encaja

- Categoría: [Herramientas para desarrolladores](https://skillsagentes.com/categorias/herramientas-desarrollo.md) — Skills que cambian cómo tu agente escribe, revisa y despliega código.
- Creador: [GoogleChrome](https://skillsagentes.com/creators/googlechrome.md) — 2 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Chrome Extensions](https://skillsagentes.com/skills/googlechrome/modern-web-guidance/chrome-extensions.md): Crea y publica extensiones de Chrome con las mejores prácticas de Manifest V3: crear, modificar, depurar o entender extensiones, add-ons o APIs, y preparar su publicación en Chrome Web Store (permisos, rechazos, privacidad).

## Skills relacionadas

- [Domain Modeling](https://skillsagentes.com/skills/mattpocock/skills/domain-modeling.md): Construye y afila el modelo de dominio de un proyecto. Úsalo para fijar la terminología o un lenguaje ubicuo, registrar una decisión arquitectónica, o cuando otro skill necesita mantener el modelo.
- [Code Review](https://skillsagentes.com/skills/mattpocock/skills/code-review.md): Revisa los cambios desde un punto fijo por dos ejes — Standards (¿sigue los estándares del repo?) y Spec (¿hace lo que pedía el issue?) — en sub-agentes paralelos, y los reporta lado a lado.
- [Implement](https://skillsagentes.com/skills/mattpocock/skills/implement.md): Implementa una pieza de trabajo a partir de una spec o un conjunto de tickets.
- [Improve Codebase Architecture](https://skillsagentes.com/skills/mattpocock/skills/improve-codebase-architecture.md): Escanea un código en busca de oportunidades de deepening, las presenta como un informe HTML visual, y luego te interroga sobre la que elijas.
- [Setup Ts Deep Modules](https://skillsagentes.com/skills/mattpocock/skills/setup-ts-deep-modules.md): Conecta dependency-cruiser a un repo TypeScript para que cada paquete sea un módulo profundo: implementación oculta en subcarpetas, alcanzable solo a través de sus entry points.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)