Manage design tokens for consistent theming across platforms. Use when defining colors, typography, spacing, or other design system values.
/plugin marketplace add astoeffer/moodle-plugin-marketplace/plugin install cloodle-moodle-theming@astoeffer-dev-pluginsThis skill is limited to using the following tools:
Zero One (UIkit) to Bootstrap 5 design token mapping.
// Primary
$cloodle-primary: #6e66cc;
$cloodle-primary-hover: #5c53c6;
$cloodle-primary-light: #e2e0f5;
// Secondary
$cloodle-secondary: #130a28;
$cloodle-heading: #130a28;
// Text
$cloodle-text: #423653;
$cloodle-text-muted: #aeaeae;
// Background
$cloodle-bg-light: #f7f7f7;
$cloodle-border: #dedbe0;
// Semantic
$cloodle-success: #6BC116;
$cloodle-danger: #E84646;
$font-family-sans-serif: "Outfit", sans-serif;
$font-size-base: 1rem;
$headings-font-weight: 700;
$h1-font-size: 2.55rem;
$h2-font-size: 1.7rem;
$border-radius: 12px;
$border-radius-pill: 500px;
$btn-padding-y: 0.75rem;
$btn-padding-x: 1.875rem;
| UIkit Class | Bootstrap Equivalent |
|---|---|
uk-button-primary | btn btn-primary |
uk-card | card |
uk-input | form-control |
uk-section-muted | bg-light |
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
This skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.