WIP: Dashboard redesign — design system overhaul and component updates

Frontend redesign in progress: updated styles, layout, and components
across all pages to align with new design system. Includes Jira API
compliance specs, property tests, and load test script.
This commit is contained in:
root
2026-04-29 14:20:23 +00:00
parent 37119b9c8a
commit 27192dd69f
78 changed files with 9902 additions and 1368 deletions

View File

@@ -0,0 +1,23 @@
---
name: steam-security-design
description: Use this skill to generate well-branded interfaces and assets for the STEAM Security Dashboard (NTS-AEO vulnerability management workbench), either for production or throwaway prototypes/mocks. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
user-invocable: true
---
Read the README.md file within this skill, and explore the other available files.
If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. Always pull tokens from `colors_and_type.css` and reuse the primitives in `ui_kits/cve-dashboard/Primitives.jsx` (Button, SeverityBadge, SlaPill, GroupBadge, Field/Input/Select, Card, EmptyState, Icon) before inventing.
If working on production code, copy assets and read the rules here to become an expert in designing with this brand.
If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts _or_ production code, depending on the need.
## Quick reference
- **Visual vibe:** dark tactical intelligence console. Slate base, sky-blue accent, severity colours used like signal flags. Information density over breathing room.
- **Type:** Outfit (UI), JetBrains Mono (data, IDs, code).
- **No emoji, no gradients, no illustration, no marketing copy.** This is an operations tool, not a brand site.
- **Severity is fixed:** Critical→Red · High→Amber · Medium→Sky · Low→Emerald. Do not remap.
- **Icons:** lucide-react line style, 1.52px stroke, currentColor.
- **Six pages exist:** Home, Reporting, Compliance, Knowledge Base, Exports, Admin Panel.
- **Four user groups:** Admin, Standard_User, Leadership, Read_Only.