frontend-design

Name: frontend-design
Author: One-Man-Company

77stars16forks

How to install frontend-design?

one-man-company/skills-contextmanager/frontend-design

$npx -y skills add One-Man-Company/Skills-ContextManager --skill frontend-design

Installs into the current project.

Summary

Design thinking and decision-making for web UI. Use when designing components, layouts, color schemes, typography, or creating aesthetic interfaces. Teaches principles, not fixed values.

Files · 1

View on GitHub

SKILL.md

1	# Frontend Design System
2
3	> Philosophy: Every pixel has purpose. Restraint is luxury. User psychology drives decisions.
4	> Core Principle: THINK, don't memorize. ASK, don't assume.
5
6	---
7
8	## 🎯 Selective Reading Rule (MANDATORY)
9
10	Read REQUIRED files always, OPTIONAL only when needed:
11
12	\| File \| Status \| When to Read \|
13	\|------\|--------\|--------------\|
14	\| [ux-psychology.md](ux-psychology.md) \| 🔴 REQUIRED \| Always read first! \|
15	\| [color-system.md](color-system.md) \| ⚪ Optional \| Color/palette decisions \|
16	\| [typography-system.md](typography-system.md) \| ⚪ Optional \| Font selection/pairing \|
17	\| [visual-effects.md](visual-effects.md) \| ⚪ Optional \| Glassmorphism, shadows, gradients \|
18	\| [animation-guide.md](animation-guide.md) \| ⚪ Optional \| Animation needed \|
19	\| [motion-graphics.md](motion-graphics.md) \| ⚪ Optional \| Lottie, GSAP, 3D \|
20	\| [decision-trees.md](decision-trees.md) \| ⚪ Optional \| Context templates \|
21
22	> 🔴 ux-psychology.md = ALWAYS READ. Others = only if relevant.
23
24	---
25
26	## 🔧 Runtime Scripts
27
28	Execute these for audits (don't read, just run):
29
30	\| Script \| Purpose \| Usage \|
31	\|--------\|---------\|-------\|
32	\| `scripts/ux_audit.py` \| UX Psychology & Accessibility Audit \| `python scripts/ux_audit.py <project_path>` \|
33
34	---
35
36	## ⚠️ CRITICAL: ASK BEFORE ASSUMING (MANDATORY)
37
38	> STOP! If the user's request is open-ended, DO NOT default to your favorites.
39
40	### When User Prompt is Vague, ASK:
41
42	Color not specified? Ask:
43	> "What color palette do you prefer? (blue/green/orange/neutral/other?)"
44
45	Style not specified? Ask:
46	> "What style are you going for? (minimal/bold/retro/futuristic/organic?)"
47
48	Layout not specified? Ask:
49	> "Do you have a layout preference? (single column/grid/asymmetric/full-width?)"
50
51	### ⛔ DEFAULT TENDENCIES TO AVOID (ANTI-SAFE HARBOR):
52
53	\| AI Default Tendency \| Why It's Bad \| Think Instead \|
54	\|---------------------\|--------------\|---------------\|
55	\| Bento Grids (Modern Cliché) \| Used in every AI design \| Why does this content NEED a grid? \|
56	\| Hero Split (Left/Right) \| Predictable & Boring \| How about Massive Typography or Vertical Narrative? \|
57	\| Mesh/Aurora Gradients \| The "new" lazy background \| What's a radical color pairing? \|
58	\| Glassmorphism \| AI's idea of "premium" \| How about solid, high-contrast flat? \|
59	\| Deep Cyan / Fintech Blue \| Safe harbor from purple ban \| Why not Red, Black, or Neon Green? \|
60	\| "Orchestrate / Empower" \| AI-generated copywriting \| How would a human say this? \|
61	\| Dark background + neon glow \| Overused, "AI look" \| What does the BRAND actually need? \|
62	\| Rounded everything \| Generic/Safe \| Where can I use sharp, brutalist edges? \|
63
64	> 🔴 "Every 'safe' structure you choose brings you one step closer to a generic template. TAKE RISKS."
65
66	---
67
68	## 1. Constraint Analysis (ALWAYS FIRST)
69
70	Before any design work, ANSWER THESE or ASK USER:
71
72	\| Constraint \| Question \| Why It Matters \|
73	\|------------\|----------\|----------------\|
74	\| Timeline \| How much time? \| Determines complexity \|
75	\| Content \| Ready or placeholder? \| Affects layout flexibility \|
76	\| Brand \| Existing guidelines? \| May dictate colors/fonts \|
77	\| Tech \| What stack? \| Affects capabilities \|
78	\| Audience \| Who exactly? \| Drives all visual decisions \|
79
80	### Audience → Design Approach
81
82	\| Audience \| Think About \|
83	\|----------\|-------------\|
84	\| Gen Z \| Bold, fast, mobile-first, authentic \|
85	\| Millennials \| Clean, minimal, value-driven \|
86	\| Gen X \| Familiar, trustworthy, clear \|
87	\| Boomers \| Readable, high contrast, simple \|
88	\| B2B \| Professional, data-focused, trust \|
89	\| Luxury \| Restrained elegance, whitespace \|
90
91	---
92
93	## 2. UX Psychology Principles
94
95	### Core Laws (Internalize These)
96
97	\| Law \| Principle \| Application \|
98	\|-----\|-----------\|-------------\|
99	\| Hick's Law \| More choices = slower decisions \| Limit options, use progressive disclosure \|
100	\| Fitts' Law \| Bigger + closer = easier to click \| Size CTAs appropriately \|
101	\| Miller's Law \| ~7 items in working memory \| Chunk content into groups \|
102	\| Von Restorff \| Different = memorable \| Make CTAs visually distinct \|
103	\| Serial Position \| First/last remembered most \| Key info at start/end \|
104
105	### Emotional Design Levels
106
107	```
108	VISCERAL (instant) → First impression: colors, imagery, overall feel
109	BEHAVIORAL (use) → Using it: speed, feedback, efficiency
110	REFLECTIVE (memory) → After: "I like what this says about me"
111	```
112
113	### Trust Building
114
115	- Security indicators on sensitive actions
116	- Social proof where relevant
117	- Clear contact/support access
118	- Consistent, professional design
119	- Transparent policies
120
121	---
122
123	## 3. Layout Principles
124
125	### Golden Ratio (φ = 1.618)
126
127	```
128	Use for proportional harmony:
129	├── Content : Sideba

People who liked this also viewed

6 picks

Type

frontend-design

77stars16forks

View on GitHub

How to install frontend-design?

one-man-company/skills-contextmanager/frontend-design

$npx -y skills add One-Man-Company/Skills-ContextManager --skill frontend-design

Installs into the current project.

Summary

Design thinking and decision-making for web UI. Use when designing components, layouts, color schemes, typography, or creating aesthetic interfaces. Teaches principles, not fixed values.

Files · 1

View on GitHub

SKILL.md

1	# Frontend Design System
2
3	> Philosophy: Every pixel has purpose. Restraint is luxury. User psychology drives decisions.
4	> Core Principle: THINK, don't memorize. ASK, don't assume.
5
6	---
7
8	## 🎯 Selective Reading Rule (MANDATORY)
9
10	Read REQUIRED files always, OPTIONAL only when needed:
11
12	\| File \| Status \| When to Read \|
13	\|------\|--------\|--------------\|
14	\| [ux-psychology.md](ux-psychology.md) \| 🔴 REQUIRED \| Always read first! \|
15	\| [color-system.md](color-system.md) \| ⚪ Optional \| Color/palette decisions \|
16	\| [typography-system.md](typography-system.md) \| ⚪ Optional \| Font selection/pairing \|
17	\| [visual-effects.md](visual-effects.md) \| ⚪ Optional \| Glassmorphism, shadows, gradients \|
18	\| [animation-guide.md](animation-guide.md) \| ⚪ Optional \| Animation needed \|
19	\| [motion-graphics.md](motion-graphics.md) \| ⚪ Optional \| Lottie, GSAP, 3D \|
20	\| [decision-trees.md](decision-trees.md) \| ⚪ Optional \| Context templates \|
21
22	> 🔴 ux-psychology.md = ALWAYS READ. Others = only if relevant.
23
24	---
25
26	## 🔧 Runtime Scripts
27
28	Execute these for audits (don't read, just run):
29
30	\| Script \| Purpose \| Usage \|
31	\|--------\|---------\|-------\|
32	\| `scripts/ux_audit.py` \| UX Psychology & Accessibility Audit \| `python scripts/ux_audit.py <project_path>` \|
33
34	---
35
36	## ⚠️ CRITICAL: ASK BEFORE ASSUMING (MANDATORY)
37
38	> STOP! If the user's request is open-ended, DO NOT default to your favorites.
39
40	### When User Prompt is Vague, ASK:
41
42	Color not specified? Ask:
43	> "What color palette do you prefer? (blue/green/orange/neutral/other?)"
44
45	Style not specified? Ask:
46	> "What style are you going for? (minimal/bold/retro/futuristic/organic?)"
47
48	Layout not specified? Ask:
49	> "Do you have a layout preference? (single column/grid/asymmetric/full-width?)"
50
51	### ⛔ DEFAULT TENDENCIES TO AVOID (ANTI-SAFE HARBOR):
52
53	\| AI Default Tendency \| Why It's Bad \| Think Instead \|
54	\|---------------------\|--------------\|---------------\|
55	\| Bento Grids (Modern Cliché) \| Used in every AI design \| Why does this content NEED a grid? \|
56	\| Hero Split (Left/Right) \| Predictable & Boring \| How about Massive Typography or Vertical Narrative? \|
57	\| Mesh/Aurora Gradients \| The "new" lazy background \| What's a radical color pairing? \|
58	\| Glassmorphism \| AI's idea of "premium" \| How about solid, high-contrast flat? \|
59	\| Deep Cyan / Fintech Blue \| Safe harbor from purple ban \| Why not Red, Black, or Neon Green? \|
60	\| "Orchestrate / Empower" \| AI-generated copywriting \| How would a human say this? \|
61	\| Dark background + neon glow \| Overused, "AI look" \| What does the BRAND actually need? \|
62	\| Rounded everything \| Generic/Safe \| Where can I use sharp, brutalist edges? \|
63
64	> 🔴 "Every 'safe' structure you choose brings you one step closer to a generic template. TAKE RISKS."
65
66	---
67
68	## 1. Constraint Analysis (ALWAYS FIRST)
69
70	Before any design work, ANSWER THESE or ASK USER:
71
72	\| Constraint \| Question \| Why It Matters \|
73	\|------------\|----------\|----------------\|
74	\| Timeline \| How much time? \| Determines complexity \|
75	\| Content \| Ready or placeholder? \| Affects layout flexibility \|
76	\| Brand \| Existing guidelines? \| May dictate colors/fonts \|
77	\| Tech \| What stack? \| Affects capabilities \|
78	\| Audience \| Who exactly? \| Drives all visual decisions \|
79
80	### Audience → Design Approach
81
82	\| Audience \| Think About \|
83	\|----------\|-------------\|
84	\| Gen Z \| Bold, fast, mobile-first, authentic \|
85	\| Millennials \| Clean, minimal, value-driven \|
86	\| Gen X \| Familiar, trustworthy, clear \|
87	\| Boomers \| Readable, high contrast, simple \|
88	\| B2B \| Professional, data-focused, trust \|
89	\| Luxury \| Restrained elegance, whitespace \|
90
91	---
92
93	## 2. UX Psychology Principles
94
95	### Core Laws (Internalize These)
96
97	\| Law \| Principle \| Application \|
98	\|-----\|-----------\|-------------\|
99	\| Hick's Law \| More choices = slower decisions \| Limit options, use progressive disclosure \|
100	\| Fitts' Law \| Bigger + closer = easier to click \| Size CTAs appropriately \|
101	\| Miller's Law \| ~7 items in working memory \| Chunk content into groups \|
102	\| Von Restorff \| Different = memorable \| Make CTAs visually distinct \|
103	\| Serial Position \| First/last remembered most \| Key info at start/end \|
104
105	### Emotional Design Levels
106
107	```
108	VISCERAL (instant) → First impression: colors, imagery, overall feel
109	BEHAVIORAL (use) → Using it: speed, feedback, efficiency
110	REFLECTIVE (memory) → After: "I like what this says about me"
111	```
112
113	### Trust Building
114
115	- Security indicators on sensitive actions
116	- Social proof where relevant
117	- Clear contact/support access
118	- Consistent, professional design
119	- Transparent policies
120
121	---
122
123	## 3. Layout Principles
124
125	### Golden Ratio (φ = 1.618)
126
127	```
128	Use for proportional harmony:
129	├── Content : Sideba

People who liked this also viewed

6 picks

Type