메뉴
UI/UX and frontend design best practices guidelines (formerly frontend-design). This skill should be used when writing, reviewing, or designing frontend code to ensure accessibility, performance, and usability. Triggers on tasks involving HTML structure, CSS styling, responsive layouts, form design, animations, or accessibility improvements.
Comprehensive iOS development guidance including Swift best practices, SwiftUI patterns, UI/UX review against HIG, and app planning. Use for iOS code review, best practices, accessibility audits, or planning new iOS apps.
Comprehensive mobile app testing strategies for iOS and Android. Covers unit tests, UI tests, integration tests, performance testing, and test automation with Detox, Appium, and XCTest.
Mobile app testing strategy and execution for iOS and Android (native + cross-platform): choose automation frameworks, define device matrix, control flakes, validate performance/reliability/accessibility, and set CI + release gates. Use when you need a mobile QA plan, device lab/CI setup, or guidance on XCUITest/Espresso/Appium/Detox/Maestro/Flutter testing.
Expert mobile development covering iOS, Android, React Native, and Flutter for native and cross-platform applications.
| name | ui-design |
| description | UI/UX and frontend design best practices guidelines (formerly frontend-design). This skill should be used when writing, reviewing, or designing frontend code to ensure accessibility, performance, and usability. Triggers on tasks involving HTML structure, CSS styling, responsive layouts, form design, animations, or accessibility improvements. |
Comprehensive UI/UX and frontend design best practices guide. Contains 42 rules across 8 categories, prioritized by impact to guide accessible, performant, and user-friendly interface development.
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Accessibility & WCAG Compliance | CRITICAL | access- |
| 2 | Core Web Vitals Optimization | CRITICAL | cwv- |
| 3 | Visual Hierarchy & Layout | HIGH | layout- |
| 4 | Responsive & Mobile-First Design | HIGH | resp- |
| 5 | Typography & Font Loading | MEDIUM-HIGH | typo- |
| 6 | Color & Contrast | MEDIUM | color- |
| 7 | Forms & Validation UX | MEDIUM | form- |
| 8 | Animation & Performance | LOW-MEDIUM | anim- |
access-semantic-html - Use semantic HTML elements for screen readersaccess-keyboard-navigation - Ensure full keyboard navigationaccess-focus-indicators - Provide visible focus indicatorsaccess-alt-text - Provide meaningful alt text for imagesaccess-aria-labels - Use ARIA labels for icon-only controlsaccess-target-size - Ensure minimum touch target size (24×24px)access-heading-hierarchy - Maintain logical heading hierarchycwv-optimize-lcp - Optimize Largest Contentful Paint under 2.5scwv-minimize-cls - Minimize Cumulative Layout Shift under 0.1cwv-improve-inp - Improve Interaction to Next Paint under 200mscwv-responsive-images - Serve responsive images with srcsetcwv-lazy-load-offscreen - Lazy load offscreen images and iframescwv-critical-css - Inline critical CSS and defer the restlayout-visual-hierarchy - Establish clear visual hierarchylayout-whitespace - Use whitespace to improve readabilitylayout-f-pattern - Design for F-pattern reading behaviorlayout-grid-system - Use a consistent grid systemlayout-single-cta - Limit to one primary CTA per screenlayout-proximity-grouping - Group related elements with proximityresp-mobile-first - Design mobile-first with min-width queriesresp-fluid-typography - Use fluid typography with clamp()resp-container-queries - Use container queries for componentsresp-touch-targets - Size touch targets for mobile (44×44px)resp-viewport-meta - Configure viewport meta tag correctlytypo-font-display - Use font-display to control loading behaviortypo-preload-fonts - Preload critical web fontstypo-readable-line-length - Constrain line length (45-75ch)typo-line-height - Set appropriate line height (1.5-1.7)typo-system-font-stack - Use system font stack for UI elementscolor-contrast-ratio - Meet WCAG contrast ratio requirements (4.5:1)color-not-only-indicator - Never use color alone to convey informationcolor-dark-mode - Support dark mode with prefers-color-schemecolor-semantic-palette - Use semantic color names in design tokensform-inline-validation - Use inline validation after field blurform-error-messages - Write actionable error messagesform-labels-above - Place labels above input fieldsform-input-types - Use correct HTML input types for mobileform-autocomplete - Enable browser autocomplete with correct attributesanim-gpu-properties - Animate only GPU-accelerated propertiesanim-will-change - Use will-change sparingly for animation hintsanim-reduced-motion - Respect user motion preferencesanim-duration-easing - Use appropriate animation duration and easingRead individual reference files for detailed explanations and code examples:
For the complete guide with all rules expanded: AGENTS.md