git:20260920.d5fedf5 to git:20260923.2988db2

---

name: web-frontend

description: "Build accessible browser UIs with HTML, CSS, JavaScript, and Tailwind; check compatibility."

license: MIT

metadata:

kind: task

author: Médéric HURIER (Fmind)

source: github.com/fmind/dot/tree/main/skills/web-frontend

created: "2026-09-03"

---

# Web Frontend

Build browser interfaces with native HTML, CSS, and JavaScript. Preserve an existing frontend stack and use Tailwind when the project selects it. [python-web](../python-web/SKILL.md) owns server applications; [product-design-review](../product-design-review/SKILL.md) owns interface critique, and [playwright](../playwright/SKILL.md) owns browser automation.

## 1. Retrieve Guidance

1. **Search guidelines**: Query curated web platform recipes and modern practices using the CLI:

```bash

```

1. **Fetch specific pattern**: Retrieve detailed implementation guidelines and browser baselines by guide identifier:

```bash

```

## 2. Adoption Workflow

1. **Prefer web platform primitives**: Prioritize native elements (`<dialog>`, `<details>`, popover API, subgrid, container queries, CSS nesting) over third-party component libraries or custom script wrappers.

1. **Verify baseline compatibility**: Check baseline availability and browser support before adopting newly standardized APIs; fall back progressively without blocking core experiences.

1. **Build Python web assets**: use the [standalone Tailwind workflow](references/tailwind.md) when the project selects Tailwind; preserve an existing asset pipeline. `tailwindcss` owns CSS compilation, while `npx` runs the upstream guidance CLI above.

1. **Audit with DevTools**: Validate rendering, performance, and accessibility against live browser sessions using [chrome-devtools](../chrome-devtools/SKILL.md) and [quality-assurance](../quality-assurance/SKILL.md).

## Gotchas

- **Preview status**: Modern Web Guidance is an evolving catalog; always verify API signatures and baseline status against authoritative MDN documentation.

- **Version refresh**: the CLI example is review-pinned; verify the latest stable npm release eligible under the configured release-age policy and update both commands together after qualification. Retain the working pin while a newer release is inside npm's cooldown; do not disable that policy to make a freshness check pass.

- **Application integration**: keep browser behavior in native HTML, CSS, and JavaScript; use [litestar](../python-web/references/litestar/GUIDE.md) or [django](../python-web/references/django/GUIDE.md) for server rendering, APIs, and application tests.

- **Progressive enhancement**: Native dialogs, popovers, and top-layer elements require careful focus and accessibility management; verify keyboard navigation.

## Official Skills

Upstream: `GoogleChrome/modern-web-guidance`; follow the shared [vendor-skill policy](../agent-project/references/vendor-skills.md) and select the relevant platform guidance.

## Documentation

- [Modern Web Guidance](https://developer.chrome.com/docs/modern-web-guidance) · [GoogleChrome/modern-web-guidance](https://github.com/GoogleChrome/modern-web-guidance)

- Releases: [guidance package metadata](https://registry.npmjs.org/modern-web-guidance) · [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss/releases)

- Companion skills: [python-stack](../python-stack/references/foundation/GUIDE.md), [chrome-devtools](../chrome-devtools/SKILL.md), [playwright](../playwright/SKILL.md), [research-brief](../implementation-plan/references/research-brief.md).