How do I install the Frontend Design skill?

Run npx skillmds@latest add dokhacgiakhoa/frontend-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Frontend Design skill do?

Design thinking and decision-making for web UI. It is listed under Web & Frontend on SkillMD.

Is Frontend Design safe to use?

SkillMD's automated safety review verdict for this skill is PASS. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: executes scripts. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Frontend Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Frontend Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Frontend Design?

Dokhacgiakhoa (@dokhacgiakhoa) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Frontend Design by dokhacgiakhoa — Agent Skill

Name: Frontend Design
Rating: 4.2 (5 reviews)
Author: Dokhacgiakhoa

File contents

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)

---name: frontend-designdescription: Design thinking and decision-making for web UI.--- # 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)

Frequently asked questions

Frontend Design