← Back to list
ux-psychology
by kokatsu
⭐ 0🍴 0📅 Jan 25, 2026
Run in ManusSKILL.md
name: ux-psychology description: Apply UX psychology principles when building UI components, forms, pricing pages, onboarding flows, checkout experiences, modals, or any user-facing interface. Use when designing CTAs, implementing progress indicators, creating loading states, improving user engagement, or reviewing UI for psychological effectiveness. user-invocable: false
UX Psychology Frontend Development Guide
Apply these 46 UX psychology principles to predict user behavior and design more effective interfaces. This skill provides actionable guidelines with code examples for frontend implementation.
Quick Reference
| Category | Key Concepts | When to Use |
|---|---|---|
| Cognition | Cognitive Load, Selective Attention, Banner Blindness | Forms, information-dense pages |
| Biases | Anchor, Confirmation, Expectation, Familiarity | Pricing, comparisons, navigation |
| Behavioral | Nudge, Default, Decoy, Framing, Priming | Conversions, sign-ups, purchases |
| Value | Loss Aversion, Scarcity, Endowment, Sunk Cost | Retention, urgency, personalization |
| Engagement | Gamification, Variable Reward, Goal Gradient, Zeigarnik | Progress tracking, habit formation |
| Experience | Peak-End Rule, User Delight, Labor Illusion | Loading states, completion flows |
| UI Design | Doherty Threshold, Progressive Disclosure, Visual Hierarchy | Performance, layout, navigation |
| Social | Social Proof, Halo Effect | Trust building, credibility |
| Caution | Reactance, Decision Fatigue, Intentional Friction | Avoiding dark patterns |
| Research | Hawthorne Effect, Survey Bias, Empathy Gap | User testing, research design |
Core Principles Summary
Reduce Friction
- Split complex forms into steps (Cognitive Load)
- Use skeleton UI for loads over 400ms (Doherty Threshold)
- Set smart defaults (Default Bias)
- Limit choices to reduce fatigue (Decision Fatigue)
Guide Behavior
- Show original price before discount (Anchor Effect)
- Frame positively: "90% success" not "10% failure" (Framing)
- Use progress bars near completion (Goal Gradient)
- Ask satisfaction before reviews (Priming)
Create Value
- Show what users lose on cancel (Loss Aversion)
- Display limited stock/time (Scarcity)
- Personalize the experience (Endowment Effect)
- Celebrate completions (Peak-End Rule)
Build Trust
- Show reviews, user counts, logos (Social Proof)
- Provide value before asking for payment (Reactance)
- Add confirmation for destructive actions (Intentional Friction)
Implementation Checklist
See checklist.md for a complete checklist to review your UI against these principles.
Detailed References
Each concept file contains:
- Definition and psychological basis
- Implementation guidelines
- Code examples (JSX/CSS)
- Common patterns
Browse by category:
- Cognition & Perception - Managing mental effort
- Biases - Leveraging cognitive shortcuts
- Behavioral Guidance - Influencing decisions
- Value Perception - Creating perceived value
- Engagement - Driving continued use
- Experience Design - Memorable moments
- UI Design Principles - Visual and interaction patterns
- Social Influence - Trust and credibility
- Effects to Watch - Avoiding pitfalls
- Research Considerations - Testing awareness
Source
Score
Total Score
60/100
Based on repository quality metrics
✓SKILL.md
SKILL.mdファイルが含まれている
+20
✓LICENSE
ライセンスが設定されている
+10
○説明文
100文字以上の説明がある
0/10
○人気
GitHub Stars 100以上
0/15
○最近の活動
3ヶ月以内に更新がある
0/10
○フォーク
10回以上フォークされている
0/5
✓Issue管理
オープンIssueが50未満
+5
✓言語
プログラミング言語が設定されている
+5
○タグ
1つ以上のタグが設定されている
0/5
Reviews
💬
Reviews coming soon