refactoring-ui

Name: refactoring-ui
Author: jaywilburn

23stars0forks

How to install refactoring-ui?

jaywilburn/refactoring-ui-skill/refactoring-ui

$npx -y skills add jaywilburn/refactoring-ui-skill --skill refactoring-ui

Installs into the current project.

Summary

Comprehensive UI design guidance based on Refactoring UI principles covering design personality, color theory, layout strategy, visual hierarchy, typography, spacing, mobile-first responsive design, and writing copy that doesn't read like AI wrote it. Use this skill whenever the

Files · 1

View on GitHub

SKILL.md

1	# Refactoring UI Design System
2
3	## Core Philosophy
4
5	Design decisions should be made with intention, not decoration. Every visual choice—color, size, spacing, weight—communicates hierarchy and guides the user's attention. Start with too much whitespace, then remove it. Start with less contrast, then add it where needed.
6
7	Before writing any CSS, answer: what should this feel like? A financial dashboard and a children's learning app demand completely different visual treatments. The sections below move from strategic thinking (personality, color theory, layout strategy) down to tactical execution (spacing values, shadow syntax, animation timing).
8
9	---
10
11	# Design Thinking
12
13	## Design Personality & Tone
14
15	Every interface has a personality whether you choose one or not. Choosing intentionally is the difference between a design that feels right and one that feels generic.
16
17	### The Personality Spectrum
18
19	Plot your design on two axes:
20
21	- Formal ↔ Casual: How structured and serious vs relaxed and approachable
22	- Reserved ↔ Expressive: How restrained and minimal vs bold and vibrant
23
24	Four quadrants:
25
26	\| \| Reserved \| Expressive \|
27	\|---\|---\|---\|
28	\| Formal \| Banking, legal, enterprise, government \| Luxury brands, high-end retail, fashion \|
29	\| Casual \| Developer tools, documentation, utilities \| Gaming, social apps, children's education \|
30
31	### Mapping Design Signals to Personality
32
33	Each visual lever pushes the design toward a quadrant:
34
35	- Border-radius: 2-4px (formal) → 8-12px (moderate) → 16px+ (casual). Match to personality—don't default to max.
36	- Font choice: Geometric sans like Inter/Roboto (modern, neutral), humanist sans like Source Sans/Nunito (friendly, approachable), serif like Merriweather/Playfair (traditional, authoritative), monospace accents (technical, developer-oriented)
37	- Color saturation: Low/muted (reserved) → high/vibrant (expressive). See Color Theory section.
38	- Whitespace density: Generous (formal, premium) → tight (casual, energetic, data-dense)
39	- Shadow style: Subtle and diffused (reserved) → dramatic with strong offsets (expressive). Or no shadows at all for minimal/flat designs.
40	- Imagery style: Photography (authentic, serious) → illustration (approachable, playful) → icons only (utilitarian, technical)
41
42	### Domain Personality Anchors
43
44	Use these as starting points, not rigid rules. The specific product and audience always override.
45
46	Fintech / Banking: Formal + reserved. Muted blues and greens, small border-radius (4-6px), geometric sans-serif, dense data layouts, minimal decoration. Trust is communicated through restraint.
47
48	Healthcare / Medical: Formal + reserved. Calming blues, greens, or teals. Generous whitespace, clear section breaks, large touch targets. Accessibility is non-negotiable. Avoid anything that feels playful—patients want confidence.
49
50	E-commerce: Varies by market segment. Budget/mass-market = casual + expressive (bright colors, large CTAs, energy). Luxury = formal + expressive (muted palette, serif headings, dramatic whitespace, restrained CTAs).
51
52	Creative Tools: Casual + expressive. Bold accent colors against neutral backgrounds. Asymmetric layouts, personality in empty states and onboarding. The tool should feel inspiring, not corporate.
53
54	Education: K-12 = casual + expressive (warm colors, rounded shapes, friendly type, illustrations). Professional/adult learning = casual + reserved (clean, focused, minimal distraction from content).
55
56	SaaS Dashboards: Casual + reserved. Neutral base palette with functional color for data and states. Dense but organized. The interface should disappear—users are here for the data, not the design.
57
58	Media / Content: News = formal + reserved (classic typography, structured grids, minimal color). Entertainment = casual + expressive (bold imagery, vivid color, immersive layouts).
59
60	Developer Tools: Casual + reserved. Monospace accents, dark mode preference, minimal decoration. High information density done well. Let the content breathe but don't waste space on decoration.
61
62	### The "Who Is This For?" Checklist
63
64	Before making any visual choices, answer these:
65
66	1. Who is the primary user?

