Menu
Guidance for working on the Lit-based frontend, Shoelace widgets, and client-side routing in chromium-dashboard.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Guidance for working on the Flask-based backend, NDB Datastore, and OpenAPI integrations in chromium-dashboard.
How to add a new field to a feature across the entire stack (Data, API, and Frontend).
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.