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

frontend-style-harmonizer-skill

Audit frontend styles for duplication, dimension drift, and hardcoded values.

44|11|Updated Jun 1, 2026
Search Tags:#visual consistency#design tokens#frontend styling#uniapp#css governance#style harmonization#css refactoring
One-click install
npx skills add https://github.com/jiushiwon/wg-skills --skill frontend-style-harmonizer-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-style-harmonizer-skill
Source: https://github.com/jiushiwon/wg-skills/tree/main/frontend-style-harmonizer-skill
Command: npx skills add https://github.com/jiushiwon/wg-skills --skill frontend-style-harmonizer-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill identifies and resolves inconsistent frontend styling across pages, reducing duplicated CSS, mismatched component dimensions, scattered hardcoded values, and visual layout shifts.

Core Features & Use Cases

  • Style Reuse Governance: Detects identical or highly similar style blocks across pages and recommends extracting them into shared CSS or reusable components.
  • Component Alignment: Compares buttons, tabs, inputs, tags, list items, cards, and fixed-height containers across pages, then proposes consistent size tiers and design tokens.
  • Hardcoded Value Migration: Finds raw colors, dimensions, typography values, radii, and shadows and maps them to SCSS or CSS variables.
  • Uniapp-Aware Auditing: Normalizes rpx values correctly without applying inappropriate pixel-grid checks.
  • Safe Refactoring: Defaults to report-only auditing, provides dry-run diffs, preserves business logic, and requires confirmation before applying changes.
  • Use Case: When buttons, tabs, and cards have different dimensions across a uniapp project, use this Skill to generate a governance report and consolidate the styles into shared tokens and public styles.

Quick Start

Ask the AI to audit the current project for duplicated styles, component inconsistencies, and hardcoded values, then write the governance report to the project's docs directory.

Frequently Asked Questions about frontend-style-harmonizer-skill

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

FAQPage Schema
How do I audit inconsistent frontend styles and duplicated CSS across uniapp pages?▼

To audit inconsistent frontend styles across uniapp pages, you need a tool that detects duplicated CSS blocks, classifies semantic components, and normalizes rpx values. This process generates a governance report identifying mismatched dimensions and scattered hardcoded values for safe consolidation.

What is the best way to migrate hardcoded CSS values to design tokens during a style refactoring?▼

Migrating hardcoded CSS values to design tokens involves scanning raw colors, dimensions, typography, radii, and shadows, then mapping them to SCSS or CSS variables. The refactoring process should provide token-based replacement guidance and validate accessibility contrast before applying changes.

Does style harmonization work with Vue and React projects or is it limited to uniapp?▼

Style harmonization is primarily optimized for uniapp projects with rpx-aware normalization, but it also supports Vue, React, and HTML applications. It applies the same visual consistency checks and component alignment audits across these different frontend frameworks during style reviews.

How do I safely refactor frontend styles without breaking existing business logic?▼

To safely refactor frontend styles without breaking business logic, use a process that defaults to report-only auditing and provides confirmation-driven dry-run diffs. This ensures visual layout shifts and style consolidations are reviewed before any actual code modifications are applied.

Why do my uniapp components have visual layout shifts and mismatched dimensions across different pages?▼

Visual layout shifts and mismatched dimensions in uniapp components occur due to scattered hardcoded values and duplicated CSS without shared design tokens. Analyzing semantic component classifications like buttons, tabs, and cards helps identify dimension drift and propose consistent size tiers.

Related Skills

Explore More Software Engineering Skills→
C-Jay69C-Jay69

frontend-design

Generate accessible React/TypeScript components with design tokens and dark mode.

Community
Advanced
Dragoon0xDragoon0x
4

typography

Generate a 9-step type scale token file for CSS, Tailwind, or JavaScript projects.

Community
Intermediate
kaikunnnnkaikunnnn

design

Map Figma design nodes to Tailwind CSS tokens and component structures.

Community
Advanced
salmanabdurrahmansalmanabdurrahman

mobile-android-static

Analyze Android APK and AAB artifacts for security vulnerabilities.

Community
Advanced