From shipshitdev-library
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.
npx claudepluginhub shipshitdev/skillsThis skill uses the workspace's default tool permissions.
Create a **production-ready** static landing page with:
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Analyzes competition with Porter's Five Forces, Blue Ocean Strategy, and positioning maps to identify differentiation opportunities and market positioning for startups and pitches.
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 scripts/scaffold.py \
--out ./my-landing-page \
--name "ProductName" \
--tagline "Your compelling value proposition" \
--features "Feature1,Feature2,Feature3"
# Interactive mode
python3 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