frontend-design

name	frontend-design
description	Design thinking and decision-making for web UI.
category	design
version	4.1.0-fractal
layer	master-skill

Frontend Design System

Philosophy: Every pixel has purpose. Restraint is luxury. User psychology drives decisions. Core Principle: THINK, don't memorize. ASK, don't assume.

---

🎯 Selective Reading Rule (MANDATORY)

Read REQUIRED files always, OPTIONAL only when needed:

File	Status	When to Read
ux-psychology.md	🔴 REQUIRED	Always read first!
color-system.md	⚪ Optional	Color/palette decisions
typography-system.md	⚪ Optional	Font selection/pairing
visual-effects.md	⚪ Optional	Glassmorphism, shadows, gradients
animation-guide.md	⚪ Optional	Animation needed
motion-graphics.md	⚪ Optional	Lottie, GSAP, 3D
decision-trees.md	⚪ Optional	Context templates

🔴 ux-psychology.md = ALWAYS READ. Others = only if relevant.

---

🔧 Runtime Scripts

Execute these for audits (don't read, just run):

Script	Purpose	Usage
scripts/ux_audit.py	UX Psychology & Accessibility Audit	python scripts/ux_audit.py <project_path>

---

⚠️ CRITICAL: ASK BEFORE ASSUMING (MANDATORY)

STOP! If the user's request is open-ended, DO NOT default to your favorites.

🧠 Knowledge Modules (Fractal Skills)

1. When User Prompt is Vague, ASK:

2. ⛔ DEFAULT TENDENCIES TO AVOID (ANTI-SAFE HARBOR):

3. Audience → Design Approach

4. Core Laws (Internalize These)

5. Emotional Design Levels

6. Trust Building

7. Golden Ratio (φ = 1.618)

8. 8-Point Grid Concept

9. Key Sizing Principles

10. 60-30-10 Rule

11. Color Psychology (For Decision Making)

12. Selection Process

13. Scale Selection

14. Pairing Concept

15. Readability Rules

16. Glassmorphism (When Appropriate)

17. Shadow Hierarchy

18. Gradient Usage

19. Timing Concept

20. Easing Selection

21. Performance

22. Premium Indicators

23. Trust Builders

24. Emotional Triggers

25. ❌ Lazy Design Indicators

26. ❌ AI Tendency Patterns (AVOID!)

27. ❌ Dark Patterns (Unethical)