skills.rest
sammcj
sammcjCOMMUNITY
Explore all skills by this author →
Website𝕏@s_mcleodGitHub

apply-mantel-styles

Apply Mantel brand colors and Mermaid theme definitions to diagrams and frontend components.

155|25|Updated Apr 27, 2025
Search Tags:#branding#frontend#mermaid#css#styling#diagrams#plantuml
One-click install
npx skills add https://github.com/sammcj/agentic-coding --skill apply-mantel-styles
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apply-mantel-styles
Source: https://github.com/sammcj/agentic-coding/tree/main/Claude/skills/apply-mantel-styles
Command: npx skills add https://github.com/sammcj/agentic-coding --skill apply-mantel-styles

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates brand inconsistency in visual designs by providing comprehensive styling guidelines for diagrams and frontend components that align with Mantel's brand identity.

Core Features & Use Cases

  • Mermaid Diagram Styling: Apply consistent brand colors and semantic styling to flowcharts, sequence diagrams, and system architectures.
  • PlantUML Theme Integration: Configure complete brand themes for activity, class, sequence, and state diagrams.
  • Frontend Component Guidelines: Implement brand-consistent buttons, navigation, forms, and alerts using CSS variables and Tailwind configs.
  • Use Case: Imagine you need to create a system architecture diagram for a client presentation. Use this Skill to apply Mantel's Ocean, Flamingo, and Sky Blue colors with proper semantic meaning for different system components.

Quick Start

Use the apply-mantel-styles skill to create a Mermaid flowchart showing our user authentication process using the brand color palette.

Frequently Asked Questions about apply-mantel-styles

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply consistent brand colors to Mermaid diagrams?▼

Apply brand colors to Mermaid diagrams by using the Mantel style definitions included in this Skill, which enforce the color palette and semantic usage rules across flowcharts, sequence diagrams, and system architectures for brand-consistent visuals.

Can I use Mantel brand styles with PlantUML diagrams?▼

Yes. This Skill provides PlantUML theme integration for activity, class, sequence, and state diagrams, enabling you to configure complete brand themes that maintain Mantel's visual identity across diagram types.

What's the best way to ensure frontend components match brand guidelines?▼

Use the CSS variables and Tailwind configurations provided by this Skill to implement brand-consistent buttons, navigation, forms, and alerts that enforce Mantel's color palette and semantic styling rules across your components.

Does this Skill fix branding inconsistencies across both diagrams and UI components?▼

Yes. This Skill addresses branding inconsistencies by applying Mantel brand styles to both visual diagrams—including Mermaid and PlantUML—and frontend components, enforcing consistency rules and color palettes across your entire design.

Can I reuse the CSS class definitions across multiple projects?▼

Yes. The Skill provides reusable CSS class definitions and Mermaid theme definitions that enforce brand-consistency constraints, allowing you to maintain the same Mantel styling across multiple projects and components.

Related Skills

Explore More Design & Creative Skills→
mkatoguimkatogui
3

brand-identity-generator

Generate brand identity systems with CSS-ready tokens and brand guidelines.

Community
Advanced
bwgzbwgz

mermaid-render

Render Mermaid diagrams to PNG, SVG, or PDF with Trimble themes.

Community
Advanced
marchattonmarchatton
5

generating-tailwind-brand-config

Transform design tokens into Tailwind CSS variables and presets.

Community
Advanced
koralliskorallis
90

tailwind-design-system

Generate Tailwind CSS design systems with custom themes and design tokens.

Community
Intermediate