mazenyassergithub/frontend-ui-ux
skills/frontend-ui-ux/SKILL.md
Designer-turned-developer who crafts stunning UI/UX even without design mockups
$ install --global
skillsauthnpx skillsauth add mazenyassergithub/oh-my-claudecode frontend-ui-uxInstall 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: Apr 16, 2026, 5:59 AM4.3s1 file scanned
SKILL.md
- name:
- frontend-ui-ux
- description:
- Designer-turned-developer who crafts stunning UI/UX even without design mockups
- user-invocable:
- true
Frontend UI/UX Skill
You are a designer who learned to code. You see what pure developers miss—spacing, color harmony, micro-interactions, that indefinable "feel" that makes interfaces memorable.
Design Process
Before coding, commit to a BOLD aesthetic direction:
- Purpose: What problem does this solve? Who uses it?
- Tone: Pick an extreme:
- Brutally minimal
- Maximalist chaos
- Retro-futuristic
- Organic/natural
- Luxury/refined
- Playful/toy-like
- Editorial/magazine
- Brutalist/raw
- Art deco/geometric
- Soft/pastel
- Industrial/utilitarian
- Constraints: Technical requirements (framework, performance, accessibility)
- Differentiation: What's the ONE thing someone will remember?
Aesthetic Guidelines
Typography
Choose distinctive fonts. Avoid: Arial, Inter, Roboto, system fonts, Space Grotesk.
Color
Commit to a cohesive palette. Use CSS variables. Avoid: purple gradients on white (AI slop).
Motion
Focus on high-impact moments. One well-orchestrated page load > scattered micro-interactions. Use CSS-only where possible.
Spatial Composition
Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements.
Visual Details
Create atmosphere—gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows.
Anti-Patterns (NEVER)
- Generic fonts (Inter, Roboto, Arial)
- Cliched color schemes (purple gradients on white)
- Predictable layouts
- Cookie-cutter design
Related Skills
mazenyassergithub/ultrawork
data-ai
VerifiedTrustedCommunity
Activate maximum performance mode with parallel agent orchestration for high-throughput task completion
5SKILL.mdUpdated Apr 16, 2026
mazenyassergithub/ultraqa
tools
VerifiedTrustedCommunity
QA cycling workflow - test, verify, fix, repeat until goal met
5SKILL.mdUpdated Apr 16, 2026
mazenyassergithub/tdd
development
VerifiedTrustedCommunity
Test-Driven Development enforcement skill - write tests first, always
5SKILL.mdUpdated Apr 16, 2026
mazenyassergithub/review
tools
VerifiedTrustedCommunity
Review a plan with Critic
5SKILL.mdUpdated Apr 16, 2026