34k tokens
context cost
the whole folder, loaded on every use
37
files
ships runnable scripts
0
copies elsewhere
how many repositories repackaged it
505
stars on the repo
on the repository, not the skill itself
Install
one command, takes just this skill from the repository
npx skills add https://github.com/Dokhacgiakhoa/Agent-Skills-4-Vibe-Coding-CLI --skill frontend-design
What comes with it
131 728 bytes besides the instruction
animation-guide.md
color-system.md
decision-trees.md
motion-graphics.md
scripts/accessibility_checker.py
scripts/ux_audit.py
sub-skills/60-30-10-rule.md
sub-skills/8-point-grid-concept.md
sub-skills/ai-tendency-patterns-avoid.md
sub-skills/audience-design-approach.md
sub-skills/color-psychology-for-decision-making.md
sub-skills/core-laws-internalize-these.md
sub-skills/dark-patterns-unethical.md
sub-skills/default-tendencies-to-avoid-anti-safe-harbor.md
sub-skills/easing-selection.md
sub-skills/emotional-design-levels.md
sub-skills/emotional-triggers.md
sub-skills/glassmorphism-when-appropriate.md
sub-skills/golden-ratio-1618.md
sub-skills/gradient-usage.md
sub-skills/key-sizing-principles.md
sub-skills/lazy-design-indicators.md
sub-skills/pairing-concept.md
sub-skills/performance.md
sub-skills/premium-indicators.md
sub-skills/readability-rules.md
sub-skills/scale-selection.md
sub-skills/selection-process.md
sub-skills/shadow-hierarchy.md
sub-skills/timing-concept.md
sub-skills/trust-builders.md
sub-skills/trust-building.md
sub-skills/when-user-prompt-is-vague-ask.md
typography-system.md
ux-psychology.md
visual-effects.md
The instruction itself
32 sections, as written by the author
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
22. Premium Indicators
23. Trust Builders
24. Emotional Triggers
25. ❌ Lazy Design Indicators
26. ❌ AI Tendency Patterns (AVOID!)
27. ❌ Dark Patterns (Unethical)