skills.rest
jiushiwon
jiushiwonCOMMUNITY
Explore all skills by this author →
GitHub

uniapp-theme-skill

Replace hardcoded styles with CSS variables in uni-app projects.

44|11|Updated Jun 1, 2026
Search Tags:#design tokens#css variables#uni-app#theme system#style migration#runtime theming
One-click install
npx skills add https://github.com/jiushiwon/wg-skills --skill uniapp-theme-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uniapp-theme-skill
Source: https://github.com/jiushiwon/wg-skills/tree/main/uniapp-theme-skill
Command: npx skills add https://github.com/jiushiwon/wg-skills --skill uniapp-theme-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates inconsistent hardcoded colors, dimensions, and corner radii in uni-app projects by establishing a centralized, switchable design token system.

Core Features & Use Cases

  • Theme System Generation: Create CSS variable systems for color scales, spacing, typography, component heights, and corner radii.
  • Dynamic Theming: Generate complete 50–900 color scales from a custom HEX color and switch among seven preset themes without recompiling.
  • Style Standardization: Scan Vue and stylesheet files, replace hardcoded values with semantic CSS variables, create backups, and produce a theme migration report.
  • Use Case: Apply a business or cute theme to an existing uni-app application, unify its rpx-based dimensions and styles, and enable runtime switching through a data-theme attribute.

Quick Start

Ask the uniapp-theme-skill to add a theme system with primary color #2563EB and unify all hardcoded styles in the target uni-app project.

Frequently Asked Questions about uniapp-theme-skill

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

FAQPage Schema
How do I replace hardcoded colors with CSS variables in a uni-app project?▼

To replace hardcoded colors with CSS variables in a uni-app project, this Skill scans Vue and stylesheet files to substitute values with centralized design tokens, creates backups, and generates a migration report.

Can I switch between preset themes at runtime in uni-app without recompiling?▼

Yes, you can switch themes at runtime in uni-app without recompiling by applying a data-theme attribute to trigger dynamic theming across seven preset themes generated from custom HEX colors.

What is the best way to generate a 50-900 color scale from a HEX value for uni-app?▼

Generating a 50-900 color scale from a HEX value for uni-app involves establishing a centralized design token system that dynamically creates complete color scales for runtime theme switching.

Does the uni-app theme migration process support rpx-based dimensions and corner radii?▼

Yes, the uni-app theme migration process supports rpx-compatible dimensions and corner radii by scanning files and replacing hardcoded values with semantic CSS variables to ensure visual consistency.

Why do I need design tokens for my uni-app application's style system?▼

You need design tokens for your uni-app application to eliminate inconsistent hardcoded colors, dimensions, and corner radii by establishing a centralized, switchable CSS variable system.

Are file backups created automatically when migrating uni-app styles to semantic tokens?▼

Yes, file backups are created automatically during style migration as the system scans Vue and stylesheet files to replace hardcoded values with semantic CSS variables and produce a migration report.

Related Skills

Explore More Software Engineering Skills→
imsaifimsaif
3

design-audit

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

Community
Advanced
boludo00boludo00
80

tailwind

Apply Tailwind CSS utility classes with custom themes and dark mode.

Community
Intermediate
nazrulsoftwaredevnazrulsoftwaredev

imprint

Extract CSS classes and values from UI components into a centralized registry.

Community
Intermediate
jubalmjubalm
1

shadcn/ui Customization & Theming

Configure CSS variable-based theming for shadcn/ui components with Tailwind.

Community
Advanced