chromestatus-frontend - SKILL.md Agent Skill

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.

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.

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.

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/.

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.