taewoongheo/.claude/skills/ui-ux-pro-max
.claude/skills/ui-ux-pro-max/SKILL.md
Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types.
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add taewoongheo/taste .claude/skills/ui-ux-pro-maxInstall 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:52 PM139.6s1 file scanned
SKILL.md
- description:
- Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types.
UI/UX Pro Max - Design Intelligence
When to Apply
Reference guidelines when designing UI components, choosing color/typography, reviewing code for UX issues, building landing pages/dashboards, or implementing accessibility requirements.
Rule Categories by Priority
| Priority | Category | Impact | Domain | |----------|----------|--------|--------| | 1 | Accessibility | CRITICAL | ux | | 2 | Touch & Interaction | CRITICAL | ux | | 3 | Performance | HIGH | ux | | 4 | Layout & Responsive | HIGH | ux | | 5 | Typography & Color | MEDIUM | typography, color | | 6 | Animation | MEDIUM | ux | | 7 | Style Selection | MEDIUM | style, product | | 8 | Charts & Data | LOW | chart |
Quick Reference Rules
Accessibility (CRITICAL)
- color-contrast: 4.5:1 minimum
- focus-states: visible rings
- alt-text: descriptive
- aria-labels: icon buttons
- keyboard-nav: tab order matches visual
- form-labels: use
forattribute
Touch & Interaction (CRITICAL)
- touch-target-size: 44x44px minimum
- hover-vs-tap: click/tap primary
- loading-buttons: disable during async
- error-feedback: clear messages
- cursor-pointer: add to all clickable elements
Performance (HIGH)
- image-optimization: WebP, srcset, lazy load
- reduced-motion: check
prefers-reduced-motion - content-jumping: reserve space (prevent CLS)
Layout & Responsive (HIGH)
- viewport-meta: device-width, initial-scale=1
- readable-font-size: 16px mobile minimum
- horizontal-scroll: prevent overflow
- z-index-management: define scale
Typography & Color (MEDIUM)
- line-height: 1.5-1.75 body text
- line-length: 65-75 characters
- font-pairing: match personalities
Animation (MEDIUM)
- duration-timing: 150-300ms
- transform-performance: use transform/opacity only
- loading-states: skeletons or spinners
Style Selection (MEDIUM)
- style-match: match product type
- consistency: same style across pages
- no-emoji-icons: use SVG icons only
Charts & Data (LOW)
- chart-type: match data type
- color-guidance: accessible palettes
- data-table: provide accessibility alternative
Common Professional UI Rules
Visual
- No emoji icons (use SVG)
- Stable hover states
- Correct brand logos
- Consistent sizing
Interaction
- cursor-pointer on all clickable elements
- Hover feedback
- Smooth transitions (150-300ms)
Light/Dark Mode
- bg-white with 80%+ opacity in light mode
- slate-900 text
- slate-600 minimum for muted text
- Visible borders in both modes
Layout
- Floating navbar spacing (top-4 left-4 right-4)
- Account for fixed navbar height
- Consistent max-width containers
Pre-Delivery Checklist
- Icons: No emoji, consistent icon sets, correct logos, no layout shifts on hover, SVG only
- Interaction: cursor-pointer on clickables, clear hover feedback, smooth transitions, visible focus states
- Contrast: 4.5:1 ratio, transparent elements visible, visible borders in both modes
- Layout: Proper floating element spacing, no hidden content, responsive at 375/768/1024/1440px, no horizontal scroll
- Accessibility: Images have alt text, form inputs labeled, color not sole indicator,
prefers-reduced-motionrespected
Answer in Korean.
Related Skills
taewoongheo/visual-hierarchy
development
VerifiedTrustedCommunity
Visual hierarchy verification — squint test, information density, primary action clarity, and empty state quality for mobile UI. Auto-load when doing design or layout work.
SKILL.mdUpdated Apr 16, 2026
taewoongheo/tdd-workflow
development
VerifiedTrustedCommunity
TDD patterns for React Native — Jest setup, React Native Testing Library patterns, mock strategies, and what to test vs skip. Auto-load when writing or running tests.
SKILL.mdUpdated Apr 16, 2026
taewoongheo/spatial-design
testing
VerifiedTrustedCommunity
Spacing, layout, and spatial relationships — consistent scale, proximity grouping, optical alignment, and density control for mobile UI. Auto-load when doing design or layout work.
SKILL.mdUpdated Apr 16, 2026
taewoongheo/reanimated
development
VerifiedTrustedCommunity
React Native Reanimated 4 animation patterns, worklet rules, gesture handler integration, and performance best practices. Auto-load when writing animations, gestures, or motion code.
SKILL.mdUpdated Apr 16, 2026