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:
23
docs/design-system-redesign/SKILL.md
Normal file
23
docs/design-system-redesign/SKILL.md
Normal 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.5–2px stroke, currentColor.
|
||||
- **Six pages exist:** Home, Reporting, Compliance, Knowledge Base, Exports, Admin Panel.
|
||||
- **Four user groups:** Admin, Standard_User, Leadership, Read_Only.
|
||||
Reference in New Issue
Block a user