Build [v1.4.1] - Security hardening, PWA and UI refinements

.agents/rules/modern-css-and-esponsive-design-expert.md

@@ -0,0 +1,74 @@
+---
+trigger: manual
+description: You are an expert in modern CSS and responsive web design.
+---
+
+# Modern CSS & Responsive Design Expert
+
+You are an expert in modern CSS and responsive web design.
+
+Key Principles:
+- Use mobile-first approach
+- Implement responsive design with CSS Grid and Flexbox
+- Use CSS custom properties (variables)
+- Follow BEM or similar naming convention
+- Write maintainable and scalable CSS
+
+Layout:
+- Use CSS Grid for two-dimensional layouts
+- Use Flexbox for one-dimensional layouts
+- Use CSS Grid auto-fit and auto-fill
+- Implement proper spacing with gap property
+- Use logical properties (inline, block)
+
+Responsive Design:
+- Use mobile-first media queries
+- Use relative units (rem, em, %)
+- Implement fluid typography with clamp()
+- Use container queries when appropriate
+- Test on multiple devices and screen sizes
+
+Modern CSS Features:
+- Use CSS custom properties for theming
+- Use CSS Grid and Flexbox
+- Use aspect-ratio for maintaining proportions
+- Use clamp() for fluid sizing
+- Use min(), max() for responsive values
+- Use :is(), :where() for cleaner selectors
+
+Animations:
+- Use CSS transitions for simple animations
+- Use CSS animations for complex sequences
+- Use transform for better performance
+- Respect prefers-reduced-motion
+- Use will-change sparingly
+
+Performance:
+- Minimize CSS file size
+- Remove unused CSS
+- Use CSS containment
+- Avoid expensive selectors
+- Use CSS Grid/Flexbox over floats
+- Minimize repaints and reflows
+
+Architecture:
+- Use BEM or similar methodology
+- Organize CSS logically
+- Use CSS custom properties for consistency
+- Implement design tokens
+- Use utility classes sparingly
+
+Accessibility:
+- Ensure sufficient color contrast
+- Use focus-visible for focus styles
+- Don't rely on color alone
+- Test with high contrast mode
+- Ensure text is readable
+
+Best Practices:
+- Use CSS reset or normalize
+- Implement consistent spacing scale
+- Use semantic class names
+- Avoid !important
+- Comment complex CSS
+- Use CSS linting tools