mozaic-design-tokens

Fetch Mozaic Design System tokens in JSON, SCSS, CSS, or JavaScript formats.

4|Updated Dec 12, 2025
One-click install
npx skills add https://github.com/MerzoukeMansouri/adeo-mozaic-mcp --skill mozaic-design-tokens
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mozaic-design-tokens
Source: https://github.com/MerzoukeMansouri/adeo-mozaic-mcp/tree/main/skills/mozaic-design-tokens
Command: npx skills add https://github.com/MerzoukeMansouri/adeo-mozaic-mcp --skill mozaic-design-tokens

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires bash, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill solves the challenge of manually searching for and using Mozaic Design System tokens, enabling quick and consistent application of design elements in UI development.

Core Features & Use Cases

  • Token Access: Easily access design tokens for colors, typography, spacing, shadows, borders, breakpoints, and grid systems.
  • Multiple Formats: Retrieve tokens in JSON, SCSS, CSS, or JavaScript formats.
  • Search Documentation: Find comprehensive styling guidance and best practices.
  • Responsive Design: Work with responsive patterns and breakpoints.
  • Consistent Styling: Ensure UI consistency across projects.
  • Use Case: For a designer working on a project that requires Mozaic Design System tokens, this Skill streamlines the process by providing quick access to the necessary styles without the need for extensive manual research.

Quick Start

Use the mozaic-design-tokens skill to get the color tokens for the primary brand in SCSS format.

Frequently Asked Questions about mozaic-design-tokens

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

FAQPage Schema
How do I get Mozaic Design System tokens in SCSS format?

You can retrieve Mozaic Design System tokens in SCSS format by using shell scripts within the Skill to fetch standardized colors, typography, and spacing variables from a local database for direct UI styling.

What design tokens are available for consistent UI styling?

Available design tokens include standardized variables for colors, typography, spacing, shadows, borders, breakpoints, and grid systems to ensure consistent UI styling across front-end projects.

Can I export design tokens as JavaScript and CSS variables?

Yes, you can export design tokens as JavaScript and CSS variables, alongside JSON and SCSS formats, providing flexible integration for various front-end development workflows.

Do I need bash to fetch design tokens from the local database?

Yes, bash is required as a dependency because the Skill implements shell scripts to fetch and present the design tokens from the local database in your chosen format.

What is the best way to find responsive breakpoints and grid system tokens?

The best way to find responsive breakpoints and grid system tokens is to use the Skill's search documentation feature, which provides comprehensive styling guidance and best practices for responsive design.

Why manually search for design tokens when standardizing a UI?

Manually searching for design tokens is inefficient; this Skill eliminates that bottleneck by providing quick access to a comprehensive set of standardized design elements for consistent UI implementation.