| name | chromestatus-frontend |
| description | Guidance for working on the Lit-based frontend, Shoelace widgets, and client-side routing in chromium-dashboard. |
Frontend Development Skill
This skill provides context and guidelines for developing the frontend of the chromium-dashboard project.
Core Technologies
- Lit: The primary library for building web components.
- Shoelace: A collection of high-quality UI widgets used throughout the application.
- page.js: A micro client-side router for SPA navigation.
- Rollup: Used for bundling and code-splitting JavaScript.
Key Directories
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.
Guidelines
- Component Development: Create new components in
client-src/elements/. Follow the naming convention chromedash-*.js.
- Icons: Prefer Material Icons. If using Bootstrap icons via Shoelace, ensure they are copied to
static/shoelace/assets/icons.
- API Interaction: Use the client wrapper in
cs-client.js or the OpenAPI context consumer for making server requests.
- Styling: Use Lit's
css tagged templates for component styles. Leverage variables from the design system where possible.
- Legacy Code: Do not add new code or components to the legacy
pages/ directory on the backend, even if it contains old templates. All newer frontend logic should reside in client-src/.
Common Tasks
- Adding a New Page: Register the route in
chromedash-app.js (within setUpRoutes) and create the corresponding Lit component.
- Building assets: Use
make watch during development for live-reloading or make build for a final build.
