design-tokens
Design Tokens Skill
Zero One (UIkit) to Bootstrap 5 design token mapping.
Trigger
- Theme color or typography changes
- Cross-platform consistency requests
- Design system updates
Zero One Palette
// 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;
Typography
$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;
Spacing
$border-radius: 12px;
$border-radius-pill: 500px;
$btn-padding-y: 0.75rem;
$btn-padding-x: 1.875rem;
UIkit to Bootstrap Mapping
| UIkit Class | Bootstrap Equivalent |
|---|---|
uk-button-primary |
btn btn-primary |
uk-card |
card |
uk-input |
form-control |
uk-section-muted |
bg-light |
More from astoeffer/plugin-marketplace
moodle-standards
Moodle coding standards with PSR-12 compliance and Frankenstyle naming. Use when developing Moodle plugins, writing PHP code for Moodle, or ensuring code quality compliance.
9psr12-moodle
Automatically validate and fix Moodle PHP code for PSR-12 compliance with Moodle-specific exceptions (lowercase_with_underscores naming, frankenstyle prefixes). Activates when working with Moodle plugin PHP files or when code standards issues are detected.
4h5p-patterns
Create interactive H5P content for Moodle and web platforms. Use when building interactive exercises, quizzes, or multimedia learning content.
2ai-gateway
Build AI gateway services for routing and managing LLM requests. Use when implementing API proxies, rate limiting, or multi-provider AI services.
2chatbot-widget
Build embeddable chatbot widgets for web applications. Use when creating chat UIs, iframe embeds, or widget-based AI interfaces.
1plugin-structure
Claude Code plugin structure and requirements. Use when creating, validating, or troubleshooting plugins. Covers plugin.json schema, SKILL.md format, command frontmatter, and agent configuration.
1