with one click
webstatus-frontend
// Use when modifying the frontend SPA, working with TypeScript, Lit web components, Shoelace components, or frontend tests.
// Use when modifying the frontend SPA, working with TypeScript, Lit web components, Shoelace components, or frontend tests.
Use when creating or modifying Go backend API endpoints, modifying Spanner database schemas, or working with OpenAPI and Spanner mappers.
Use when working with the webstatus notification pipeline, event producer, push delivery, or push workers (e.g., Email, Webhooks), and Pub/Sub subscribers.
Use when modifying the ANTLR search grammar, adding new search terms, or working with the query parser and builder.
Use when writing, modifying, or debugging Playwright end-to-end (E2E) tests for webstatus.dev.
Use when working on Go data ingestion workflows, scheduled Cloud Run jobs, or adding new scrapers for BCD, WPT, or other data sources.
Use when upgrading toolchain versions (Go, Node.js, Terraform, Playwright) or updating the DevContainer and Github CI configurations.
| name | webstatus-frontend |
| description | Use when modifying the frontend SPA, working with TypeScript, Lit web components, Shoelace components, or frontend tests. |
This skill provides architectural guidance and conventions for the frontend/ directory in webstatus.dev.
<webstatus-services-container>).make node-openapi).For a technical breakdown of the Lit component hierarchy, frontend identity flows, and theming patterns, see references/architecture.md.
LitElement.webstatus-app provides the shell.shared-css.ts. DO leverage Shadow DOM encapsulation and use composition with slots for reusable layout patterns.WebstatusServicesContainer to ensure a stable context hierarchy.WebstatusHeader) don't reliably subscribe to context changes due to slotting or complex rendering lifecycles.--sl-color-neutral-0) for themeable properties to ensure cross-browser inheritance (Firefox/WebKit) without relying on unsupported selectors like :host-context.--sl-) in component stylesheets. DO use custom variables defined in _theme-css.ts (e.g., --color-background, --table-padding) that act as a project-specific abstraction layer.npm run test -w frontend.make node-lint to run ESLint and Prettier for the frontend code, or make lint-fix to attempt auto-fixing. make style-lint is also available for CSS.credentialGetter) that can be overridden with a Sinon stub.querySelector in tests (e.g. querySelector<HTMLSlotElement>(...)) for type safety.WebstatusThemeService toggles the .sl-theme-dark class on the document.documentElement.--sl-color-neutral-0) automatically switch values based on the root class. Our custom theme variables in _theme-css.ts should derive from these semantic Shoelace variables to inherit fixed values across Shadow DOM boundaries consistently._theme-css.ts. Mapping these to Shoelace variables should only happen in the central theme file. This ensures that a library or color palette change can be managed in one place.:host-context for theme overrides as it lacks support in Firefox and WebKit. Use root-inherited variables instead.If a frontend unit test is timing out or failing mysteriously, Web Test Runner's console output is often unhelpful.
npm run test:watch -w frontend in their own terminal.http://localhost:8000/) in their web browser and inspect the developer console/DOM to see where the test is getting stuck.web-test-runner.config.mjs to fix timeout issues. Address the root cause of the hang instead.When making significant architectural changes to the frontend or introducing new state management patterns:
GEMINI.md.docs/ARCHITECTURE.md if the system boundaries change.