39 lines
1.8 KiB
Markdown
39 lines
1.8 KiB
Markdown
---
|
|
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.
|