How do I install the Create Landing Page skill?

Run npx skillmds@latest add reggiechan74/create-landing-page in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Create Landing Page skill do?

Create a professional landing page using tactical CSS design system and copywriting best practices It is listed under Design & Media on SkillMD.

Is Create Landing Page safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Create Landing Page?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Create Landing Page free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Create Landing Page?

reggiechan74 (@reggiechan74) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Create Landing Page by reggiechan74

Name: Create Landing Page
Author: reggiechan74

Configuration

Read .jobops/config.json. If missing, stop with:

JOBOPS NOT CONFIGURED Run /jobops:setup (then /jobops-ic:setup) to initialize your workspace.

Use config.directories.contractor_root for output paths in this skill. Use config.preferences.default_currency for pricing if applicable.

Arguments

I'll create a professional landing page using the tactical CSS design system and strategic copywriting principles.

$1: Page name/identifier (required, used as {slug}) - e.g., services, about, product-launch
--template: CSS template style (optional): tactical | minimal | corporate (default: tactical)

This skill acts as the landing-page orchestrator and owns the per-slug folder: {config.directories.contractor_root}/landing-pages/{slug}/. The sibling skills (copywrite, copywriting-spec, css-template) write sibling files (copy.md, spec.md, styles.css) INTO the same {slug} folder, with {slug} = $1.

Phase 1: Discovery & Content Planning

1.1: Gather Page Requirements

Before creating the landing page, I need to understand:

Page Purpose: What is this landing page for?
- Service promotion
- Product launch
- Lead generation
- Event registration
- Portfolio showcase
- Company/brand introduction
Target Audience: Who should this page resonate with?
- Industry/sector
- Job titles/roles
- Pain points and motivations
- Technical sophistication level
Desired Action: What should visitors do?
- Book a call/consultation
- Download a resource
- Sign up for newsletter
- Request a quote
- Start a trial

1.2: Invoke Copywriter Agent

Use the landing-page-copywriter agent to develop strategic copy:

Task tool with subagent_type='landing-page-copywriter'

The copywriter will deliver:

Compelling headline and hook
Hero section messaging
Problem/agitation content
Solution positioning
Benefits (not features)
Social proof framework
Call-to-action copy
Supporting section copy

Phase 2: Load Design System

2.1: Read CSS Template

Based on the --template argument, load the appropriate CSS:

Template	CSS File (bundled with plugin)	Best For
tactical	`${CLAUDE_PLUGIN_ROOT}/styles/subpage-styles.css`	Tech, consulting, B2B services
minimal	`${CLAUDE_PLUGIN_ROOT}/styles/minimal-styles.css`	Creative, portfolio, personal brands
corporate	`${CLAUDE_PLUGIN_ROOT}/styles/corporate-styles.css`	Enterprise, financial, healthcare

Default: Use ${CLAUDE_PLUGIN_ROOT}/styles/subpage-styles.css (tactical theme) which includes:

Military/tactical aesthetic with gradient backgrounds
Feature grids and method cards
Terminal-style code displays
Pipeline/step indicators
Responsive breakpoints (tablet 768px, mobile 480px)

2.2: Identify Available Components

From the loaded CSS, catalog available component classes:

Navigation: .nav, .nav-link, .nav-cta
Hero: .hero, .hero-content, .hero-title, .hero-subtitle
Sections: .content-section, .section-title, .highlight-text
Feature displays: .feature-grid, .feature-item, .feature-icon
Method cards: .method-cards, .method-card, .method-title
Pipeline steps: .pipeline-steps, .pipeline-step
CTAs: .cta-section, .cta-btn, .secondary-btn
Footer: .footer, .footer-links

Phase 3: Generate Landing Page

3.1: Invoke Frontend Design Skill

Use the frontend-design skill to generate production-grade HTML:

Skill: frontend-design:frontend-design

Provide the skill with:

The strategic copy from the copywriter agent
The CSS design system components
The page structure requirements

3.2: Page Structure Template

Generate HTML following this proven landing page structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[Page Title] | [Brand Name]</title>
    <meta name="description" content="[SEO meta description from copywriter]">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Navigation -->
    <nav class="nav">...</nav>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-content">
            <h1 class="hero-title">[Headline]</h1>
            <p class="hero-subtitle">[Subheadline]</p>
            <a href="#cta" class="cta-btn">[Primary CTA]</a>
        </div>
    </section>

    <!-- Problem/Agitation -->
    <section class="content-section">
        <h2 class="section-title">[Problem Hook]</h2>
        <!-- Pain points, statistics, urgency -->
    </section>

    <!-- Solution/Benefits -->
    <section class="content-section">
        <h2 class="section-title">[Solution Hook]</h2>
        <div class="feature-grid">
            <!-- Benefits as feature items -->
        </div>
    </section>

    <!-- How It Works / Method -->
    <section class="content-section">
        <h2 class="section-title">[Process Hook]</h2>
        <div class="method-cards">
            <!-- Steps or methodology -->
        </div>
    </section>

    <!-- Social Proof -->
    <section class="content-section">
        <h2 class="section-title">[Credibility Hook]</h2>
        <!-- Testimonials, logos, metrics -->
    </section>

    <!-- Call to Action -->
    <section class="cta-section" id="cta">
        <h2>[CTA Headline]</h2>
        <p>[CTA Supporting Copy]</p>
        <a href="[action-url]" class="cta-btn">[Primary CTA Button]</a>
        <a href="[secondary-url]" class="secondary-btn">[Secondary CTA]</a>
    </section>

    <!-- Footer -->
    <footer class="footer">...</footer>
