frontend-design

star 444

Design thinking and decision-making for web UI.

Dokhacgiakhoa By Dokhacgiakhoa schedule Updated 2/11/2026

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)

Install via CLI
npx skills add https://github.com/Dokhacgiakhoa/antigravity-ide --skill frontend-design
Repository Details
star Stars 444
call_split Forks 137
navigation Branch main
article Path SKILL.md
More from Creator
Dokhacgiakhoa
Dokhacgiakhoa Explore all skills →