mobile-responsive

@ominou5 · 收录于 1 周前

Mobile-first responsive design patterns for sales funnels. Ensures every page works flawlessly on all screen sizes with proper touch targets, readable typography, and fast load times.

场景移动端适配响应式设计销售页面优化

适合你，如果你需要确保销售漏斗在手机和电脑上都有良好体验

/ 下载安装

mobile-responsive.skill双击,或拖进 Claude 桌面版 / Cowork,即完成安装↓ .skill ↓ .zip

用别的 agent?下载 .zip 解压,把文件夹放进它的技能目录

Claude Code~/.claude/skills/(项目级 .claude/skills/)

Codex CLI~/.codex/skills/

Cursor自动读取上面两处目录

其他工具见其文档的「skills」目录;两个下载是同一份文件,只是名字不同

/ 通过 npx 安装 校验哈希

npx oh-my-skill add ominou5/funnel-architect-plugin/mobile-responsive

/ 通过 bash 安装

curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- ominou5/funnel-architect-plugin/mobile-responsive

/ 已经装过?验证本机副本,不用重装

npx oh-my-skill verify ominou5/funnel-architect-plugin/mobile-responsive

安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。

67GitHub stars

~675上下文体积 · 单文件

镜像托管

怎么用

技能原文 SKILL.md作者撰写 · MIT · 7c5acf6

Mobile-Responsive Design

Over 60% of funnel traffic comes from mobile. Build mobile-first, always.

Breakpoint System

/* Mobile-first: base styles are for mobile */

/* Tablet */
@media (min-width: 768px) { /* ... */ }

/* Desktop */
@media (min-width: 1024px) { /* ... */ }

/* Large desktop */
@media (min-width: 1280px) { /* ... */ }

Required Meta Tag

Every HTML page must include:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Layout Patterns

Single-Column Mobile Layout

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Stack everything on mobile */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

Sticky Mobile CTA

.mobile-cta-bar {
  display: none;
}

@media (max-width: 767px) {
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
  }

  .mobile-cta-bar .cta-primary {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
  }

  /* Prevent content overlap with sticky bar */
  body { padding-bottom: 80px; }
}

Typography Scale

:root {
  /* Mobile-first sizes */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px — minimum for body */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
}

h1 {
  font-size: var(--text-3xl);
  line-height: 1.2;
}

@media (min-width: 768px) {
  h1 { font-size: var(--text-4xl); }
}

@media (min-width: 1024px) {
  h1 { font-size: 3rem; /* 48px */ }
}

body {
  font-size: var(--text-base); /* Never below 16px — prevents iOS zoom */
  line-height: 1.6;
}

Touch Target Requirements

/* Minimum 44x44px for all interactive elements */
button, a, input, select, textarea {
  min-height: 44px;
  min-width: 44px;
}

/* Adequate spacing between tap targets */
.nav-links a {
  padding: 12px 16px;
}

.form-group + .form-group {
  margin-top: 16px;
}

Responsive Images

img {
  max-width: 100%;
  height: auto;
  display: block;
}

Mobile Testing Checklist

[ ] Viewport meta tag present
[ ] No horizontal scroll at any viewport width
[ ] All text readable without zooming (min 16px)
[ ] All touch targets at least 44x44px
[ ] Forms usable with thumb (single column, large inputs)
[ ] CTA visible without scrolling OR sticky bar present
[ ] Images scale proportionally
[ ] No fixed-width elements wider than viewport
[ ] Modals/popups fit within mobile viewport
[ ] Page loads in < 3s on 3G connection

按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。

…