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

0•

Herramientas de Diseño

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.

Características Principales

01Consistent spacing and border-radius enforcement

02UIkit to Bootstrap 5 class mapping and migration

03Automated cross-platform design system synchronization

040 GitHub stars

05Typography standardization using the Outfit font family

06Zero One palette SCSS variable management

Casos de Uso

01Migrating a legacy Moodle theme from UIkit to Bootstrap 5 styles.

02Applying consistent brand colors and typography to new theme components.

03Updating global design variables across a complex CSS codebase.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add astoeffer/plugin-marketplace design-tokens

For use in Claude.ai and ChatGPT

Download Skill