chromestatus-frontend

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.