</body>
</html>

3.3: Design Requirements

The frontend-design skill MUST ensure:

Visual Hierarchy
- Single primary CTA color (never compete with hero)
- Headline is the largest text element
- Subheadline supports, doesn't distract
- Clear visual flow down the page
Mobile-First Responsive
- Touch-friendly tap targets (min 44px)
- Readable text without zooming
- Stacked layouts on mobile
- No horizontal scrolling
Performance
- No external font dependencies (use font stacks)
- Optimized images (lazy loading if images included)
- Minimal JavaScript (CSS-only animations preferred)
Accessibility
- Semantic HTML structure
- Proper heading hierarchy (h1 > h2 > h3)
- Sufficient color contrast (WCAG AA)
- Focus states for interactive elements

Phase 4: Quality Review

4.1: Landing Page Checklist

Before finalizing, verify:

Category	Requirement	Status
Copy	Headline hooks in <3 seconds	[ ]
Copy	Benefits before features	[ ]
Copy	Single, clear CTA	[ ]
Copy	Social proof present	[ ]
Design	Consistent visual theme	[ ]
Design	Mobile-responsive	[ ]
Design	Above-fold CTA visible	[ ]
Technical	Valid HTML5	[ ]
Technical	CSS linked correctly	[ ]
Technical	Meta tags populated	[ ]

4.2: Preview with Playwright

Use Playwright MCP to preview the landing page:

Navigate to the generated HTML file
Take screenshots at desktop (1280px) and mobile (375px) widths
Verify visual appearance matches design intent
Check for layout issues or broken elements

Phase 5: Output & Delivery

5.1: Save Files

Save the generated landing page and assets to the per-slug folder:

Primary: {config.directories.contractor_root}/landing-pages/{slug}/index.html
Stylesheet: copy the selected template CSS from ${CLAUDE_PLUGIN_ROOT}/styles/{template}-styles.css to {config.directories.contractor_root}/landing-pages/{slug}/styles.css (rename to styles.css regardless of template, so the HTML <link href="styles.css"> resolves).
Any other assets (images, etc.) go in the same {slug}/ folder.

Create the folder if needed: mkdir -p {config.directories.contractor_root}/landing-pages/{slug}. Then cp ${CLAUDE_PLUGIN_ROOT}/styles/{template}-styles.css {config.directories.contractor_root}/landing-pages/{slug}/styles.css.

If /jobops-ic:css-template is being used to author a custom stylesheet for this page, it will write to the same {slug}/styles.css — the two skills coordinate on that fixed filename.

5.2: Report Results

Provide:

File location
Screenshot previews (if taken)
Any copywriting notes or suggestions
Recommendations for A/B testing variations

Example Usage

# Create a services landing page with tactical theme
# -> {contractor_root}/landing-pages/services/index.html
/landing-page:create services

# Create a product launch page with minimal theme
# -> {contractor_root}/landing-pages/product-launch/index.html
/landing-page:create product-launch --template=minimal

# Create with corporate styling for enterprise clients
# -> {contractor_root}/landing-pages/enterprise-solutions/index.html
/landing-page:create enterprise-solutions --template=corporate

Now executing the landing page creation pipeline for $1...

Create Landing Page

File contents

Configuration

Arguments

Phase 1: Discovery & Content Planning

1.1: Gather Page Requirements

1.2: Invoke Copywriter Agent

Phase 2: Load Design System

2.1: Read CSS Template

2.2: Identify Available Components

Phase 3: Generate Landing Page

3.1: Invoke Frontend Design Skill

3.2: Page Structure Template

3.3: Design Requirements

Phase 4: Quality Review

4.1: Landing Page Checklist

4.2: Preview with Playwright

Phase 5: Output & Delivery

5.1: Save Files

5.2: Report Results

Example Usage

Frequently asked questions

Create Landing Page

File contents

Configuration

Arguments

Phase 1: Discovery & Content Planning

1.1: Gather Page Requirements

1.2: Invoke Copywriter Agent

Phase 2: Load Design System

2.1: Read CSS Template

2.2: Identify Available Components

Phase 3: Generate Landing Page

3.1: Invoke Frontend Design Skill

3.2: Page Structure Template

3.3: Design Requirements

Phase 4: Quality Review

4.1: Landing Page Checklist

4.2: Preview with Playwright

Phase 5: Output & Delivery

5.1: Save Files

5.2: Report Results

Example Usage

Related skills

Frequently asked questions

How do I install the Create Landing Page skill?

What does the Create Landing Page skill do?

Is Create Landing Page safe to use?

Which AI agents work with Create Landing Page?

Is Create Landing Page free to use?

Who published Create Landing Page?