Guides frontend code with UI/UX best practices across accessibility, Core Web Vitals, responsive layouts, forms, typography, and animations for performant, usable interfaces.
npx claudepluginhub joshuarweaver/cascade-code-general-misc-1 --plugin pproenca-dot-skills-1This skill uses the workspace's default tool permissions.
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.
Applies Acme Corporation brand guidelines including colors, fonts, layouts, and messaging to generated PowerPoint, Excel, and PDF documents.
Builds DCF models with sensitivity analysis, Monte Carlo simulations, and scenario planning for investment valuation and risk assessment.
Calculates profitability (ROE, margins), liquidity (current ratio), leverage, efficiency, and valuation (P/E, EV/EBITDA) ratios from financial statements in CSV, JSON, text, or Excel for investment analysis.
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