---
title: Responsive Patterns Rule Categories
version: 3.0.0
---

# Rule Categories

## 1. Modern CSS Layout (css-layout) -- HIGH -- 3 rules

Modern CSS layout patterns for intrinsic responsiveness, subgrid alignment, and foldable devices.

- `css-subgrid.md` -- CSS Subgrid for nested grid alignment, card layouts with aligned sections
- `css-intrinsic-responsive.md` -- Intrinsic responsive layouts with auto-fit, clamp(), container queries, zero breakpoints
- `responsive-foldables.md` -- Foldable/multi-screen devices, safe area insets, viewport segment queries

## 2. PWA (pwa) -- HIGH -- 2 rules

Progressive Web App patterns with Workbox 7.x service workers and installability.

- `pwa-service-worker.md` -- Workbox caching strategies, VitePWA config, update management
- `pwa-offline.md` -- Offline-first hooks, background sync, install prompts, web manifests

## 3. Animation (animation) -- HIGH -- 2 rules

Performant animation patterns with Motion library and CSS Scroll-Driven Animations.

- `animation-motion.md` -- Motion/Framer Motion presets, AnimatePresence, View Transitions API
- `animation-scroll.md` -- CSS scroll-driven animations, parallax, progressive enhancement