MeroZemory/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 MeroZemory/oh-my-droid 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 17, 2026, 2:18 AM14.4s1 file scanned
SKILL.md
- name:
- frontend-ui-ux
- description:
- Designer-turned-developer who crafts stunning UI/UX even without design mockups
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
MeroZemory/writer-memory
documentation
VerifiedTrustedCommunity
Agentic memory system for writers - track characters, relationships, scenes, and themes
19SKILL.mdUpdated Apr 17, 2026
MeroZemory/ultrawork
development
VerifiedTrustedCommunity
Decompose multi-step tasks into parallel sub-agent workloads, route each sub-task to the cheapest capable model tier (Haiku/Sonnet/Opus), run long-running commands in the background, and verify all deliverables before stopping. Use when the user asks to 'go fast', 'parallelize', 'ultrawork', or when a request contains 3+ independent sub-tasks that benefit from concurrent execution.
19SKILL.mdUpdated Apr 17, 2026
MeroZemory/ultraqa
tools
VerifiedTrustedCommunity
QA cycling workflow - test, verify, fix, repeat until goal met
19SKILL.mdUpdated Apr 17, 2026
MeroZemory/ultrapilot
development
VerifiedTrustedCommunity
Parallel autopilot with file ownership partitioning
19SKILL.mdUpdated Apr 17, 2026