foliko 1.0.80 → 1.0.81

package/.agent/skills/frontend-design/decision-trees.md

@@ -1,418 +0,0 @@
-# Decision Trees & Context Templates
-
-> Context-based design THINKING, not fixed solutions.
-> **These are decision GUIDES, not copy-paste templates.**
-> **For UX psychology principles (Hick's, Fitts', etc.) see:** [ux-psychology.md](ux-psychology.md)
-
----
-
-## ⚠️ How to Use This File
-
-This file helps you DECIDE, not copy.
-
-- Decision trees → Help you THINK through options
-- Templates → Show STRUCTURE and PRINCIPLES, not exact values
-- **Always ask user preferences** before applying
-- **Generate fresh palettes** based on context, don't copy hex codes
-- **Apply UX laws** from ux-psychology.md to validate decisions
-
----
-
-## 1. Master Decision Tree
-
-```
-┌─────────────────────────────────────────────────────────────┐
-│                     WHAT ARE YOU BUILDING?                   │
-└─────────────────────────────────────────────────────────────┘
-                              │
-        ┌─────────────────────┼─────────────────────┐
-        │                     │                     │
-        ▼                     ▼                     ▼
-   E-COMMERCE            SaaS/APP              CONTENT
-   - Product pages       - Dashboard           - Blog
-   - Checkout            - Tools               - Portfolio
-   - Catalog             - Admin               - Landing
-        │                     │                     │
-        ▼                     ▼                     ▼
-   PRINCIPLES:           PRINCIPLES:           PRINCIPLES:
-   - Trust               - Functionality       - Storytelling
-   - Action              - Clarity             - Emotion
-   - Urgency             - Efficiency          - Creativity
-```
-
----
-
-## 2. Audience Decision Tree
-
-### Who is your target user?
-
-```
-TARGET AUDIENCE
-      │
-      ├── Gen Z (18-25)
-      │   ├── Colors: Bold, vibrant, unexpected combinations
-      │   ├── Type: Large, expressive, variable
-      │   ├── Layout: Mobile-first, vertical, snackable
-      │   ├── Effects: Motion, gamification, interactive
-      │   └── Approach: Authentic, fast, no corporate feel
-      │
-      ├── Millennials (26-41)
-      │   ├── Colors: Muted, earthy, sophisticated
-      │   ├── Type: Clean, readable, functional
-      │   ├── Layout: Responsive, card-based, organized
-      │   ├── Effects: Subtle, purposeful only
-      │   └── Approach: Value-driven, transparent, sustainable
-      │
-      ├── Gen X (42-57)
-      │   ├── Colors: Professional, trusted, conservative
-      │   ├── Type: Familiar, clear, no-nonsense
-      │   ├── Layout: Traditional hierarchy, predictable
-      │   ├── Effects: Minimal, functional feedback
-      │   └── Approach: Direct, efficient, reliable
-      │
-      ├── Boomers (58+)
-      │   ├── Colors: High contrast, simple, clear
-      │   ├── Type: Large sizes, high readability
-      │   ├── Layout: Simple, linear, uncluttered
-      │   ├── Effects: None or very minimal
-      │   └── Approach: Clear, detailed, trustworthy
-      │
-      └── B2B / Enterprise
-          ├── Colors: Professional palette, muted
-          ├── Type: Clean, data-friendly, scannable
-          ├── Layout: Grid-based, organized, efficient
-          ├── Effects: Professional, subtle
-          └── Approach: Expert, solution-focused, ROI-driven
-```
-
----
-
-## 3. Color Selection Decision Tree
-
-### Instead of fixed hex codes, use this process:
-
-```
-WHAT EMOTION/ACTION DO YOU WANT?
-            │
-            ├── Trust & Security
-            │   └── Consider: Blue family, professional neutrals
-            │       → ASK user for specific shade preference
-            │
-            ├── Growth & Health
-            │   └── Consider: Green family, natural tones
-            │       → ASK user if eco/nature/wellness focus
-            │
-            ├── Urgency & Action
-            │   └── Consider: Warm colors (orange/red) as ACCENTS
-            │       → Use sparingly, ASK if appropriate
-            │
-            ├── Luxury & Premium
-            │   └── Consider: Deep darks, metallics, restrained palette
-            │       → ASK about brand positioning
-            │
-            ├── Creative & Playful
-            │   └── Consider: Multi-color, unexpected combinations
-            │       → ASK about brand personality
-            │
-            └── Calm & Minimal
-                └── Consider: Neutrals with single accent
-                    → ASK what accent color fits brand
-```
-
-### The Process:
-1. Identify the emotion needed
-2. Narrow to color FAMILY
-3. ASK user for preference within family
-4. Generate fresh palette using HSL principles
-
----
-
-## 4. Typography Decision Tree
-
-```
-WHAT'S THE CONTENT TYPE?
-          │
-          ├── Data-Heavy (Dashboard, SaaS)
-          │   ├── Style: Sans-serif, clear, compact
-          │   ├── Scale: Tighter ratio (1.125-1.2)
-          │   └── Priority: Scannability, density
-          │
-          ├── Editorial (Blog, Magazine)
-          │   ├── Style: Serif heading + Sans body works well
-          │   ├── Scale: More dramatic (1.333+)
-          │   └── Priority: Reading comfort, hierarchy
-          │
-          ├── Modern Tech (Startup, SaaS Marketing)
-          │   ├── Style: Geometric or humanist sans
-          │   ├── Scale: Balanced (1.25)
-          │   └── Priority: Modern feel, clarity
-          │
-          ├── Luxury (Fashion, Premium)
-          │   ├── Style: Elegant serif or thin sans
-          │   ├── Scale: Dramatic (1.5-1.618)
-          │   └── Priority: Sophistication, whitespace
-          │
-          └── Playful (Kids, Games, Casual)
-              ├── Style: Rounded, friendly fonts
-              ├── Scale: Varied, expressive
-              └── Priority: Fun, approachable, readable
-```
-
-### Selection Process:
-1. Identify content type
-2. Choose style DIRECTION
-3. ASK user if they have brand fonts
-4. Select fonts that match direction
-
----
-
-## 5. E-commerce Guidelines {#e-commerce}
-
-### Key Principles (Not Fixed Rules)
-- **Trust first:** How will you show security?
-- **Action-oriented:** Where are the CTAs?
-- **Scannable:** Can users compare quickly?
-
-### Color Thinking:
-```
-E-commerce typically needs:
-├── Trust color (often blue family) → ASK preference
-├── Clean background (white/neutral) → depends on brand
-├── Action accent (for CTAs, sales) → depends on urgency level
-├── Success/error semantics → standard conventions work
-└── Brand integration → ASK about existing colors
-```
-
-### Layout Principles:
-```
-┌────────────────────────────────────────────────────┐
-│  HEADER: Brand + Search + Cart                      │
-│  (Keep essential actions visible)                   │
-├────────────────────────────────────────────────────┤
-│  TRUST ZONE: Why trust this site?                   │
-│  (Shipping, returns, security - if applicable)      │
-├────────────────────────────────────────────────────┤
-│  HERO: Primary message or offer                     │
-│  (Clear CTA, single focus)                          │
-├────────────────────────────────────────────────────┤
-│  CATEGORIES: Easy navigation                        │
-│  (Visual, filterable, scannable)                    │
-├────────────────────────────────────────────────────┤
-│  PRODUCTS: Easy comparison                          │
-│  (Price, rating, quick actions visible)             │
-├────────────────────────────────────────────────────┤
-│  SOCIAL PROOF: Why others trust                     │
-│  (Reviews, testimonials - if available)             │
-├────────────────────────────────────────────────────┤
-│  FOOTER: All the details                            │
-│  (Policies, contact, trust badges)                  │
-└────────────────────────────────────────────────────┘
-```
-
-### Psychology to Apply:
-- Hick's Law: Limit navigation choices
-- Fitts' Law: Size CTAs appropriately
-- Social proof: Show where relevant
-- Scarcity: Use honestly if at all
-
----
-
-## 6. SaaS Dashboard Guidelines {#saas}
-
-### Key Principles
-- **Functional first:** Data clarity over decoration
-- **Calm UI:** Reduce cognitive load
-- **Consistent:** Predictable patterns
-
-### Color Thinking:
-```
-Dashboard typically needs:
-├── Background: Light OR dark (ASK preference)
-├── Surface: Slight contrast from background
-├── Primary accent: For key actions
-├── Data colors: Success/warning/danger semantics
-└── Muted: For secondary information
-```
-
-### Layout Principles:
-```
-Consider these patterns (not mandated):
-
-OPTION A: Sidebar + Content
-├── Fixed sidebar for navigation
-└── Main area for content
-
-OPTION B: Top nav + Content
-├── Horizontal navigation
-└── More horizontal content space
-
-OPTION C: Collapsed + Expandable
-├── Icon-only sidebar expands
-└── Maximum content area
-
-→ ASK user about their navigation preference
-```
-
-### Psychology to Apply:
-- Hick's Law: Group navigation items
-- Miller's Law: Chunk information
-- Cognitive Load: Whitespace, consistency
-
----
-
-## 7. Landing Page Guidelines {#landing-page}
-
-### Key Principles
-- **Hero-centric:** First impression matters most
-- **Single focus:** One primary CTA
-- **Emotional:** Connect before selling
-
-### Color Thinking:
-```
-Landing page typically needs:
-├── Brand primary: Hero background or accent
-├── Clean secondary: Most of page
-├── CTA color: Stands out from everything
-├── Supporting: For sections, testimonials
-└── ASK about brand colors first!
-```
-
-### Structure Principles:
-```
-┌────────────────────────────────────────────────────┐
-│  Navigation: Minimal, CTA visible                   │
-├────────────────────────────────────────────────────┤
-│  HERO: Hook + Value + CTA                          │
-│  (Most important section, biggest impact)           │
-├────────────────────────────────────────────────────┤
-│  PROBLEM: What pain do they have?                   │
-├────────────────────────────────────────────────────┤
-│  SOLUTION: How you solve it                         │
-├────────────────────────────────────────────────────┤
-│  PROOF: Why believe you?                            │
-│  (Testimonials, logos, stats)                       │
-├────────────────────────────────────────────────────┤
-│  HOW: Simple explanation of process                 │
-├────────────────────────────────────────────────────┤
-│  PRICING: If applicable                             │
-├────────────────────────────────────────────────────┤
-│  FAQ: Address objections                            │
-├────────────────────────────────────────────────────┤
-│  FINAL CTA: Repeat main action                      │
-└────────────────────────────────────────────────────┘
-```
-
-### Psychology to Apply:
-- Visceral: Beautiful hero impression
-- Serial Position: Key info top/bottom
-- Social Proof: Testimonials work
-
----
-
-## 8. Portfolio Guidelines {#portfolio}
-
-### Key Principles
-- **Personality:** Show who you are
-- **Work-focused:** Let projects speak
-- **Memorable:** Stand out from templates
-
-### Color Thinking:
-```
-Portfolio is personal - many options:
-├── Minimal: Neutrals + one signature accent
-├── Bold: Unexpected color choices
-├── Dark: Moody, artistic feel
-├── Light: Clean, professional feel
-└── ASK about personal brand identity!
-```
-
-### Structure Principles:
-```
-┌────────────────────────────────────────────────────┐
-│  Navigation: Unique to your personality             │
-├────────────────────────────────────────────────────┤
-│  INTRO: Who you are, what you do                   │
-│  (Make it memorable, not generic)                   │
-├────────────────────────────────────────────────────┤
-│  WORK: Featured projects                            │
-│  (Large, visual, interactive)                       │
-├────────────────────────────────────────────────────┤
-│  ABOUT: Personal story                              │
-│  (Creates connection)                               │
-├────────────────────────────────────────────────────┤
-│  CONTACT: Easy to reach                             │
-│  (Clear, direct)                                    │
-└────────────────────────────────────────────────────┘
-```
-
-### Psychology to Apply:
-- Von Restorff: Be uniquely memorable
-- Reflective: Personal story creates connection
-- Emotional: Personality over professionalism
-
----
-
-## 9. Pre-Design Checklists
-
-### Before Starting ANY Design
-
-- [ ] **Audience defined?** (who exactly)
-- [ ] **Primary goal identified?** (what action)
-- [ ] **Constraints known?** (time, brand, tech)
-- [ ] **Content available?** (or placeholders needed)
-- [ ] **User preferences asked?** (colors, style, layout)
-
-### Before Choosing Colors
-
-- [ ] **Asked user preference?**
-- [ ] **Considered context?** (industry, emotion)
-- [ ] **Different from your default?**
-- [ ] **Checked accessibility?**
-
-### Before Finalizing Layout
-
-- [ ] **Hierarchy clear?**
-- [ ] **Primary CTA obvious?**
-- [ ] **Mobile considered?**
-- [ ] **Content fits structure?**
-
-### Before Delivery
-
-- [ ] **Looks premium, not generic?**
-- [ ] **Would you be proud of this?**
-- [ ] **Different from last project?**
-
----
-
-## 10. Complexity Estimation
-
-### Quick Projects (Hours)
-```
-Simple landing page
-Small portfolio
-Basic form
-Single component
-```
-→ Approach: Minimal decisions, focused execution
-
-### Medium Projects (Days)
-```
-Multi-page site
-Dashboard with modules
-E-commerce category
-Complex forms
-```
-→ Approach: Establish tokens, custom components
-
-### Large Projects (Weeks)
-```
-Full SaaS application
-E-commerce platform
-Custom design system
-Complex workflows
-```
-→ Approach: Full design system, documentation, testing
-
----
-
-> **Remember**: These templates show STRUCTURE and THINKING process. Every project needs fresh color, typography, and styling decisions based on its unique context. ASK when unclear.