Design System Skill

Define Mokumo's visual language with token architecture and badge patterns.

1|Updated Mar 21, 2026

Search Tags:#design system #tokens #ui components #colors #badges #visual language

Ready to run

npx skills add https://github.com/cmbays/mokumo --skill design-system-skill-cmbays

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Design System Skill
Source: https://github.com/cmbays/mokumo/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/cmbays/mokumo --skill design-system-skill-cmbays

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides the definitive reference for Mokumo's visual language, ensuring consistency and adherence to brand guidelines across all UI development.

Core Features & Use Cases

Token Architecture: Understand the 4-layer token system (Foundation, Categorical, Semantic, Personality).
Color Palettes: Reference status and categorical color pools, including their specific uses and Tailwind mappings.
Badge Variants: Learn how to implement filled, outline, and dot indicator badges for different semantic purposes.
Use Case: When developing a new UI component, consult this Skill to select the correct semantic tokens, color palettes, and badge styles to maintain visual consistency with the Mokumo brand.

Quick Start

Use the design system skill to understand the color mapping for invoice status.

Frequently Asked Questions about Design System Skill

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

FAQPage Schema

How do I implement design tokens for consistent UI components?▼

Design tokens for UI components are structured through a 4-layer architecture: Foundation, Categorical, Semantic, and Personality. This token system governs visual language by defining specific color pools and styling guidelines to ensure brand consistency.

What is the best way to apply semantic colors for invoice status badges?▼

Semantic colors for invoice status badges are applied by referencing specific categorical color pools. You select the correct semantic tokens to implement filled, outline, or dot indicator badge variants that align with the visual language.

How does the 4-layer token architecture work for visual language?▼

The 4-layer token architecture works by structuring design tokens from Foundation to Categorical, Semantic, and Personality layers. This hierarchy defines color mappings and component styling rules, ensuring a consistent source of truth for UI development.

Do I need Tailwind to use these categorical color palettes?▼

Tailwind is used for mapping categorical color palettes within this visual language. The design system provides specific Tailwind mappings to enforce accurate color application and maintain visual consistency across your UI components.

When should I use filled versus outline badge variants?▼

Badge variants like filled and outline should be used based on distinct semantic purposes defined by the visual language. You consult the design system guidelines to select the correct badge variant for your specific UI component context.

Why does my UI component styling not match the brand's visual language?▼

UI component styling fails to match the visual language when you deviate from the defined source of truth order. You must consult the design system to select correct semantic tokens, color palettes, and badge styles for brand consistency.