skills.rest
cmbays
cmbaysCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/cmbays/mokumo --skill design-system-skill-cmbays
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
docaohieu2808docaohieu2808

design

Orchestrate design tasks across brand identity, design tokens, and UI styling.

Community
Advanced
JustinWangJPJustinWangJP
6

tailwind-design-system

Establish scalable Tailwind-based design systems with semantic tokens and CVA components.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
NoobyGainsNoobyGains
78

design-integration

Detect a project's design system and enforce its conventions for new UI components.

Community
Advanced