// Guidance for working on the Lit-based frontend, Shoelace widgets, and client-side routing in chromium-dashboard.
How to add a new field to a feature across the entire stack (Data, API, and Frontend).
Guidance for working on the Flask-based backend, NDB Datastore, and OpenAPI integrations in chromium-dashboard.
Guidance for local verification of changes to ensure they pass CI checks (linting, type checking, testing, and building).
Guidance for running, debugging, and updating Playwright end-to-end tests in chromium-dashboard.
| name | chromestatus-frontend |
| description | Guidance for working on the Lit-based frontend, Shoelace widgets, and client-side routing in chromium-dashboard. |
This skill provides context and guidelines for developing the frontend of the chromium-dashboard project.
client-src/elements/: Contains Lit web components.client-src/js-src/: General JavaScript source files, including cs-client.js.client-src/css/: CSS files and Lit style modules.static/dist/: Output directory for bundled assets.templates/: Jinja2 templates for the initial page load skeleton.client-src/elements/. Follow the naming convention chromedash-*.js.static/shoelace/assets/icons.cs-client.js or the OpenAPI context consumer for making server requests.css tagged templates for component styles. Leverage variables from the design system where possible.pages/ directory on the backend, even if it contains old templates. All newer frontend logic should reside in client-src/.chromedash-app.js (within setUpRoutes) and create the corresponding Lit component.make watch during development for live-reloading or make build for a final build.