메뉴
Use when building UI that needs systematic design decisions, accessibility compliance, UX best practices, or pre-delivery quality checks - complements designing-frontends for production-grade interfaces
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use when creating application icons for Windows apps, from initial SVG design through to final ICO file
Use when improving code structure, applying design patterns, ensuring backward compatibility, or making incremental changes without altering behavior
Use when planning work items, managing backlogs, creating epics/features/stories/tasks, or organizing development work in Agile/SCRUM methodology
Use when implementing any feature or bugfix, before writing implementation code
Use when designing application structure, implementing layered architecture, applying DDD patterns, or making architectural decisions about separation of concerns
Use when building, designing, or coding Azure Logic Apps Consumption workflows - covers architecture patterns, Code View JSON conventions, error handling, performance optimization, security, naming conventions, and deployment best practices
| name | ui-ux-pro-max |
| description | Use when building UI that needs systematic design decisions, accessibility compliance, UX best practices, or pre-delivery quality checks - complements designing-frontends for production-grade interfaces |
Systematic design guide with priority-based UX rules, accessibility requirements, and pre-delivery checklists. Use alongside @designing-frontends for creative direction.
Core principle: Apply rules by priority (CRITICAL → HIGH → MEDIUM → LOW) and verify with checklist before delivery.
Use @designing-frontends for: Creative direction, bold aesthetics, unique visual identity
Use @ui-ux-pro-max for: Systematic rules, accessibility, checklists, production polish
| Rule | Requirement |
|---|---|
| color-contrast | Minimum 4.5:1 ratio for normal text |
| focus-states | Visible focus rings on all interactive elements |
| alt-text | Descriptive alt text for meaningful images |
| aria-labels | aria-label for icon-only buttons |
| keyboard-nav | Tab order matches visual order |
| form-labels | Use <label> with for attribute |
| touch-target-size | Minimum 44x44px touch targets |
| hover-vs-tap | Use click/tap for primary interactions |
| loading-buttons | Disable button during async operations |
| error-feedback | Clear error messages near the problem |
| cursor-pointer | Add cursor-pointer to all clickable elements |
| Rule | Requirement |
|---|---|
| image-optimization | Use WebP, srcset, lazy loading |
| reduced-motion | Check prefers-reduced-motion |
| content-jumping | Reserve space for async content |
| viewport-meta | width=device-width, initial-scale=1 |
| readable-font-size | Minimum 16px body text on mobile |
| horizontal-scroll | Ensure content fits viewport width |
| z-index-management | Define z-index scale (10, 20, 30, 50) |
| Rule | Requirement |
|---|---|
| line-height | Use 1.5-1.75 for body text |
| line-length | Limit to 65-75 characters per line |
| font-pairing | Match heading/body font personalities |
| duration-timing | Use 150-300ms for micro-interactions |
| transform-performance | Use transform/opacity, not width/height |
| loading-states | Skeleton screens or spinners |
| style-consistency | Use same style across all pages |
| no-emoji-icons | Use SVG icons, not emojis |
| Rule | Requirement |
|---|---|
| chart-type | Match chart type to data type |
| chart-colors | Use accessible color palettes |
| data-table | Provide table alternative for chart accessibility |
/* All clickable elements */
.clickable {
cursor: pointer;
transition: colors 200ms;
}
| Element | Light Mode | Dark Mode |
|---|---|---|
| Glass background | bg-white/80 | bg-white/10 |
| Text primary | #0F172A | #F8FAFC |
| Text secondary | #475569 | #94A3B8 |
| Borders | border-gray-200 | border-white/10 |
top-4 left-4 right-4 not top-0 left-0 right-0max-w-6xl or max-w-7xl for readabilityRun through before delivering any UI code:
bg-primary) not var() wrappercursor-pointerprefers-reduced-motion respectedThis skill includes comprehensive design databases in the data/ folder:
data/styles.md - 68 design styles with colors, effects, CSS implementationdata/colors.md - 96 color palettes by product type (SaaS, e-commerce, healthcare, etc.)data/typography.md - 57 font pairings with Google Fonts imports and Tailwind configWhen building UI, read the relevant data file for recommendations:
data/styles.md for Glassmorphism, Neubrutalism, Bento Grid, etc.data/colors.md for product-specific palettesdata/typography.md for curated pairings with importsdata/colors.md → Find "Financial Dashboard" palettedata/styles.md → Find "Data-Dense Dashboard" or "Executive Dashboard" styledata/typography.md → Find "Financial Trust" or "Dashboard Data" pairing| Mistake | Fix |
|---|---|
Missing cursor-pointer on buttons | Add to all clickable elements |
| Low contrast in light mode | Test with contrast checker (4.5:1 minimum) |
| Emojis as icons | Replace with SVG from Lucide/Heroicons |
| Touch targets too small | Ensure minimum 44x44px |
| No loading states | Add skeleton or spinner for async |
| Layout shift on hover | Use transform instead of width/margin |
| Missing focus states | Add visible :focus-visible styles |
Adapted from nextlevelbuilder/ui-ux-pro-max-skill - contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types.