Mobile First Design

secondsky/claude-skills/plugins/mobile-first-design/skills/mobile-first-design

作者 secondsky88378361314fMIT227 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫10 天前更新

Designs responsive interfaces starting from mobile screens with progressive enhancement for larger devices. Use when building responsive websites, optimizing for mobile users, or implementing adaptive layouts.

僅含說明Design & Creative

AI 產生的概覽

提供行動優先的響應式介面設計指引，並針對較大螢幕逐步增強。

功能: 此技能提供從行動螢幕出發設計響應式網頁介面、再為較大裝置增強的說明與參考資料。它給出斷點寬度、行動優先 CSS 模式、適合觸控的尺寸、效能目標以及漸進增強分層。其產出是設計指引，而非檔案或程式碼成品。
適用情境: 適用於建置響應式網站、為行動使用者最佳化版面，或實作從小螢幕到桌機的自適應版面。
執行需求: 不需要指令碼或工具，僅為說明性內容。套用其中的 CSS 與 HTML 範例需要網頁專案及瀏覽器測試環境。

Mobile-First Design

Design interfaces starting with mobile as the foundation, then enhance for larger screens.

Breakpoints

Mobile-First CSS

css

/* Base styles (mobile) */.container {  padding: 1rem;}
.nav {  display: none; /* Hidden on mobile */}
.nav-toggle {  display: block; /* Hamburger visible */}
/* Tablet and up */@media (min-width: 768px) {  .container {    padding: 2rem;    max-width: 720px;    margin: 0 auto;  }
  .nav {    display: flex;  }
  .nav-toggle {    display: none;  }}
/* Desktop */@media (min-width: 1024px) {  .container {    max-width: 960px;  }}

/* Base styles (mobile) */.container {  padding: 1rem;}
.nav {  display: none; /* Hidden on mobile */}
.nav-toggle {  display: block; /* Hamburger visible */}
/* Tablet and up */@media (min-width: 768px) {  .container {    padding: 2rem;    max-width: 720px;    margin: 0 auto;  }
  .nav {    display: flex;  }
  .nav-toggle {    display: none;  }}
/* Desktop */@media (min-width: 1024px) {  .container {    max-width: 960px;  }}

Touch-Friendly Design

css

/* Minimum touch target: 48x48px */.button {  min-height: 48px;  min-width: 48px;  padding: 12px 24px;}
/* Adequate spacing */.list-item {  padding: 16px;  margin-bottom: 8px;}

/* Minimum touch target: 48x48px */.button {  min-height: 48px;  min-width: 48px;  padding: 12px 24px;}
/* Adequate spacing */.list-item {  padding: 16px;  margin-bottom: 8px;}

Performance Requirements

Progressive Enhancement

html

<!-- Layer 1: Semantic HTML (works without CSS/JS) --><nav>  <a href="/home">Home</a>  <a href="/about">About</a></nav>
<!-- Layer 2: CSS enhances appearance --><!-- Layer 3: JS adds interactivity -->

<!-- Layer 1: Semantic HTML (works without CSS/JS) --><nav>  <a href="/home">Home</a>  <a href="/about">About</a></nav>
<!-- Layer 2: CSS enhances appearance --><!-- Layer 3: JS adds interactivity -->

Best Practices

Start design at 320px width
Use relative units (rem, %, vw)
Test on real devices
Optimize images for mobile
Minimize JavaScript for initial load
Ensure readable text without zooming

來源與署名

來源：secondsky/claude-skills位於plugins/mobile-first-design/skills/mobile-first-design提交8837836

授權條款： MIT

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Name	Width	Devices
Mobile	320-480px	iPhone SE, small Android
Tablet	481-768px	iPad mini
Desktop	769-1024px	iPad Pro, laptops
Large	1025px+	Desktop monitors

Metric	Target
First Contentful Paint	<3s on 3G
JS bundle	<100KB gzipped
Total page weight	<500KB

Mobile First Design

Mobile-First Design

Breakpoints

Mobile-First CSS

Touch-Friendly Design

Performance Requirements

Progressive Enhancement

Best Practices

來源與署名

更多來自 secondsky/claude-skills 的技能

Vulnerability Scanning

Web Performance Optimization

Web Performance Audit

Threejs

Tailwind V4 Shadcn

Technical Specification

更多Design & Creative技能

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design