Initial commit: 79+ design patterns, LLM prompts, and assets

system/responsive-patterns.md

@@ -0,0 +1,35 @@
+---
+name: system/responsive-patterns
+title: Responsive Design Patterns
+description: Breakpoints, mobile-first, container queries.
+tags: [system, responsive, mobile, container-queries]
+source: stripe.com, linear.app, brad.co, css-tricks.com
+---
+
+# Responsive Patterns
+
+## Breakpoints
+
+```css
+:root {
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+}
+```
+
+## Container Queries
+
+```css
+@container (min-width: 600px) {
+  .card { grid-template-columns: 1fr 1fr; }
+}
+```
+
+## Anti-patterns
+
+| ❌ Плохо | ✅ Хорошо |
+|----------|-----------|
+| 1000px breakpoint | 768px / 1024px |
+| Fixed width | `max-width: 1200px` |