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](ux-psychology.md) | 🔴 **REQUIRED** | Always read first! |
| [color-system.md](color-system.md) | ⚪ Optional | Color/palette decisions |
| [typography-system.md](typography-system.md) | ⚪ Optional | Font selection/pairing |
| [visual-effects.md](visual-effects.md) | ⚪ Optional | Glassmorphism, shadows, gradients |
| [animation-guide.md](animation-guide.md) | ⚪ Optional | Animation needed |
| [motion-graphics.md](motion-graphics.md) | ⚪ Optional | Lottie, GSAP, 3D |
| [decision-trees.md](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:](./sub-skills/when-user-prompt-is-vague-ask.md)
### 2. [⛔ DEFAULT TENDENCIES TO AVOID (ANTI-SAFE HARBOR):](./sub-skills/default-tendencies-to-avoid-anti-safe-harbor.md)
### 3. [Audience → Design Approach](./sub-skills/audience-design-approach.md)
### 4. [Core Laws (Internalize These)](./sub-skills/core-laws-internalize-these.md)
### 5. [Emotional Design Levels](./sub-skills/emotional-design-levels.md)
### 6. [Trust Building](./sub-skills/trust-building.md)
### 7. [Golden Ratio (φ = 1.618)](./sub-skills/golden-ratio-1618.md)
### 8. [8-Point Grid Concept](./sub-skills/8-point-grid-concept.md)
### 9. [Key Sizing Principles](./sub-skills/key-sizing-principles.md)
### 10. [60-30-10 Rule](./sub-skills/60-30-10-rule.md)
### 11. [Color Psychology (For Decision Making)](./sub-skills/color-psychology-for-decision-making.md)
### 12. [Selection Process](./sub-skills/selection-process.md)
### 13. [Scale Selection](./sub-skills/scale-selection.md)
### 14. [Pairing Concept](./sub-skills/pairing-concept.md)
### 15. [Readability Rules](./sub-skills/readability-rules.md)
### 16. [Glassmorphism (When Appropriate)](./sub-skills/glassmorphism-when-appropriate.md)
### 17. [Shadow Hierarchy](./sub-skills/shadow-hierarchy.md)
### 18. [Gradient Usage](./sub-skills/gradient-usage.md)
### 19. [Timing Concept](./sub-skills/timing-concept.md)
### 20. [Easing Selection](./sub-skills/easing-selection.md)
### 21. [Performance](./sub-skills/performance.md)
### 22. [Premium Indicators](./sub-skills/premium-indicators.md)
### 23. [Trust Builders](./sub-skills/trust-builders.md)
### 24. [Emotional Triggers](./sub-skills/emotional-triggers.md)
### 25. [❌ Lazy Design Indicators](./sub-skills/lazy-design-indicators.md)
### 26. [❌ AI Tendency Patterns (AVOID!)](./sub-skills/ai-tendency-patterns-avoid.md)
### 27. [❌ Dark Patterns (Unethical)](./sub-skills/dark-patterns-unethical.md)