From shipshitdev-frontend
Scaffolds production-ready static landing pages with HTML/CSS/vanilla JS, working email capture via Formspree, analytics integration, responsive design. Deploys instantly to Vercel.
npx claudepluginhub shipshitdev/libraryThis skill uses the workspace's default tool permissions.
Create a **production-ready** static landing page with:
Scaffolds production-ready static landing pages with working email capture forms, analytics integration, responsive design, and one-click Vercel deployment using HTML, CSS, and vanilla JS.
Designs and builds high-converting landing pages for product launches with hero sections, SEO, waitlists, urgency mechanics, and developer-first patterns. Useful for launch, feature, signup, or marketing pages.
Generates a single-file HTML landing page from a brief using Tailwind CSS CDN. Includes responsive design, dark mode, hero with CTA, features, testimonials, FAQ, footer, and OG meta tags.
Share bugs, ideas, or general feedback.
Create a production-ready static landing page with:
This skill generates working landing pages, not empty templates:
Ask the user for product details, then extract and confirm:
I'll help you create a landing page. Based on your description:
**Product:** [Name]
**Tagline:** [One-line value proposition]
**Hero Section:**
- Headline: [Main headline]
- Subheadline: [Supporting text]
- CTA: [Button text]
**Features:** (3-5)
1. [Feature 1]: [Description]
2. [Feature 2]: [Description]
3. [Feature 3]: [Description]
**CTA Type:** [Waitlist / Sign Up / Demo Request / Contact]
**Social Proof:** [Testimonials / Logos / Stats / None]
Is this correct? Any adjustments?
Generate complete landing page content:
Sections:
Email Capture Options:
Formspree (Recommended - Free tier)
Custom Endpoint
Waitlist Service
Verify before handoff:
# Create landing page with PRD
python3 ~/.claude/skills/landing-page-vercel/scripts/scaffold.py \
--out ./my-landing-page \
--name "ProductName" \
--tagline "Your compelling value proposition" \
--features "Feature1,Feature2,Feature3"
# Interactive mode
python3 ~/.claude/skills/landing-page-vercel/scripts/scaffold.py \
--out ./my-landing-page \
--interactive
my-landing-page/
├── index.html # Main landing page
├── styles.css # All styles (no framework)
├── script.js # Form handling + interactions
├── data.json # Content data (easy to edit)
├── vercel.json # Vercel configuration
├── assets/
│ ├── favicon.ico
│ └── og-image.png # Social sharing image
└── README.md # Deployment instructions
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('signup-form');
const button = form.querySelector('button[type="submit"]');
const messageEl = document.getElementById('form-message');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const originalText = button.textContent;
try {
button.textContent = 'Submitting...';
button.disabled = true;
const response = await fetch(form.action, {
method: 'POST',
body: new FormData(form),
headers: { 'Accept': 'application/json' }
});
if (response.ok) {
// Hide form and show success message
form.style.display = 'none';
messageEl.textContent = 'Thanks! We will be in touch.';
messageEl.classList.add('success');
} else {
throw new Error('Form submission failed');
}
} catch (error) {
button.textContent = originalText;
button.disabled = false;
messageEl.textContent = 'Something went wrong. Please try again.';
messageEl.classList.add('error');
}
});
});
{
"name": "ProductName",
"tagline": "Your compelling value proposition",
"hero": {
"headline": "Build something amazing",
"subheadline": "The easiest way to create, launch, and grow your product.",
"cta": "Join the Waitlist"
},
"features": [
{
"icon": "zap",
"title": "Lightning Fast",
"description": "Built for speed from the ground up."
},
{
"icon": "shield",
"title": "Secure by Default",
"description": "Enterprise-grade security included."
},
{
"icon": "sparkles",
"title": "AI-Powered",
"description": "Smart features that learn from you."
}
],
"faq": [
{
"question": "When will you launch?",
"answer": "We're aiming for Q1 2026. Join the waitlist to be first to know."
}
]
}
YOUR_FORM_ID in the HTML// In script.js, update the form action
const API_URL = 'https://your-api.com/api/waitlist';
form.addEventListener('submit', async (e) => {
e.preventDefault();
const email = form.querySelector('input[name="email"]').value;
const response = await fetch(API_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email })
});
// Handle response...
});
<!-- Add to head section -->
<script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script>
<!-- Add to head section -->
<script src="https://cdn.usefathom.com/script.js" data-site="YOUR_SITE_ID" defer></script>
# Install Vercel CLI
npm i -g vercel
# Deploy
cd my-landing-page
vercel
# Production deploy
vercel --prod
{
"version": 2,
"builds": [
{ "src": "*.html", "use": "@vercel/static" },
{ "src": "*.css", "use": "@vercel/static" },
{ "src": "*.js", "use": "@vercel/static" },
{ "src": "assets/**", "use": "@vercel/static" }
],
"routes": [
{ "src": "/(.*)", "dest": "/index.html" }
],
"headers": [
{
"source": "/(.*)",
"headers": [
{ "key": "X-Content-Type-Options", "value": "nosniff" },
{ "key": "X-Frame-Options", "value": "DENY" },
{ "key": "X-XSS-Protection", "value": "1; mode=block" }
]
}
]
}
:root {
--color-primary: #3b82f6;
--color-primary-dark: #2563eb;
--color-bg: #0f172a;
--color-bg-secondary: #1e293b;
--color-text: #f8fafc;
--color-text-muted: #94a3b8;
--font-sans: system-ui, -apple-system, sans-serif;
--max-width: 1200px;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 2rem;
--spacing-xl: 4rem;
}
scripts/scaffold.py - Generation scriptassets/templates/ - HTML/CSS templates