Frontend Design

Name: Frontend Design
Author: Dokhacgiakhoa

ASecurity

Design thinking and decision-making for web UI.

508 stars

0 votes

0 copies

0 views

Added 9/7/2026

developmentpythonrustgoawsfrontendperformance

Security Analysis

A100/100

Pro scans all 20 files and shows the line behind each finding

Scanned 9/7/2026

$npx -y skills add Dokhacgiakhoa/antigravity-ide --skill frontend-design --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Frontend Design?

Add the live security badge to your README — it updates automatically with every re-scan.

Security grade badge for Frontend Design

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/dokhacgiakhoa-frontend-design-agent-skills-4-vibe-coding-cli/badge)](https://www.skillsdirectory.com/skills/dokhacgiakhoa-frontend-design-agent-skills-4-vibe-coding-cli)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

Files

SKILL.md

---
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)

Attribution

Dokhacgiakhoa

View source See grades on GitHub More from Dokhacgiakhoa →

SSkills DirectorySkills Directory

Ship a skill? Prove it's safe.

Free 120-pattern security scan, letter grade, and an embeddable README badge.

Submit a skill

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments (0)

No comments yet. Be the first to comment!

--- 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)