bmc_hub/.github/skills/gui-starter/SKILL.md

name	description
gui-starter	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.