ahmad-ubaidillah/frontend-design
aizen-gate/skills-reference/.agent/skills/frontend-design/SKILL.md
Design thinking and decision-making for web UI.
development
Updated Mar 27, 2026
$ install --global
skillsauthnpx skillsauth add ahmad-ubaidillah/aizen-gate frontend-designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Mar 30, 2026, 9:12 AM62.1s35 files scanned
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 | 🔴 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)
Related Skills
ahmad-ubaidillah/angular
development
VerifiedTrustedCommunity
Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns.
SKILL.mdUpdated Mar 28, 2026
ahmad-ubaidillah/angular-ui-patterns
development
VerifiedTrustedCommunity
Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.
SKILL.mdUpdated Mar 28, 2026
ahmad-ubaidillah/angular-state-management
tools
VerifiedTrustedCommunity
Master modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solutions, or migrating from legacy patterns.
SKILL.mdUpdated Mar 28, 2026
ahmad-ubaidillah/angular-migration
development
VerifiedTrustedCommunity
Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning framework migrations, or ...
SKILL.mdUpdated Mar 28, 2026