skills.rest
wondelai
wondelaiOFFICIAL
Explore all skills by this author โ†’
GitHub

refactoring-ui

Generate design tokens and layout patterns for web UI systems.

1.9k|192|Updated Jan 29, 2026
Search Tags:#typography#layout#Tailwind#design-system#color-palette#UI-design#refactoring-ui
One-click install
npx skills add https://github.com/wondelai/skills --skill refactoring-ui-wondelai
Or copy as Structured Prompt for Agentโ–ผ
Please help me install this Agent Skill.
Skill: refactoring-ui
Source: https://github.com/wondelai/skills/tree/main/refactoring-ui
Command: npx skills add https://github.com/wondelai/skills --skill refactoring-ui-wondelai

SYSTEM DOCUMENTATION & REQUIREMENTS

๐Ÿ’ก This Skill includes references (resource) components.

What problem does it solve?

Practical guidelines and a reusable design system based on Refactoring UI to help teams create cohesive user interfaces across dashboards, landing pages, and product experiences. It provides a structured approach to typography, spacing, color, layout, and visual hierarchy that can be applied to HTML/CSS, React, Tailwind, or any frontend output.

Core Features & Use Cases

  • Opinionated design system guidance aligned with Refactoring UI principles for fast, consistent UI creation.
  • Patterns and tokens for typography scales, spacing rules, color palettes, and component layout suitable for web apps and marketing sites.
  • Use Case: quickly generate a cohesive component kit for a dashboard or landing page and review designs for consistency at scale.

Quick Start

Describe your UI challenge (for example: "Create a Tailwind-based card set for a marketing dashboard") and request practical design tokens, layout patterns, and component specs that reflect Refactoring UI guidance.

Frequently Asked Questions about refactoring-ui

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

FAQPage Schema
How do I create a cohesive UI design system for a web dashboard?โ–ผ

A practical UI design system provides structured typography, spacing, color, and visual hierarchy rules. This Skill outputs concrete design tokens and component specs based on Refactoring UI to help teams build cohesive web interfaces without needing a dedicated designer.

Can I generate Tailwind design tokens for a landing page component kit?โ–ผ

Yes, you can generate Tailwind design tokens for a landing page component kit. Describe your UI challenge to receive practical design tokens, layout patterns, and component specs that apply Refactoring UI guidance directly to Tailwind or any frontend framework.

What is the best way to define visual hierarchy and spacing rules for product interfaces?โ–ผ

The best way to define visual hierarchy and spacing rules is by applying an opinionated design system. This Skill provides structured Refactoring UI guidance, outputting concrete layout patterns and design tokens to establish consistent visual hierarchy across web apps.

Does this Refactoring UI guidance work with React and HTML/CSS frameworks?โ–ผ

Yes, this Refactoring UI guidance works with React, HTML/CSS, and Tailwind. The Skill generates framework-agnostic design tokens, typography scales, and layout patterns that can be applied directly to any frontend output for marketing sites or web apps.

How do I review my UI designs for consistency at scale?โ–ผ

To review UI designs for consistency at scale, use actionable prompts for design critique based on predefined tokens. This Skill outputs structured component specs and layout patterns aligned with Refactoring UI to help teams evaluate visual hierarchy and maintain cohesive interfaces.

Related Skills

Explore More Design & Creative Skillsโ†’
vanman2024vanman2024
10

design-system-enforcement

Enforce design-system compliance for Next.js UI components with shadcn/ui and Tailwind v4.

Community
Advanced
ovachieverovachiever
52

tailwind-v4-shadcn

Set up Tailwind v4 with shadcn/ui in Vite React projects.

Community
Advanced
jeremyspoffordjeremyspofford

design-guide

Enforce consistent UI design with an 8px grid and Tailwind CSS configuration.

Community
Basic
Hyeonjun0527Hyeonjun0527
1

component-patterns

Define and apply standardized criteria for web component UI abstraction levels.

Community
Basic