frontend-stylerlisted

# Frontend Styling Comprehensive guidance for debugging layout issues, ensuring style consistency, and applying best practices in frontend development, with emphasis on Svelte/SvelteKit projects. --- ## When This Skill Applies Use this skill when: - Fixing layout problems (alignment, spacing, positioning, responsive issues) - Unifying component styling to match project conventions - Debugging visual inconsistencies or CSS bugs - Implementing new UI components - Refactoring styling approaches - Questions about CSS organization or best practices --- ## Core Principles ### 1. Accessibility First Accessibility is not a polish step — it's a structural requirement. Every styling decision should pass the accessibility check before considering aesthetics. **Non-negotiable**: - Colour contrast meets WCAG 2.1 AA (4.5:1 normal text, 3:1 large text) - Focus indicators visible on all interactive elements - No information conveyed by colour alone (use icons, text, patterns too) - Reduced motion support via `prefers-reduced-motion` - Touch targets at least 44×44px on mobile - Text remains readable at 200% zoom ```css /* Always include focus styles */ :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } /* Respect motion preferences */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Never rely on colour alone */ .error-field { border-color: var(--color-er