メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Decision-tree skill that recommends the optimal funnel type based on the user's business model, price point, audience, and goals. Returns a ranked recommendation with reasoning.
Builds a 2-page community group growth funnel. Drives free opt-ins to a group (Skool, Whop, Facebook Group, Discord, or any community platform) using a lead magnet. Use when the goal is to grow a free or paid community.
Reverse-engineer any live public sales funnel and rebuild it — adapted for the user's brand, copy, and offer — without copyright infringement. Handles single pages or entire multi-page funnels. Uses Russell Brunson's Hook/Story/Offer framework to deconstruct what makes a funnel convert, then delegates the build to the funnel-builder agent.
Automated evergreen webinar funnel. Simulates a "live" experience on-demand so leads can register and watch immediately (or at scheduled slots). Best for scaling a proven webinar without live hosting.
High-ticket sales funnel for offers $3,000+. Combines authority content, social proof, and a booked-call CTA. Best for coaching programs, masterminds, done-for-you services, and enterprise solutions.
Recurring membership/subscription funnel. Acquires members with a free trial or low entry, then retains with ongoing value. Best for communities, content libraries, and recurring SaaS.
| name | mobile-responsive |
| description | 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. |
Over 60% of funnel traffic comes from mobile. Build mobile-first, always.
/* Mobile-first: base styles are for mobile */
/* Tablet */
@media (min-width: 768px) { /* ... */ }
/* Desktop */
@media (min-width: 1024px) { /* ... */ }
/* Large desktop */
@media (min-width: 1280px) { /* ... */ }
Every HTML page must include:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
.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); }
}
.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; }
}
: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;
}
/* 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;
}
img {
max-width: 100%;
height: auto;
display: block;
}