How does this skill help with UIkit to Bootstrap migrations?

It provides a direct mapping table for common classes like buttons, cards, and inputs, allowing Claude to automatically rewrite legacy UIkit styles into modern Bootstrap 5 equivalents.

What font family does this skill prioritize?

The skill defaults to the 'Outfit' sans-serif font family, applying specific weights and sizes to ensure typography remains consistent across headings and body text.

Can I customize the default Cloodle color palette?

Yes, the skill provides a reference for existing tokens, but you can instruct Claude to modify the SCSS variables in your project to align with your specific brand requirements.

Is this skill strictly for Moodle development?

While specifically optimized for Cloodle Moodle themes, the underlying design token logic and framework mapping can be utilized for any project transitioning from UIkit to Bootstrap.

Cloodle Design System Tokens

Name: Cloodle Design System Tokens
Author: astoeffer

byastoeffer

设计工具

Manages and applies consistent design system values across platforms using a specialized token mapping system for Moodle themes.

关于

The Design Tokens skill provides a robust framework for maintaining visual consistency within the Cloodle Moodle ecosystem. It automates the application of specific color palettes, typography, and spacing values while facilitating the seamless migration from UIkit to Bootstrap 5. By leveraging pre-defined SCSS variables and comprehensive mapping tables, this skill ensures that theme updates remain synchronized across different platforms and components, significantly reducing design debt and eliminating frontend inconsistencies during the development process.

主要功能

Consistent spacing and border-radius enforcement
UIkit to Bootstrap 5 class mapping and migration
Automated cross-platform design system synchronization
0 GitHub stars
Typography standardization using the Outfit font family
Zero One palette SCSS variable management

使用场景

Migrating a legacy Moodle theme from UIkit to Bootstrap 5 styles.
Applying consistent brand colors and typography to new theme components.
Updating global design variables across a complex CSS codebase.

关于

主要功能

Consistent spacing and border-radius enforcement
UIkit to Bootstrap 5 class mapping and migration
Automated cross-platform design system synchronization
0 GitHub stars
Typography standardization using the Outfit font family
Zero One palette SCSS variable management

使用场景

Migrating a legacy Moodle theme from UIkit to Bootstrap 5 styles.
Applying consistent brand colors and typography to new theme components.
Updating global design variables across a complex CSS codebase.