sapphire-design
Sapphire Design System (Lightweight Approximation)
This skill teaches you how to build UI that closely matches Danske Bank's Sapphire design system using only CSS custom properties and plain HTML/CSS patterns. No npm packages required.
The real Sapphire system uses @danske/sapphire-react, @danske/sapphire-css, @danske/sapphire-design-tokens, and @danske/sapphire-icons. This skill extracts the essential design tokens, component patterns, and icon catalog so you can replicate the look and feel in any framework (React, Vue, Svelte, plain HTML, etc.).
Quick Start
Every Sapphire-styled page needs two things:
- A theme class on a root element - Add
class="sapphire-theme-default"to your<body>or root container - The design tokens CSS - Either link to the tokens stylesheet or inline the CSS custom properties
The tokens define everything: colors, spacing, typography, radii, shadows, and control sizes. Components are built by referencing these tokens, which means your entire UI stays consistent and theme-switchable.
<body class="sapphire-theme-default">
<!-- All Sapphire-styled content goes here -->
</body>
More from thomasrohde/marketplace
drawio diagram creation
This skill should be used when the user asks to "create a diagram", "make a flowchart", "generate a .drawio file", "draw.io diagram", "diagrams.net", "architecture diagram", "sequence diagram", "ER diagram", "class diagram", "network diagram", "org chart", "workflow diagram", "UML diagram", "ArchiMate diagram", "C4 diagram", "C4 model", "enterprise architecture", or mentions "drawio", "mxGraph", or diagram visualization. Provides comprehensive knowledge for creating production-ready DrawIO XML files.
38archimate model quality
This skill should be used when the user asks about "ArchiMate naming conventions", "model quality", "EA smells", "anti-patterns", "ArchiMate best practices", "model review", "abstraction levels", "viewpoints", "model organization", or needs guidance on creating high-quality ArchiMate models.
20archimate relationships
This skill should be used when the user asks about "ArchiMate relationships", "composition vs aggregation", "realization relationship", "serving relationship", "assignment relationship", "triggering", "flow relationship", "access relationship", "influence", "specialization", "cross-layer relationships", or needs help connecting ArchiMate elements correctly.
18archimate modeling fundamentals
This skill should be used when the user asks about "ArchiMate elements", "which element to use", "ArchiMate layers", "business layer", "application layer", "technology layer", "motivation layer", "strategy layer", "active structure", "passive structure", "behavior elements", or needs help selecting the correct ArchiMate element type for modeling enterprise architecture.
16archimate architecture patterns
This skill should be used when the user asks about "ArchiMate patterns", "microservices in ArchiMate", "cloud architecture ArchiMate", "API gateway pattern", "event-driven architecture", "container architecture", "Kubernetes ArchiMate", "data architecture pattern", "security architecture", "capability mapping", "value stream", or needs to model modern architecture patterns in ArchiMate.
16jarchi scripting
This skill should be used when the user asks to "create a jArchi script", "write an Archi script", "automate ArchiMate", "export from Archi", "query ArchiMate elements", "create ArchiMate views", "run Archi headlessly", "Archi CLI", "batch process ArchiMate model", or mentions "jArchi", ".ajs script", "Archi automation", or ArchiMate scripting. Provides comprehensive jArchi API knowledge and CLI automation support.
13