Agent skill
frontend-design
Design thinking and decision-making for web UI.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/frontend-design-spencergeee-spentrade
SKILL.md
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)
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?