---
name: gui-starter
description: "Use when building or updating BMC Hub GUI pages, templates, layout, styling, dark mode toggle, responsive Bootstrap 5 UI, or Nordic Top themed frontend components."
---

# BMC Hub GUI Starter

## Purpose
Use this skill when implementing or refining frontend UI in BMC Hub.

## Project UI Rules
- Follow the Nordic Top style from `docs/design_reference/`.
- Keep a minimalist, clean layout with card-based sections.
- Use Deep Blue as default primary accent: `#0f4c75`.
- Support dark mode with a visible toggle.
- Use CSS variables so accent colors can be changed dynamically.
- Build mobile-first with Bootstrap 5 grid utilities.

## Preferred Workflow
1. Identify existing template/page and preserve established structure when present.
2. Define or update theme tokens as CSS variables (light + dark).
3. Implement responsive layout first, then enhance desktop spacing/typography.
4. Add or maintain dark mode toggle logic (persist preference in localStorage when relevant).
5. Reuse patterns from `docs/design_reference/components.html`, `docs/design_reference/index.html`, `docs/design_reference/customers.html`, and `docs/design_reference/form.html`.
6. Validate visual consistency and avoid introducing one-off styles unless necessary.

## Implementation Guardrails
- Do not hardcode colors repeatedly; map them to CSS variables.
- Do not remove dark mode support from existing pages.
- Do not break existing navigation/topbar behavior.
- Avoid large framework changes unless explicitly requested.
- Keep accessibility basics in place: color contrast, visible focus states, semantic HTML.

## Deliverables
When using this skill, provide:
- Updated frontend files (HTML/CSS/JS) with concise, intentional styling.
- A short summary of what changed and why.
- Notes about any remaining UI tradeoffs or follow-up refinements.