People who liked this also viewed

6 picks

Type

refactoring-ui

23stars0forks

View on GitHub

How to install refactoring-ui?

jaywilburn/refactoring-ui-skill/refactoring-ui

$npx -y skills add jaywilburn/refactoring-ui-skill --skill refactoring-ui

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Refactoring UI Design System
2
3	## Core Philosophy
4
5	Design decisions should be made with intention, not decoration. Every visual choice—color, size, spacing, weight—communicates hierarchy and guides the user's attention. Start with too much whitespace, then remove it. Start with less contrast, then add it where needed.
6
7	Before writing any CSS, answer: what should this feel like? A financial dashboard and a children's learning app demand completely different visual treatments. The sections below move from strategic thinking (personality, color theory, layout strategy) down to tactical execution (spacing values, shadow syntax, animation timing).
8
9	---
10
11	# Design Thinking
12
13	## Design Personality & Tone
14
15	Every interface has a personality whether you choose one or not. Choosing intentionally is the difference between a design that feels right and one that feels generic.
16
17	### The Personality Spectrum
18
19	Plot your design on two axes:
20
21	- Formal ↔ Casual: How structured and serious vs relaxed and approachable
22	- Reserved ↔ Expressive: How restrained and minimal vs bold and vibrant
23
24	Four quadrants:
25
26	\| \| Reserved \| Expressive \|
27	\|---\|---\|---\|
28	\| Formal \| Banking, legal, enterprise, government \| Luxury brands, high-end retail, fashion \|
29	\| Casual \| Developer tools, documentation, utilities \| Gaming, social apps, children's education \|
30
31	### Mapping Design Signals to Personality
32
33	Each visual lever pushes the design toward a quadrant:
34
35	- Border-radius: 2-4px (formal) → 8-12px (moderate) → 16px+ (casual). Match to personality—don't default to max.
36	- Font choice: Geometric sans like Inter/Roboto (modern, neutral), humanist sans like Source Sans/Nunito (friendly, approachable), serif like Merriweather/Playfair (traditional, authoritative), monospace accents (technical, developer-oriented)
37	- Color saturation: Low/muted (reserved) → high/vibrant (expressive). See Color Theory section.
38	- Whitespace density: Generous (formal, premium) → tight (casual, energetic, data-dense)
39	- Shadow style: Subtle and diffused (reserved) → dramatic with strong offsets (expressive). Or no shadows at all for minimal/flat designs.
40	- Imagery style: Photography (authentic, serious) → illustration (approachable, playful) → icons only (utilitarian, technical)
41
42	### Domain Personality Anchors
43
44	Use these as starting points, not rigid rules. The specific product and audience always override.
45
46	Fintech / Banking: Formal + reserved. Muted blues and greens, small border-radius (4-6px), geometric sans-serif, dense data layouts, minimal decoration. Trust is communicated through restraint.
47
48	Healthcare / Medical: Formal + reserved. Calming blues, greens, or teals. Generous whitespace, clear section breaks, large touch targets. Accessibility is non-negotiable. Avoid anything that feels playful—patients want confidence.
49
50	E-commerce: Varies by market segment. Budget/mass-market = casual + expressive (bright colors, large CTAs, energy). Luxury = formal + expressive (muted palette, serif headings, dramatic whitespace, restrained CTAs).
51
52	Creative Tools: Casual + expressive. Bold accent colors against neutral backgrounds. Asymmetric layouts, personality in empty states and onboarding. The tool should feel inspiring, not corporate.
53
54	Education: K-12 = casual + expressive (warm colors, rounded shapes, friendly type, illustrations). Professional/adult learning = casual + reserved (clean, focused, minimal distraction from content).
55
56	SaaS Dashboards: Casual + reserved. Neutral base palette with functional color for data and states. Dense but organized. The interface should disappear—users are here for the data, not the design.
57
58	Media / Content: News = formal + reserved (classic typography, structured grids, minimal color). Entertainment = casual + expressive (bold imagery, vivid color, immersive layouts).
59
60	Developer Tools: Casual + reserved. Monospace accents, dark mode preference, minimal decoration. High information density done well. Let the content breathe but don't waste space on decoration.
61
62	### The "Who Is This For?" Checklist
63
64	Before making any visual choices, answer these:
65
66	1. Who is the primary user?

People who liked this also viewed

6 picks

Type