skills.rest
astoeffer
astoefferCOMMUNITY
Explore all skills by this author →
GitHub

design-tokens

Map UIkit design tokens to Bootstrap 5 equivalents via SCSS variables.

Updated Aug 23, 2026
Search Tags:#theming#design system#design tokens#UIkit#Bootstrap#token mapping
One-click install
npx skills add https://github.com/astoeffer/plugin-marketplace --skill design-tokens-astoeffer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-tokens
Source: https://github.com/astoeffer/plugin-marketplace/tree/main/plugins/cloodle-moodle-theming/skills/design-tokens
Command: npx skills add https://github.com/astoeffer/plugin-marketplace --skill design-tokens-astoeffer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps maintain consistent theming by mapping design tokens between Zero One (UIkit) and Bootstrap 5, enabling colors, typography, and spacing to stay aligned across platforms.

Core Features & Use Cases

  • Token Mapping: Convert and align color, typography, and spacing tokens between design systems.
  • Design System Updates: Propagate changes across UIkit and Bootstrap 5 tokens automatically.
  • Cross-platform Consistency: Ensure theme parity when theming for web, mobile, or components.

Quick Start

Map the current Zero One (UIkit) tokens to Bootstrap 5 equivalents and export a tokens.json containing color, typography, and spacing values for the new theme.

Frequently Asked Questions about design-tokens

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I map design tokens between UIkit and Bootstrap 5?▼

Design token mapping converts color, typography, and spacing tokens from UIkit to Bootstrap 5 equivalents, preserving semantic meaning through SCSS variables and a mapping table. This ensures consistent theming across both frameworks when updating your design system.

Can I keep my design tokens consistent across UIkit and Bootstrap 5?▼

Yes. Token mapping maintains cross-platform consistency by aligning colors, typography, and spacing definitions between UIkit and Bootstrap 5, so theme changes propagate uniformly across both platforms.

What design system values does token mapping cover?▼

Token mapping handles three core categories: color tokens for palette consistency, typography tokens for font and sizing alignment, and spacing tokens for layout proportions—all preserved through SCSS variables.

When should I use design token mapping in my workflow?▼

Use token mapping during theme changes, when implementing cross-platform consistency requirements, or during design system updates to ensure UIkit and Bootstrap 5 stay synchronized.

What output does the token mapping process produce?▼

Token mapping outputs a tokens.json file containing harmonized color, typography, and spacing values for your new theme, ready for deployment across UIkit and Bootstrap 5 implementations.

Do I need both UIkit and Bootstrap 5 to use design token mapping?▼

Yes. Token mapping is designed specifically to bridge UIkit and Bootstrap 5 design systems, aligning their tokens to maintain consistent theming across both frameworks simultaneously.

Related Skills

Explore More Design & Creative Skills→
NextSpark-jsNextSpark-js

design-system

Map CSS design tokens from NextSpark themes to mockup values.

Official
Intermediate
jacob-balslevjacob-balslev
1

color-system-design

Construct accessible color palettes and semantic tokens for light and dark themes.

Community
Advanced
baloisebaloise
111

ds-create-component

Generate Stencil web components with TypeScript, SCSS, and visual test files.

Official
Intermediate
Seth-arcSeth-arc
1

design-system-tokens

Define CSS custom properties for Myelin platform UI components and themes.

Community
Advanced