Files
cve-dashboard/docs/design-system-redesign/SKILL.md
root 27192dd69f 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.
2026-04-29 14:20:23 +00:00

1.8 KiB
Raw Permalink Blame History

name, description, user-invocable
name description user-invocable
steam-security-design 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. 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.