apply-mantel-styles_skill

Overview

This skill provides concise, actionable guidelines for applying Mantel brand styles to diagrams and frontend components. It standardises colour usage, component rules, and diagram class mappings so visuals stay consistent with Mantel identity. Use it to produce Mermaid, PlantUML, and CSS-aligned outputs that match brand semantics.

How this skill works

The skill inspects requested visuals and returns style-ready snippets and recommendations using Mantel colours and semantic mappings. It maps UI elements and diagram classes to palette colours, suggests hover/opacity rules, and enforces mermaid and PlantUML constraints. It outputs clear class names, CSS variables, and usage notes for immediate copy-paste into diagrams or frontend code.

When to use it

• Creating architecture or flow diagrams that must follow Mantel branding
• Designing frontend components, buttons, forms, navigation, cards or alerts
• Preparing Mermaid or PlantUML diagrams for documentation or presentations
• Reviewing visuals for consistent colour semantics and accessibility
• Converting existing visuals to Mantel's palette and interaction rules

Best practices

• Follow the colour hierarchy: Ocean primary, Sky Blue secondary, Flamingo for accents, Deep Ocean for text, Cloud for backgrounds
• Use tints and alpha values of brand colours instead of introducing new colours
• Keep semantic meanings consistent across projects (e.g., Flamingo = warnings/CTAs)
• Use defined Mermaid class names and PlantUML variables to avoid ad-hoc colours
• Darken or lighten hover states by 10–15% and use rgba hex alpha values for controlled transparency
• Avoid round brackets in Mermaid labels and use <br> for line breaks where needed

Example use cases

• Generate Mermaid classDef blocks for a service diagram using Mantel classes like process, api, data
• Provide a PlantUML header with colour defines and skinparam settings for activity and class diagrams
• Produce :root CSS variables and button/form styles for a frontend component library
• Audit a slide deck or docs diagrams and supply corrected class names and colour hex values
• Create a quick style guide excerpt for engineers that maps UI states to brand colours