Claude-skill-registry design_responsive

Breakpoints, fluid typography, container queries ve modern CSS features.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/design-responsive-vuralserhat86-antigravity-agentic" ~/.claude/skills/majiayu000-claude-skill-registry-design-responsive && rm -rf "$T"

manifest: skills/data/design-responsive-vuralserhat86-antigravity-agentic/SKILL.md

📱 Design Responsive

Responsive tasarım ve modern CSS özellikleri.

📐 1. Breakpoints

Standard

Mobile:       0 - 639px
Tablet SM:    640 - 767px
Tablet:       768 - 1023px
Desktop:      1024 - 1439px
Wide:         1440px+

Tailwind Mapping

sm:  640px
md:  768px
lg:  1024px
xl:  1280px
2xl: 1536px

🔤 2. Fluid Typography

:root {
  --fluid-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --fluid-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --fluid-lg: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --fluid-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --fluid-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
}

📦 3. Container System

Device	Max-Width	Padding
Mobile	100%	16px
Tablet	768px	24px
Desktop	1200px	32px
Wide	1440px	48px

🎯 4. Container Queries

.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

⚙️ 5. User Preferences

/* Dark mode */
@media (prefers-color-scheme: dark) { }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}

/* High contrast */
@media (prefers-contrast: high) { }

📋 6. Grid Columns

Device	Columns	Gutter
Mobile	4	16px
Tablet	8	16px
Desktop	12	24px

🔄 Workflow

Kaynak: MDN - Container Queries & Utopia - Fluid Responsive Design

Aşama 1: Viewport & Layout Strategy

Mobile First: Tasarımı en küçük ekran boyutundan başlayarak kurgula.
Breakpoints Selection: Cihaz bazlı değil, içerik bazlı (Content-driven) kırılma noktaları belirle.
Fluid Scaling: Typography ve spacing için
```
clamp()
```
fonksiyonlarını hesapla ve entegre et.

Aşama 2: Modern CSS Implementation

Container Queries: Komponentlerin içindeki bulundukları alana göre (Viewport değil) şekil almasını sağla.
Grid/Flex Optimization: Kompleks layout'lar için
```
CSS Grid
```
(Area naming) ve
```
Flexbox
```
(Gap) kullan.
Image Optimization:
```
srcset
```
ve
```
aspect-ratio
```
kullanarak görsel yüklemelerini ve düzenini optimize et.

Aşama 3: Performance & Accessibility Audit

Lighthouse Check: Core Web Vitals (LCP/CLS) metriklerini mobil için optimize et.
Interaction Check: Dokunmatik (Touch) alanların yeterli boyutta (min 44x44px) olduğunu doğrula.

User Preferences:

prefers-color-scheme

prefers-reduced-motion

desteğini test et.

Kontrol Noktaları

Aşama	Doğrulama
1	Tasarım 320px (iPhone SE) ve 2560px (Ultra-wide) arasında sorunsuz mu?
2	Horizontal scroll oluşuyor mu? (Overflow kontrolü)
3	Font boyutları her viewport'ta okunabilir mi?

Design Responsive v1.5 - With Workflow