skills.rest
wot-ui
wot-uiOFFICIAL
Explore all skills by this author →
GitHub

generate-theme

Generate a single-file SCSS theme for Wot UI with fixed color tokens.

284|31|Updated Jan 15, 2026
Search Tags:#automation#theming#vue#theme#scss#mixin#app.vue
One-click install
npx skills add https://github.com/wot-ui/wot-ui --skill generate-theme
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-theme
Source: https://github.com/wot-ui/wot-ui/tree/main/.agents/skills/generate-theme
Command: npx skills add https://github.com/wot-ui/wot-ui --skill generate-theme

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers streamline theming for Wot UI by generating a ready-to-use single-file SCSS theme and auto-mounting it into App.vue.

Core Features & Use Cases

  • Generates a single SCSS theme file at src/themes/styles/{theme}.scss containing a mixin named {theme}-theme-vars.
  • Mounts the theme by following the App.vue integration pattern via @use and the page/.wot-theme-{theme} selectors.
  • Exposes semantic color tokens with fixed values to ensure consistent theming across components.

Quick Start

Provide the theme name and run the skill to generate the SCSS file and mounting code.

Frequently Asked Questions about generate-theme

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

FAQPage Schema
How do I generate a custom SCSS theme for Wot UI?▼

To generate a custom SCSS theme for Wot UI, provide a theme name to auto-create a single-file SCSS theme at src/themes/styles/{theme}.scss containing a {theme}-theme-vars mixin with fixed color tokens.

How do I mount a Wot UI theme into App.vue?▼

Mount a Wot UI theme into App.vue by using the @use directive to import the generated SCSS file and applying the theme via page and .wot-theme-{theme} selectors for seamless integration across the project.

Does the generated Wot UI SCSS theme include dark mode variants?▼

No, the generated Wot UI SCSS theme does not include dark mode variants. It uses only fixed color tokens with no dark variant generation to ensure consistent theming across components.

What is the correct file path and mixin structure for Wot UI theming?▼

The correct file path for Wot UI theming is src/themes/styles/{theme}.scss. This single file must contain a mixin named {theme}-theme-vars that exposes semantic color tokens with fixed values for component styling.

Can I automate Wot UI theme generation and App.vue integration without manual SCSS wiring?▼

Yes, you can automate Wot UI theme generation to produce the single-file SCSS theme and automatically prepare the App.vue integration pattern using @use and page/.wot-theme-{theme} selectors without manual wiring.

Why use fixed color tokens instead of dynamic variables in Vue SCSS theming?▼

Using fixed color tokens in Vue SCSS theming ensures consistent visual styling across Wot UI components. This approach generates a single-file SCSS theme with fixed values, deliberately omitting dark variant generation for predictable results.

Related Skills

Explore More Design & Creative Skills→
hotovohotovo
1.4k

theme-factory

Create and register SCSS color themes with i18n display names.

Official
Advanced
ruan-catruan-cat

style-migration

Migrate ColorUI and SCSS styling to UnoCSS and wot-design-uni.

Community
Intermediate
fm-dev-mxfm-dev-mx

theme-architecture

Manage Celebra-me's 3-Layer Color Architecture with SCSS and Astro.

Community
Intermediate
imsaifimsaif
3

design-audit

Scan Tailwind UI components for hardcoded colors and design token violations.

Community
Advanced